Public
Edited
Nov 30, 2023
map = ixmaps.embed(
"map2",
{
mapCdn: "https://gjrichter.github.io/ixmaps",
maptype: "white",
width: "100%",
height: "1200px",
scrollsafesilent: "true",
legend: 1,
align: "center",
mode: "info",
tools: "true",
name: "map"
},
(map) =>
map
.view([41.43492425620528, 12.182775320349194], 6.5)
.attribution(attribution)
.require("../../ui/js/tools/tooltip_basic.js")
.options({
scrollSafeSilent: "true",
objectscaling: "dynamic",
normalsizescale: "10000000",
panhidden: "false"
})
.layer(georef)
.layer(choropleth)
.layer(chart)
.layer(grid)
.layer(curves)
)
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 (newData) {
var pivot = newData.pivot({
lead: "CODICE_ISTAT",
columns: "sesso",
keep: [
"CODICE_ISTAT",
"codice_regione",
"codice_provincia",
"denominazione_comune",
"popolazione_censita"
]
});
var iTotal = pivot.column("Total").index;
var iF = pivot.column("F").index;
pivot.addColumn({ destination: "quota_femminile" }, function (row) {
return Math.round((row[iF] / row[iTotal]) * 10000) / 100;
});
(options.type = "jsonDB"), ixmaps.setExternalData(pivot, options);
});
}
query_extended_age = function (data, options) {
var broker = new Data.Broker()
.addSource(
"https://s3.eu-west-1.amazonaws.com/data.ixmaps.com/Amministrazioni/sesso_e%20_potere/ammcom_23_11_01.csv.gz",
"csv"
)
.realize(function (dataA) {
ixmaps.showLoadingArrayStop();
ixmaps.hideLoading();
var ammcom = dataA[0];
var pivot = ammcom.pivot({
lead: "denominazione_comune",
columns: "sesso",
keep: [
"CODICE_ISTAT",
"codice_regione",
"codice_provincia",
"popolazione_censita"
]
});
var iTotal = pivot.column("Total").index;
var iF = pivot.column("F").index;
pivot.addColumn(
{
destination: "quota"
},
function (row) {
return (row[iF] / row[iTotal]) * 100;
}
);
var lookup = pivot.lookupArray("quota", "denominazione_comune");
ammcom.addColumn(
{ source: "denominazione_comune", destination: "quota" },
function (value) {
return lookup[value];
}
);
var iProv = ammcom.column("codice_provincia").index;
var iCom = ammcom.column("codice_comune").index;
ammcom.addColumn({ destination: "PROCOM" }, function (row) {
return row[iProv] + ("000" + String(row[iCom])).slice(-3);
});
var iNat = ammcom.column("data_nascita").index;
ammcom.addColumn({ destination: "eta" }, function (row) {
var dA = row[iNat].split("/");
return (
(new Date().getTime() -
new Date(dA[2] + "/" + dA[1] + "/" + dA[0]).getTime()) /
(1000 * 60 * 60 * 24 * 356)
).toFixed(0);
});
ammcom.addColumn(
{ source: "eta", destination: "eta_10" },
function (value) {
return Math.floor(value / 10) * 10;
}
);
ammcom.addColumn(
{ source: "eta", destination: "eta_5" },
function (value) {
return Math.floor(value / 5) * 5;
}
);
ammcom.addColumn(
{ source: "popolazione_censita", destination: "popolazione_log" },
function (value) {
return Math.log10(value);
}
);
var ammcomF = ammcom.select("WHERE sesso = F");
var ammcomM = ammcom.select("WHERE sesso = M");
var pivotF = ammcomF.pivot({
lead: "denominazione_comune",
columns: "eta_10",
keep: [
"CODICE_ISTAT",
"PROCOM",
"codice_regione",
"codice_provincia",
"sigla_provincia",
"popolazione_censita"
]
});
var pivotM = ammcomM.pivot({
lead: "denominazione_comune",
columns: "eta_10",
keep: [
"CODICE_ISTAT",
"PROCOM",
"codice_regione",
"codice_provincia",
"sigla_provincia",
"popolazione_censita"
]
});
var merger1 = new Data.Merger();
var final = merger1
.addSource(pivotM, {
lookup: "denominazione_comune",
columns: pivotM.columnNames()
})
.addSource(pivotF, {
lookup: "denominazione_comune",
columns: pivotF.columnNames()
})
.realize();
var iTotal1 = final.column("Total.1").index;
var iTotal2 = final.column("Total.2").index;
final.addColumn(
{
destination: "Total"
},
function (row) {
return row[iTotal1] + row[iTotal2];
}
);
ixmaps.setExternalData(final, {
type: "dbtable",
name: options.name
});
});
}
choropleth = ixmaps
.layer("ITALIA_Comuni_2022")
.data({
query: query.toString(),
type: "ext"
})
.binding({
value: "quota_femminile",
position: "CODICE_ISTAT"
})
.type("CHOROPLETH|RANGES|DOPACITYMINMAX|COMPACTLEGEND")
.style({
colorscheme: ["#0022bb", "#88aaee", "#eeaa88", "red"],
fillopacity: "1",
shadow: "false",
ranges: ["0", "25", "40", "50", "100"],
units: "%",
scale: "1",
titlefield: "denominazione_comune",
alphafield: "popolazione_censita",
dopacitypow: "4",
dopacityscale: "0.5",
valuescale: "1"
})
.meta({
title: "Quota femminile - Amministrazioni comunali al 1 novembre 2023"
})
.define()
chart = ixmaps
.layer("ITALIA_Comuni_2022")
.data({
query: query.toString(),
type: "ext"
})
.binding({
value: "quota_femminile",
position: "CODICE_ISTAT"
})
.type("CHART|SYMBOL|SIMPLELEGEND")
.style({
colorscheme: ["#0022bb", "#88aaee", "#eeaa88", "red"],
fillopacity: "0.4",
shadow: "false",
ranges: ["0", "25", "40", "50", "100"],
symbols: ["circle"],
units: "%",
normalsizevalue: "2000000",
valuefield: "$title$",
sizefield: "popolazione_censita",
minvalue: "1",
textcolor: "#666666",
textscale: "3",
linewidth: "0.5",
titlefield: "denominazione_comune",
valuescale: "1",
valuedecimals: "0",
showdata: "true",
datafields: ["M", "F"],
chartupper: "1:10000000"
})
.meta({
title: "Quota femminile - Amministrazioni comunali al 1 novembre 2023"
})
.define()
grid = ixmaps
.layer("ITALIA_Comuni_2022")
.data({
query: query.toString(),
type: "ext"
})
.binding({
value: "quota_femminile",
position: "CODICE_ISTAT"
})
.type("RECT|CHART|SYMBOLS|GRIDSIZE|AGGREGATE|MEAN")
.style({
colorscheme: ["none"],
fillopacity: "0.05",
shadow: "false",
symbols: ["square"],
units: "",
scale: "1",
linecolor: "#884444",
linewidth: "0.2",
aggregationscale: [
"1:1",
"250px",
"1:100000",
"150px",
"1:200000",
"100px"
],
gridoffsety: "70",
title: "Quota femminile - griglia rettangolare"
})
.meta({
title: "Quota femminile - Amministrazioni comunali al 1 novembre 2023"
})
.define()
curves = ixmaps
.layer("ITALIA_Comuni_2022")
.data({
query: query_extended_age.toString(),
type: "ext"
})
.binding({
value:
"20.1|20.2|30.1|30.2|40.1|40.2|50.1|50.2|60.1|60.2|70.1|70.2|80.1|80.1|90.1|90.2",
position: "CODICE_ISTAT.1"
})
.type(
"CHART|SYMBOL|SEQUENCE|PLOT|AREA|LINES|GRID|BOX|BOTTOMTITLE|GRIDSIZE|AGGREGATE|RECT|SUM|ZEROISVALUE|UNDEFINEDISVALUE"
)
.style({
colorscheme: ["#0044dd", "#dd4400"],
fillopacity: "0.1",
shadow: "false",
symbols: ["none"],
xaxis: ["20", "30", "40", "50", "60", "70", "80", "90"],
units: "",
units100: "",
refreshtimeout: "0",
scale: "1.25",
rangescale: "2.5",
maxvalue: "auto",
textcolor: "#444444",
textscale: "1",
linewidth: "3",
bordercolor: "none",
boxopacity: "0.05",
titlefield: "denominazione_comune.1",
valuescale: "1",
valuedecimals: "0",
fadenegative: "1",
gridx: "2",
aggregationscale: [
"1:1",
"250px",
"1:100000",
"150px",
"1:200000",
"100px"
],
gridoffsety: "70",
align: "left"
})
.meta({
title: "Amministrazioni locali per sesso ed età"
})
.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.
