Published
Edited
Oct 23, 2021
ixmaps.embed("mymap", {
mapCdn: "https://gjrichter.github.io/ixmaps", // url della piattaforma iXMaps
width: "100%", // dimensioni della mappa sopra
height: "1000px",
scrollsafe: "true", // blocchi zoom on mouse/touch scroll
legend: "true" // visualizza una leggenda
}, map => map
.loadProject({
"$schema": "https://gjrichter.github.io/ixmaps/schema/ixmaps/v1.json",
"map": { // mappa 'prefabbricata' in SVG
"map": "https://s3.eu-central-1.amazonaws.com/maps.ixmaps.com/Istat/comuni_2017/italia_comuni_2017_xs_nome_upper.svgz",
"basemap": "CartoDB - Positron",
"item": "html",
"scaleParam": { // parametri generali per mappa e grafici
"normalSizeScale": "1000000" // scala per la quale i grafici hanno
},
"options": {
"objectscaling": "dynamic", // "dynmic" -> grafici leggermente più grandi nello zoom
"panhidden": "false", // mostra i grfici durante lo spostamento della mappa
"flushChartDraw": "100000", // crea almeno 100000 grafici prima del rendering
"basemapopacity": "0.5" // fa 'svanire' un po' la mappa di base
},
"center": { // focus su Sicilia
"lat": "37.74031329210266",
"lng": "14.0189794921875"
},
"zoom": "9"
},
"themes": [{
"layer": "Com2017_name_upper", // nome del layer nella mappa SVG (vedi: "map": ...)
"field": "Variazione tra le settimane", // dati (nome colonna) usati per le frecce
"field100": "",
"style": {
"type": "CHART|BAR|POINTER|THIN|VALUES|DTEXT|SIMPLELEGEND", // definisce il tipo di grafico sulla mappa
"colorscheme": [ // 6 colori dal verde al rosso
"6",
"green",
"red"],
"rangecentervalue": "0", // dati < 0 -> verde, dati > 0 -> rosso
"fillopacity": "0.5", // riempimento delle frecce (valori positivi)
"shadow": "false",
"dbtable": "themeDataObj", // nome interna della tabella caricata
"dbtableUrl": "https://covid-reports-api.herokuapp.com/incidenza", // data api query
"dbtableType": "json", // che risponde con JSON
"datacache": "true",
"lookupfield": "Comune", // nome della colonna che contiene il luogo -> mappa
"units": "%",
"refreshtimeout": "0",
"scale": "2", // aggiusta: grandeza, altezza, testi
"rangescale": "1.5",
"valuescale": "1",
"valuedecimals": "0",
"linecolor": "#aa0000", // da un bordo alle frecce positive (rosse) priu profondo
"linewidth": "1",
"title": "Variazione Incidenza tra le settimane" // il titolo della leggenda
}
}],
})
);
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
