map = ixmaps.embed(
"map2",
{
mapCdn: "https://gjrichter.github.io/ixmaps",
maptype: "white",
width: "90%",
height: "800px",
scrollsafesilent: "true",
legend: 1,
align: "center",
mode: "info",
name: "map2"
},
(map) =>
map
.view([41.82824901518532, 15.040283203125002], 6)
.attribution(attribution)
.require("../../ui/js/tools/tooltip_basic.js")
.options({
scrollSafeSilent: "true",
objectscaling: "dynamic",
normalsizescale: "10000000",
panhidden: "false"
})
.layer(georef)
.layer(bubblechart)
)
georef =
ixmaps.layer("ITALIA_Comuni_2022")
.data({
url: "https://s3.eu-central-1.amazonaws.com/maps.ixmaps.com/Istat/comuni_2022/Com01012022_s_WGS84.topojson.gz",
type: "topojson"
})
.binding({
id: "PRO_COM_T",
position: "geometry"
})
.type("FEATURES|NOLEGEND")
.style({
colorscheme: ["none"],
linecolor: "none",
linewidth: "0.1",
sizefield: "Shape_Area"
})
.define()
bubblechart =
ixmaps.layer("ITALIA_Comuni_2022")
.data({
query: query.toString(),
type: "ext"
})
.filter("WHERE \"descrizione_carica\" = \"Vicesindaco\"")
.binding({
value: "sesso",
position: "CODICE_ISTAT"
}) .type("CHART|SYMBOL|SEQUENCE|SIZE|ZEROISVALUE|NEGATIVEISVALUE|AGGREGATE|RELOCATE|CATEGORICAL|VALUES|INLINETEXT|COUNT|COMPACTLEGEND")
.style({
colorscheme: [
"#0088dd",
"#F05757"
],
fillopacity: "0.7",
dopacitypow: "2",
dopacityscale: "3",
linecolor: ["white"],
symbols: ["circle"],
values: ["M", "F"],
label: ["maschi", "femmine"],
scale: "2",
linewidth: "1.5",
valuedecimals: "0",
sizefield: "popolazione_censita",
valuefield: "nome",
titlefield: "denominazione_comune",
showdata: "true",
datafields: ["nome", "cognome", "data_nascita"]
})
.meta({
title: "Vicesindaci in carica al 5 ottobre 2022"
})
.define()
query = function (data, options) {
Data.feed({
source:
"https://raw.githubusercontent.com/ondata/sesso-e-potere/main/dati/amministazioni-italiane/processing/ammcom.csv",
type: "csv"
}).load(function (data) {
/** here we add a missing record **/
data.addRow({
comune: "070340250",
denominazione_comune: "GENOVA",
popolazione_censita: "586180",
cognome: "BUCCI",
nome: "MARIO",
sesso: "M",
descrizione_carica: "Sindaco",
CODICE_ISTAT: "010025"
});
(options.type = "jsonDB"), ixmaps.setExternalData(data, options);
});
}
ixmaps = require('https://gjrichter.github.io/ixmaps/ui/js/htmlgui_api.js')
Inputs = require("@observablehq/inputs@0.7.21/dist/inputs.umd.min.js")
Data = require('https://gjrichter.github.io/data.js/data.js')
$ = require('https://code.jquery.com/jquery-3.3.1.min.js')
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.
