map = ixmaps.embed(
"map2",
{
mapCdn: "https://gjrichter.github.io/ixmaps",
maptype: "CartoDB - Positron",
width: "100%",
height: "900px",
legend: 1,
align: "right",
mode: "pan",
tools: "true",
name: "map"
},
(map) =>
map
.setData(province, {
type: "geojson",
name: "PROVINCE"
})
.setData(amministratori_data, {
type: "jsonDB",
name: "AMMINISTRATORI_DATA"
})
.loadProject(project())
)
amministratori = d3.csv("https://s3.eu-west-1.amazonaws.com/data.ixmaps.com/Amministrazioni/ammcom.csv.gz")
Inputs.Table(amministratori)
amministratori_data = new Data.import({"source":amministratori,"type":"json"});
{
var iNat = amministratori_data.column("data_nascita").index;
amministratori_data.addColumn({ destination: "eta_5" }, function (row) {
var dA = row[iNat].split("/");
var eta = (
(new Date().getTime() -
new Date(dA[2] + "/" + dA[1] + "/" + dA[0]).getTime()) /
(1000 * 60 * 60 * 24 * 356)
).toFixed(0);
return Math.floor(eta / 5) * 5;
});
return amministratori_data;
}
province = d3.json("https://raw.githubusercontent.com/gjrichter/viz/master/Amministratori/province_2019_s.geojson")
georef = () => {
return {
layer: "Province",
field: "$item$",
field100: "",
style: {
type: "FEATURES|NOLEGEND|LOCKED",
colorscheme: ["none"],
fillopacity: "0.7",
dbtable: "PROVINCE",
itemfield: "SIGLA",
lookupfield: "geometry",
linecolor: ["none"],
linewidth: "1",
title: "Regioni"
}
};
}
theme1 = () => {
return {
layer: "Province",
field: "eta_5",
field100: "",
style: {
type: "CHART|SYMBOL|SEQUENCE|PLOT|AREA|LINES|GRID|BOX|SIZE|AGGREGATE|RECT|SUM|CATEGORICAL|COUNT",
colorscheme: ["#0044dd"],
fillopacity: "0.2",
shadow: "false",
filter: 'WHERE "sesso" = "M"',
dbtable: "AMMINISTRATORI_DATA",
lookupfield: "sigla_provincia",
symbols: ["none"],
values: [
"20",
"25",
"30",
"35",
"40",
"45",
"50",
"55",
"60",
"65",
"70",
"75",
"80",
"85",
"90",
"95",
"100"
],
units: "età",
refreshtimeout: "0",
scale: "0.2",
maxvalue: "500",
textcolor: "#444444",
textscale: "3",
linewidth: "5",
boxopacity: "0.05",
bordercolor: "none",
titlefield: "denominazione_comune",
valuescale: "1",
aggregationfield: "sigla_provincia",
align: "23left",
valuedecimals: "0",
title: "Amministratori locali in carica al<br> 9 Settembre 2021",
snippet:
"Fonte: <a href='https://dait.interno.gov.it/elezioni/open-data/amministratori-locali-in-carica' target='blank'>Eligendo</a> Licenza: ???",
description:
"<h4><button class='btn btn-default' onclick='ixmaps.map().changeThemeStyle(null,\"filter:WHERE eta < 40\",\"set\");'>< 40 anni</button> <button class='btn btn-default btn-active' onclick='ixmaps.map().changeThemeStyle(null,\"filter:WHERE eta BETWEEN 40 AND 60\",\"set\");'>40 - 60 anni</button> <button class='btn btn-default btn-active' onclick='ixmaps.map().changeThemeStyle(null,\"filter:WHERE eta > 60\",\"set\");'>> 60 anni</button> <button class='btn btn-default btn-active' onclick='ixmaps.map().changeThemeStyle(null,\"filter\",\"remove\");'>tutto</button></h4>"
}
};
}
theme2 = () => {
return {
layer: "Province",
field: "eta_5",
field100: "",
style: {
type: "CHART|SYMBOL|SEQUENCE|PLOT|AREA|LINES|GRID|BOX|SIZE|AGGREGATE|RECT|SUM|CATEGORICAL|COUNT",
colorscheme: ["#dd4400"],
fillopacity: "0.2",
shadow: "false",
filter: 'WHERE "sesso" = "F"',
dbtable: "AMMINISTRATORI_DATA",
lookupfield: "sigla_provincia",
symbols: ["none"],
values: [
"20",
"25",
"30",
"35",
"40",
"45",
"50",
"55",
"60",
"65",
"70",
"75",
"80",
"85",
"90",
"95",
"100"
],
xaxis: [
"20",
" ",
"30",
" ",
"40",
" ",
"50",
" ",
"60",
" ",
"70",
" ",
"80",
" ",
"90",
" ",
"100"
],
units: "età",
refreshtimeout: "0",
scale: "0.2",
maxvalue: "500",
textcolor: "#444444",
textscale: "3",
linewidth: "5",
boxopacity: "0.05",
bordercolor: "none",
titlefield: "denominazione_comune",
valuescale: "1",
aggregationfield: "sigla_provincia",
align: "23left",
valuedecimals: "0",
title: "Amministratori locali in carica al<br> 9 Settembre 2021",
snippet:
"Fonte: <a href='https://dait.interno.gov.it/elezioni/open-data/amministratori-locali-in-carica' target='blank'>Eligendo</a> Licenza: ???",
description:
"<h4><button class='btn btn-default' onclick='ixmaps.map().changeThemeStyle(null,\"filter:WHERE eta < 40\",\"set\");'>< 40 anni</button> <button class='btn btn-default btn-active' onclick='ixmaps.map().changeThemeStyle(null,\"filter:WHERE eta BETWEEN 40 AND 60\",\"set\");'>40 - 60 anni</button> <button class='btn btn-default btn-active' onclick='ixmaps.map().changeThemeStyle(null,\"filter:WHERE eta > 60\",\"set\");'>> 60 anni</button> <button class='btn btn-default btn-active' onclick='ixmaps.map().changeThemeStyle(null,\"filter\",\"remove\");'>tutto</button></h4>"
}
};
}
project = () => {
return {
$schema: "https://gjrichter.github.io/ixmaps/schema/ixmaps/v1.json",
map: {
map: "",
basemap: "CartoDB - Positron",
item: "html",
legend:
"<h1>Amministratori locali in carica al<br> 9 Settembre 2021</h1><h2>Amministratori aggregati per Provincia, sesso e fascia età</h2><h4>Ogni fascia d'età conprende 5 anni partendo dalla fascia 20-25 anni</h4><h4>fonte: <a href='https://dait.interno.gov.it/elezioni/open-data/amministratori-locali-in-carica' target='blank'>Eligendo</a> licenza: <a href='https://www.dati.gov.it/content/italian-open-data-license-v20' target='blank'>IODL v2.0</h4>",
scaleParam: {
lineScaling: "0.5",
normalSizeScale: "5000000"
},
options: {
featurescaling: "dynamic",
objectscaling: "dynamic",
panhidden: "false",
flushChartDraw: "100000"
},
center: {
lat: "42.282221877329024",
lng: "12.871337890625002"
},
zoom: "6"
},
themes: [georef(), theme1(), theme2()]
};
}
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.
