Insert cell
Insert cell
map = ixmaps.embed(
"map2",
{
mapCdn: "https://gjrichter.github.io/ixmaps",
maptype: "white",
width: "90%",
height: "800px",
scrollsafesilent: "true",
legend: 1,
mode: "info",
name: "map"
},
(map) =>
map
.view([41.82824901518532, 15.040283203125002], 6)
.attribution(attribution)
.legend(legend)
.require("../../ui/js/tools/tooltip_basic.js")
.options({
scrollSafeSilent: "true",
objectscaling: "dynamic",
normalsizescale: "10000000",
panhidden: "false"
})
.layer(georef)
.layer(chart__grid)
.layer(chart__places)
)
Insert cell
Insert cell
Insert cell
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: "1",
sizefield: "Shape_Area"
})
.define()
Insert cell
chart__grid =
ixmaps.layer("ITALIA_Comuni_2022")
.data({
url: "https://raw.githubusercontent.com/ondata/sesso-e-potere/main/dati/amministazioni-italiane/processing/ammcom.csv",
type: "csv"
})
.binding({
value: "sesso",
position: "CODICE_ISTAT"
})
.type("CHART|SYMBOL|GRIDSIZE|FAST|CATEGORICAL|COMPOSECOLOR|CENTER|AGGREGATE|RECT|SUM|DOPACITY")
.style({
colorscheme: ["#1F77B4","#F54242","#E6E6E6"],
fillopacity: "0.7",
dopacitypow: "2",
dopacityscale: "3",
linecolor: ["white"],
symbols: ["circle"],
values: ["M","F"],
label: ["maschi","femmine"],
normalsizevalue: "20000000",
scale: "1.05",
linewidth: "3",
gridwidthpx: "12",
valuedecimals: "0",
titlefield: "denominazione_comune"
})
.meta({
title: "Amministratori per sesso",
snippet: "al 05.10.2022"
})
.define()
Insert cell
chart__places =
ixmaps.layer("ITALIA_Comuni_2022")
.data({
url: "https://raw.githubusercontent.com/ondata/sesso-e-potere/main/dati/amministazioni-italiane/processing/ammcom.csv",
type: "csv"
})
.binding({
value: "sesso",
position: "CODICE_ISTAT"
})
.type("CHART|PIE|HALF|DONUT|SIZEP3|CATEGORICAL|AGGREGATE|HEX|COUNT|DOPACITY")
.filter("WHERE \"popolazione_censita\" > 100000")
.style({
colorscheme: ["#1F77B4","#F56282","#E6E6E6"],
fillopacity: "0.9",
dopacitypow: "2",
dopacityscale: "6.75",
linecolor: ["#ffffff"],
symbols: ["square"],
values: ["M","F"],
label: ["maschi","femmine"],
normalsizevalue: "5000000",
scale: "1",
linewidth: "1",
sizefield: "popolazione_censita",
titlefield: "denominazione_comune",
valuedecimals: "0",
})
.meta({
title: "Amministratori per sesso",
snippet: "al 05.10.2022"
})
.define()
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
ixmaps = require('https://gjrichter.github.io/ixmaps/ui/js/htmlgui_api.js')
Insert cell
Inputs = require("@observablehq/inputs@0.7.21/dist/inputs.umd.min.js")
Insert cell
Data = require('https://gjrichter.github.io/data.js/data.js')
Insert cell
$ = require('https://code.jquery.com/jquery-3.3.1.min.js')
Insert cell

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.
Learn more