Public
Edited
Nov 30, 2023
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: "map"
},
(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: ["rgba(0,0,0,0.8"],
linecolor: "none",
linewidth: "0.1",
sizefield: "Shape_Area"
})
.define()
query = function (data, options) {
Data.feed({
source:
"https://s3.eu-west-1.amazonaws.com/data.ixmaps.com/Amministrazioni/sesso_e%20_potere/ammcom_23_11_01.csv.gz",
type: "csv"
}).load(function (data) {
(options.type = "jsonDB"), ixmaps.setExternalData(data, options);
});
}
bubblechart = ixmaps
.layer("ITALIA_Comuni_2022")
.data({
query: query.toString(),
type: "ext"
})
.filter(
'WHERE "descrizione_carica" = "Sindaco" AND popolazione_censita > 50000'
)
.binding({
value: "sesso",
position: "CODICE_ISTAT",
size: "popolazione_censita"
})
.type(
"CHART|SYMBOL|SEQUENCE|SIZE|CATEGORICAL|VALUES|INLINETEXT|SORT|UP|COUNT|COMPACTLEGEND"
)
.style({
colorscheme: ["#0088dd", "#F05757"],
fillopacity: "0.9",
dopacitypow: "2",
dopacityscale: "3",
symbols: ["circle"],
values: ["M", "F"],
label: ["Sindaci", "Sindache"],
linecolor: "white",
scale: "1.8",
linewidth: "0.3",
valuescale: "0.9",
valuedecimals: "0",
valuefield: "nome",
titlefield: "denominazione_comune",
showdata: "true",
datafields: ["nome", "cognome", "data_nascita", "popolazione_censita"]
})
.meta({
title:
"Sindaci e sindache in carica al 12 novembre 2023 in comuni con più di 50.000 abitanti"
})
.define()
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.
