<iframe id="map1" width="100%" height="760" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://gjrichter.github.io/ixmaps/ui/dispatch.htm?name=map1&ui=embed&basemap=ll&align=right&legend=1&scrollsafe=1&sync=false"></iframe>
data = d3.csv("https://raw.githubusercontent.com/ondata/dati-referendum/main/output/cannabis_prov.csv?token=AAU2D3PHY6PHYYX43ZATSV3BTFAVK")
Inputs.Table(data)
pop = d3.csv("https://raw.githubusercontent.com/ondata/dati-referendum/main/risorse/popolazione_Istat_2021.csv?token=AAU2D3PUYOYZ5PY37SWPI3DBTQQNE")
Inputs.Table(pop)
mypop = Data.import({"source":pop,"type":"json"})
.addColumn({source:"Età",destination:"eta_5"},function(value){
return (Math.floor(value/5)*5);
});
Inputs.Table(mypop.json())
mypop_c_m = mypop
.aggregate("Totale Maschi","Provincia|eta_5")
.addColumn({destination:"Provincia_eta_5"},function(row){
return(row[0]+"_"+row[1]);
})
Inputs.Table(mypop_c_f.json())
mypop_c_f = mypop
.aggregate("Totale Femmine","Provincia|eta_5")
.addColumn({destination:"Provincia_eta_5"},function(row){
return(row[0]+"_"+row[1]);
})
Inputs.Table(mypop_c_m.json())
popA_c_m = mypop_c_m.lookupArray({key:"Provincia_eta_5",value:"Totale Maschi"});
popA_c_f = mypop_c_f.lookupArray({key:"Provincia_eta_5",value:"Totale Femmine"});
mydata = Data.import({"source":data,"type":"json"});
enhanced_data = mydata
.addColumn({source:"annoNascita",destination:"eta_5"},function(value){
var eta = (2021 - value);
return (Math.floor(eta/5)*5);
})
.addColumn({destination:"pop"},function(row){
if (row[6] == "M"){
return (popA_c_m[row[mydata.column("denominazioneProvincia").index]+"_"+row[mydata.column("eta_5").index]]);
}else{
return (popA_c_f[row[mydata.column("denominazioneProvincia").index]+"_"+row[mydata.column("eta_5").index]]);
}
})
.addColumn({destination:"incidenza"},function(row){
return ((Number(row[mydata.column("numeroFirme").index]))/row[mydata.column("pop").index]*100000).toFixed(2);
})
Inputs.Table(enhanced_data.json())
pivot_f = enhanced_data
.select("WHERE sesso = F")
.pivot({
lead: "codiceProvincia",
columns: "eta_5",
value: "incidenza",
keep: ["denominazioneProvincia"]
});
Inputs.Table(pivot_f.json())
pivot_m = enhanced_data
.select("WHERE sesso = M")
.pivot({
lead: "codiceProvincia",
columns: "eta_5",
value: "incidenza",
keep: ["denominazioneProvincia"]
});
Inputs.Table(pivot_m.json())
merger = new Data.Merger();
final_data = merger
.addSource(pivot_f, {
lookup: "codiceProvincia",
columns: pivot_f.columnNames()
})
.addSource(pivot_m, {
lookup: "codiceProvincia",
columns: pivot_m.columnNames()
})
.realize();
Inputs.Table(final_data.json())
theme_georef = () => {
return {
"layer": "Province_2019",
"field": "$item$",
"field100": "",
"style": {
"type": "FEATURES|NOLEGEND|LOCKED",
"colorscheme": [
"#e8e8e8"],
"fillopacity": "1",
"shadow": "false",
"dbtable": "Province_2019",
"dbtableUrl": "https://s3.eu-central-1.amazonaws.com/maps.ixmaps.com/Istat/province_2019/Province_s.geojson.gz",
"dbtableType": "geojson",
"datacache": "true",
"itemfield": "COD_PROV",
"lookupfield": "geometry",
"linecolor": [
"white"],
"linewidth": "0.5",
"title": "Province 2019"
}
}
}
theme_curves = () => {
return {
"layer": "Province_2019",
"field": "20.1|20.2|25.1|25.2|30.1|30.2|35.1|35.2|40.1|40.2|45.1|45.2|50.1|50.2|55.1|55.2|60.1|60.2|65.1|65.2|70.1|70.2|75.1|75.2|80.1|80.2|85.1|85.2|90.1|90.2|95.1|95.2",
"field100": "",
"style": {
"type": "CHART|SYMBOL|SEQUENCE|PLOT|AREA|LINES|GRID|BOX|TITLE|AGGREGATE|RECT|MEAN|SIMPLELEGEND",
"colorscheme": [
"#dd4400",
"#0044dd"],
"gridx": "2",
"fillopacity": "0.1",
"shadow": "false",
"dbtable": "CURVE_DATA",
"lookupfield": "codiceProvincia.1",
"symbols": [
"none"],
"label": [
"femmine",
"maschi"],
"xaxis": [
"20"," ","30"," ","40"," ","50"," ","60"," ","70"," ","80"," ","90"," ","100"],
"units": "",
"scale": "0.4",
"rangescale": "5",
"maxvalue": "auto",
"textcolor": "#444444",
"textscale": "3",
"linewidth": "5",
"boxopacity": "0.05",
"bordercolor": "none",
"titlefield": "denominazioneProvincia.1",
"textscale": "0.5",
"valuescale": "1",
"gridwidth": "100px",
"titleupper": "1:1000000",
"align": "23left",
"valuedecimals": "0",
"title": "Referendum per la Cannabis",
"snippet": "Numero di firma per provincia e sesso aggregato per griglia rettangolare<br>Fonte: <a href='https://github.com/ondata/dati-referendum' target='blank'>Ondata</a>",
"description": "<h4><button class='btn btn-default' onclick='ixmaps.map().changeThemeStyle(null,\"scale:0.9\",\"factor\");'>-</button> grande <button class='btn btn-default btn-active' onclick='ixmaps.map().changeThemeStyle(null,\"scale:1.1\",\"factor\");'>+</button> <button class='btn btn-default' onclick='ixmaps.map().changeThemeStyle(null,\"gridwidthpx:1.5\",\"factor\");'>-</button> curve <button class='btn btn-default btn-active' onclick='ixmaps.map().changeThemeStyle(null,\"gridwidthpx:0.66\",\"factor\");'>+</button></h4>"
}
}
};
project = () => {
return {
"$schema": "https://gjrichter.github.io/ixmaps/schema/ixmaps/v1.json",
"map": {
"map": "",
"basemap": "white",
"item": "html",
"legend": "",
"scaleParam": {
"lineScaling": "0.5",
"normalSizeScale": "5000000"
},
"options": {
"featurescaling": "dynamic",
"objectscaling": "true",
"panhidden":"false",
"flushChartDraw":"100000"
},
"center": {
"lat": "42.282221877329024",
"lng": "12.871337890625002"
},
"zoom": "6"
},
"themes": [
theme_georef(),
theme_curves(),
]
}
}
{
ixmaps.waitForMap('map1',map => {
map.setData(final_data,{type:"jsonDB",name:"CURVE_DATA"})
.loadProject(project())
});
return project();
}
---
Appendice
Inputs = require("@observablehq/inputs@0.7.21/dist/inputs.umd.min.js")
ixmaps = require('https://gjrichter.github.io/ixmaps/ui/js/htmlgui_api.js')
Data = require('https://gjrichter.github.io/data.js/data.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.
