2d:null 2e:["$","title",null,{"children":"iXMaps example: topojson & dynamic charts | gjrichter | Observable"}] 33:T417,TERREMOTI = ixmaps.theme("generic") .data({ type: "ext", query: query.toString(), cache: "false", refresh: "10" }) .binding({value: "Depth/Km",position: "Latitude|Longitude",size: "Magnitude",title: "EventLocationName"}) .style({ type: "CHART|BUBBLE|QUANTILE|LINEAR|VALUES|COUNT", colorscheme: ["7","RGB(245,41,38)","RGB(74,74,255)","dynamic"], fillopacity: "0.7", shadow: "true", legendunits: "km", normalsizevalue: "5", timefield: "Time", // get the time from this column valuefield: "Magnitude", // show the magnitude as text, the color comes from Depth/km valuescale: "1.2", valuedecimals: "1", showdata: "true" }) .meta({ title: "Terremoti della ultima settimana", snippet: "Il colore rappresenta la profondità mentra la grandezza la magnitudine", description: "Fonte: INGV Centro Nazionale Terremoti licenza cc-by-4.0" }) .define()34:[] 31:{"id":"2b72cee3c00be9e9","slug":"ixmaps-example-topojson-dynamic-charts","title":"iXMaps example: topojson & dynamic charts","thumbnail":"32427a6a3a09aa53dcfd59e1da34bdc0e951b8a9078e55e21954c6ba1c1b9a29","access_level":"public","create_time":"$D2022-02-07T09:26:18.012Z","update_time":"$D2022-11-09T11:35:36.249Z","view_time":null,"first_public_time":"$D2022-02-18T19:01:31.639Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"ab0359f3bbecf78a","login":"gjrichter","name":"","avatar_url":"https://avatars-next.observableusercontent.com/1dd94096da79a76babfe37a3431edc30377043a898592a3437e913920b189ed3","tier":"starter_2024"},"version":273,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"921009d8ff1c586f","login":"gjrichter","name":"","avatar_url":"https://avatars-next.observableusercontent.com/1dd94096da79a76babfe37a3431edc30377043a898592a3437e913920b189ed3","tier":null}],"members":[{"type":"individual","id":"921009d8ff1c586f","login":"gjrichter","name":"","avatar_url":"https://avatars-next.observableusercontent.com/1dd94096da79a76babfe37a3431edc30377043a898592a3437e913920b189ed3","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"iXMaps example: topojson & dynamic charts","cells":[{"id":0,"value":"# iXMaps example: topojson & dynamic charts\n## static topojson layer to show DISS (Database of Individual Seismogenic Sources - INGV) elements and dynamic charts with the last week of seismic activity loaded directly from the INGV open data feed","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"map = ixmaps.embed(\"mymap\", { \n\n mapCdn: \"https://gjrichter.github.io/ixmaps\",\n width: \"100%\",\n height: \"720px\",\n legend: \"true\",\n item: \"html\"},\n\n map => map\n .mapType(\"OpenStreetMap - FR\")\n .view([41.577354839557856,15.468750000000002],6) \n .attribution(attribution) \n\t\t.localize(\"loading data ...\", \" ⭳ data\")\t \n .options({\n featurescaling: \"dynamic\",\n objectscaling: \"dynamic\",\n normalSizeScale: \"10000000\",\n panhidden:\"false\",\n basemapopacity: \"0.7\"\n })\n .layer(DISS_1)\n .layer(DISS_2) \n .layer(DISS_3) \n .layer(DISS_4) \n .layer(DISS_5)\n .layer(TERREMOTI) \n )\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":236,"value":"La mappa visualizza gli eventi sismici pubblicati dal INGV in Open Data per l'ultima settimana.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":96,"value":"Per caricare i dati dell'ultima settimana dal INGV, dobbiamo costruire un URL con la data di 7 giorni fa. Questo realizza la function ***query()***, definito sotto. \n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":16,"value":"\t\tquery = function(data,options){\n\n\t\t\tvar date = new Date();\n\t\t\tvar uTime = date.getTime();\n\n\t\t\t/* 7 days to the past */\n\t\t\tuTime -= 1000*60*60*24 * 7;\n\n\t\t\tdate = new Date(uTime);\n\n\t\t\tvar year = date.getFullYear();\n\t\t\tvar month = date.getMonth()+1;\n\t\t\tvar day = date.getDate();\n\n\t\t\tvar szStartdate = year +\"-\"+ String(\"0\"+month).slice(-2) +\"-\"+ String(\"0\"+day).slice(-2);\n\n\t\t\tData.feed({source:\"https://webservices.ingv.it/fdsnws/event/1/query?starttime=\"+szStartdate+\"T00%3A00%3A00&minmag=1&maxmag=10&mindepth=-10&maxdepth=1000&minlat=-90&maxlat=90&minlon=-180&maxlon=180&minversion=100&orderby=time-asc&format=text&limit=10000\",\n\t\t\t\t\t type:\"csv\",\n\t\t\t\t\t }).load(function(newData){\n\t\t\t\t\t\tnewData.addTimeColumns({\"source\":\"Time\"});\n\t\t\t\t\t\toptions.type = \"jsonDB\",\n\t\t\t\t\t\tixmaps.setExternalData(newData,options);\n\t\t\t\t\t});\n\t\t};\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":112,"value":"Questa function viene inserito **in modo testuale** nella **definizione del tema** (TERREMOTI) per la visualizzazione: ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":102,"value":" .data({\n type: \"ext\",\n query: query.toString(),\n cache: \"false\",\n refresh: \"10\" \n })\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":204,"value":"---\n# temi\n\nI temi definiscono i layer della mappa per la visualizzazioni di dati.\n\nQui i layer della mappa: \n\n- 5 layer statici con i vari elementi del DISS
(Database of Individual Seismogenic Sources - INGV - \n_i dati sono stati scaricati in formato .shp, poi trasformati in TopoJson e caricati su GitHub_)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":165,"value":" DISS_1 = \n ixmaps.layer(\"DISS_3.3.0_1\")\n .data({\n name: \"DSS330\",\n url: \"https://raw.githubusercontent.com/gjrichter/data/master/TopoJSON/INGV/DISS_3.3.0.json\", type: \"topojson\" })\n .style({\n colorscheme: [\"#9FA0FF\"],linecolor: \"#9FA0FF\" })\n .define()\t\t ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":170,"value":" DISS_2 = \n ixmaps.layer(\"DISS_3.3.0_2\")\n .data({\n name: \"ISS330\",\n url: \"https://raw.githubusercontent.com/gjrichter/data/master/TopoJSON/INGV/DISS_3.3.0.json\", type: \"topojson\" })\n .style({ \n colorscheme: [\"none\"], linecolor: \"#FD7A00\" })\n .define()\t\t ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":171,"value":" DISS_3 = \n ixmaps.layer(\"DISS_3.3.0_3\")\n .data({\n name: \"CSSPLN330\",\n url: \"https://raw.githubusercontent.com/gjrichter/data/master/TopoJSON/INGV/DISS_3.3.0.json\", type: \"topojson\" })\n .style({\n colorscheme: [\"#FD7A00\"], opacity: \"0.3\", linecolor: \"none\" })\n .define()\t","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":175,"value":"DISS_4 = \n ixmaps.layer(\"DISS_3.3.0_4\")\n .data({\n name: \"CSSTOP330\",\n url: \"https://raw.githubusercontent.com/gjrichter/data/master/TopoJSON/INGV/DISS_3.3.0.json\", \"type\": \"topojson\" })\n .style({\n colorscheme: [\"#FD7A00\"], linewidth: \"0.3\" })\n .define()\t","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":182,"value":"DISS_5 = \n ixmaps.layer(\"DISS_3.3.0_5\")\n .data({\n name: \"SUBDCNT330\",\n url: \"https://raw.githubusercontent.com/gjrichter/data/master/TopoJSON/INGV/DISS_3.3.0.json\", type: \"topojson\" })\n .style({\n colorscheme: [\"#888888\"], linewidth: \"0.2\" })\n .define()\t\t\t ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":214,"value":"
\n- 1 layer dinamico con i terremoti della ultima settimana.
Ingloba la function _query()_ per scaricare il dataset attuale dal INGV ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":190,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":208,"value":"---\nAltre definizioni usati nella mappa","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":145,"value":"attribution = \n\t\t\t\"

data: DISS Working Group. (2021). Database of Individual Seismogenic Sources (DISS), version 3.3.0
Data terremoti: Istituto Nazionale di Geofisica e Vulcanologia (INGV)

\";\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":228,"value":"---\nPer vedere il codice che crea la mappa si prega di aprire la casella della mappa.\n\nIn seguito una dimostrazione degli dati usati e caricati dal INGV. La mappa carica gli stessi dati attraverso la funzione _query()_ ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":66,"value":"--- \n# dati","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":90,"value":"Qui scarichiamo i dati attuali una seconda volta per scopo dimostrativo. La mappa carica i dati indipendentemente.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":70,"value":"startdate = {\n\n var date = new Date();\n var uTime = date.getTime();\n\n /* 7 days to the past */\n uTime -= 1000*60*60*24 * 7;\n\n date = new Date(uTime);\n\n var year = date.getFullYear();\n var month = date.getMonth()+1;\n var day = date.getDate();\n\n return (year +\"-\"+ String(\"0\"+month).slice(-2) +\"-\"+ String(\"0\"+day).slice(-2));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":74,"value":"data = d3.dsv(\"|\",\"https://webservices.ingv.it/fdsnws/event/1/query?starttime=\"+startdate+\"T00%3A00%3A00&minmag=1&maxmag=10&mindepth=-10&maxdepth=1000&minlat=-90&maxlat=90&minlon=-180&maxlon=180&minversion=100&orderby=time-asc&format=text&limit=10000\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":84,"value":"Inputs.Table(data)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":62,"value":"---\n# Appendice","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":14,"value":"ixmaps = require('https://gjrichter.github.io/ixmaps/ui/js/htmlgui_api.js')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":58,"value":"Data = require('https://gjrichter.github.io/data.js/data.js')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":81,"value":"Inputs = require(\"@observablehq/inputs@0.7.21/dist/inputs.umd.min.js\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 32:"$31:body"