<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"});
mypop_m = mypop
.aggregate("Totale Maschi","codiceProvincia|Provincia")
Inputs.Table(mypop_m.json())
mypop_f = mypop
.aggregate("Totale Femmine","codiceProvincia|Provincia")
Inputs.Table(mypop_f.json())
popA_m = mypop_m.lookupArray({key:"Provincia",value:"Totale Maschi"});
popA_f = mypop_f.lookupArray({key:"Provincia",value:"Totale Femmine"});
mydata = Data.import({"source":data,"type":"json"});
Inputs.Table(mydata.json())
totalColumn = mydata.column("numeroFirme").index;
sessoColumn = mydata.column("sesso").index;
provinciaColumn = mydata.column("denominazioneProvincia").index;
enhanced_data = mydata
.addColumn({destination:"incidenza"},function(row){
if (row[sessoColumn] == "F"){
return ((Number(row[totalColumn]))/popA_f[row[provinciaColumn]]*100000).toFixed(2);
}else{
return ((Number(row[totalColumn]))/popA_m[row[provinciaColumn]]*100000).toFixed(2);
}
})
.addColumn({destination:"pop"},function(row){
if (row[sessoColumn] == "F"){
return (popA_f[row[provinciaColumn]]);
}else{
return (popA_m[row[provinciaColumn]]);
}
})
Inputs.Table(enhanced_data.json())
pivot_f = enhanced_data
.select("WHERE sesso = F")
.pivot({
lead: "codiceProvincia",
columns: "dataFirma",
value: "incidenza",
keep: ["denominazioneProvincia"]
});
Inputs.Table(pivot_f.json())
pivot_m = enhanced_data
.select("WHERE sesso = M")
.pivot({
lead: "codiceProvincia",
columns: "dataFirma",
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"
}
}
}
fields = pivot_m.columnNames().slice(2,21).sort();
fields_merge = function(){
var x = [];
for ( var i in fields ){
x.push(fields[i]+".1");
x.push(fields[i]+".2");
}
return x;
}
curve_fields = fields_merge();
xaxis = fields.slice();
{
for ( var i=0; i < xaxis.length; i++ ){
xaxis[i] = (i%7==0)?String(i):"'";
}
return xaxis;
}
theme_curves = () => {
return {
"layer": "Province_2019",
"field": curve_fields.join("|"),
"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": xaxis,
"units": "",
"scale": "0.4",
"rangescale": "5",
"maxvalue": "auto",
"textcolor": "#444444",
"textscale": "3",
"linewidth": "5",
"boxopacity": "0.05",
"bordercolor": "none",
"titlefield": "denominazioneProvincia.1",
"titleupper": "1:1000000",
"textscale": "0.5",
"valuescale": "1",
"gridwidth": "100px",
"align": "23left",
"valuedecimals": "0",
"title": "Referendum per la Cannabis",
"snippet": "Incidenza per data firma 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(),
]
}
}
test = 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.
