Public
Edited
Dec 16, 2023
map = ixmaps.embed(
"mymap",
{
mapCdn: "https://gjrichter.github.io/ixmaps",
mapType: "#013161",
width: "840px",
height: "820px",
legend: "true",
align: "center",
mode: "info"
},
(map) =>
map
.options({
objectscaling: "dynamic",
normalSizeScale: "1000000",
panhidden: "false",
basemapopacity: "0.3",
flushPaintShape: "100000"
})
.local("loading data ...", "⭳")
.local("...", "")
.view([42.062758505472385, 12.532734929102702], 6.1)
.legend(legend)
.attribution(attribution)
.require("../../ui/js/tools/tooltip_basic.js")
.layer(georef)
.layer(choropleth)
.layer(text)
.layer(curves)
)
georef = ixmaps
.layer("Province_2019")
.data({
url: "https://s3.eu-central-1.amazonaws.com/maps.ixmaps.com/Istat/province_2019/Province_s.geojson.gz",
type: "geojson"
})
.type("FEATURES|NOLEGEND")
.binding({
id: "COD_PROV"
})
.style({
colorscheme: ["#ffffff"],
linecolor: ["#ffffff"],
linewidth: "0.3"
})
.define()
choropleth = ixmaps
.theme("Province_2019")
.data({
query: PCM_DPC_COVID_LAST_INCID_100000_CUMUL_7.toString(),
type: "ext"
})
.type("CHOROPLETH|COMPACTLEGEND")
.binding({
value: "incidenza",
position: "codice_provincia",
tonumber: true
})
.style({
colorscheme: ["15", "green", "red", "3colors", "white"],
opacity: 1,
dopacitypow: 1,
dopacityscale: 3,
units: "/ 100.000",
titlefield: "denominazione_provincia"
})
.meta({
title: "7 Tage Incidenz (100.000)"
})
.define()
text = ixmaps
.theme("Province_2019")
.data({
query: PCM_DPC_COVID_LAST_INCID_100000_CUMUL_7.toString(),
type: "ext"
})
.type(
"CHART|LABEL|SIZELOG|VALUES|TEXTONLY|AGGREGATE|RELOCATE|MAX|COMPACTLEGEND"
)
.binding({
value: "incidenza",
position: "codice_provincia",
tonumber: true
})
.style({
colorscheme: ["RGBA(255,255,255,0.5)"],
scale: 2,
offsety: -15,
textcolor: "#660000",
titlefield: "denominazione_provincia",
gridwidth: "25px"
})
.meta({
title: "7 Tage Incidenz (100.000)"
})
.define()
curves = ixmaps
.theme("Province_2019")
.data({
query: PCM_DPC_COVID_SEQUENCE_INCIDENZA_100000_CUMUL_7_LAST_7.toString(),
type: "ext"
})
.type(
"CHART|SYMBOL|SEQUENCE|PLOT|FIXSIZE|LINES|AREA|LASTARROW|NOCLIP|AGGREGATE|RELOCATE|MAX|GRID|BOX|BOTTOMTITLE|COMPACTLEGEND"
)
.binding({
position: "codice_provincia",
tonumber: true
})
.filter('WHERE "denominazione_provincia" NOT "aggio"')
.style({
colorscheme: ["#660000"],
symbols: ["circle"],
fillopacity: 0.1,
linewidth: 5,
markersize: 2,
scale: 0.3,
normalsizevalue: 3,
align: "23right|bottom",
textcolor: "#660000",
textscale: 8,
boxcolor: "none",
bordercolor: "none",
titlefield: "denominazione_provincia",
gridwidth: "25px",
chartupper: "1:50000000",
boxupper: "1:2000000"
})
.meta({
title:
"Incidenza cumultiva di 7 giorni (per 100.000 abitanti), tendenza per l'ultima settimana"
})
.define()
PCM_DPC_COVID_LAST_INCID_100000_CUMUL_7 = function (theme, options) {
/**
function to make pivot table with columns per day
**/
var __process = function (data, options) {
data.column("data").map(function (value) {
return value.split(" ")[0];
});
data = data.select(
'WHERE "denominazione_provincia" NOT "In fase" AND "denominazione_provincia" NOT "Fuori"'
);
var pivot = data.pivot({
lead: "codice_provincia",
columns: "data",
value: "totale_casi",
keep: ["lat", "long", "denominazione_provincia", "denominazione_regione"]
});
return pivot;
};
/** define data sources **/
var szUrl1 =
"https://raw.githubusercontent.com/pcm-dpc/COVID-19/master/dati-province/dpc-covid19-ita-province.csv";
var szUrl2 =
"https://s3.eu-west-1.amazonaws.com/data.ixmaps.com/ISTAT/DCIS_POPRES_Province_2019.csv";
/** get and process data **/
var broker = new Data.Broker()
.addSource(szUrl1, "csv")
.addSource(szUrl2, "csv")
.realize(function (dataA) {
var mydata = dataA[0];
var dataPop = dataA[1];
/** make pivot: one row x province, data = column 4 **/
var pivot = __process(mydata, options);
/** remove last pivot column (Total) **/
pivot.column("Total").remove();
/** make lookupArray: COD_PROV ==> population **/
var popA = dataPop.lookupArray("Value", "COD_PROV");
/** make incidenza **/
var lastColumn = pivot.columnNames().length - 1;
pivot.addColumn(
{
destination: "incidenza"
},
function (row) {
var last = Number(row[lastColumn]);
var before = Number(row[lastColumn - 7]);
return (
(Number(last - before) / popA[Number(row[0])]) *
100000
).toFixed(2);
}
);
/** -----------------------------------------------------------------------------------------------
deploy the data
------------------------------------------------------------------------------------------- **/
ixmaps.setExternalData(pivot, {
type: "dbtable",
name: options.name
});
theme.szTitle = pivot.columnNames()[lastColumn];
});
}
PCM_DPC_COVID_SEQUENCE_INCIDENZA_100000_CUMUL_7_LAST_7 = function (
theme,
options
) {
/** function to make pivot table with columns per day **/
var __process = function (data, options) {
data.column("data").map(function (value) {
return value.split(" ")[0];
});
data = data.select(
'WHERE "denominazione_provincia" NOT "In fase" AND "denominazione_provincia" NOT "Fuori"'
);
var pivot = data.pivot({
lead: "codice_provincia",
columns: "data",
value: "totale_casi",
keep: ["lat", "long", "denominazione_provincia", "denominazione_regione"]
});
return pivot;
};
var szUrl1 =
"https://raw.githubusercontent.com/pcm-dpc/COVID-19/master/dati-province/dpc-covid19-ita-province.csv";
var szUrl2 =
"https://s3.eu-west-1.amazonaws.com/data.ixmaps.com/ISTAT/DCIS_POPRES_Province_2019.csv";
var broker = new Data.Broker()
.addSource(szUrl1, "csv")
.addSource(szUrl2, "csv")
.realize(function (dataA) {
var mydata = dataA[0];
var dataPop = dataA[1];
/** make pivot: one row x province, data = column 4 ---> **/
var pivot = __process(mydata, options);
/** remove last pivot column (Total) **/
pivot.column("Total").remove();
var columns = pivot.columnNames();
for (var i = 4; i < columns.length; i++) {
var date = new Date(columns[i]).toLocaleDateString();
pivot.column(columns[i]).rename(date);
}
/** make lookupArray: COD_PROV ==> population **/
var popA = dataPop.lookupArray("Value", "COD_PROV");
/** make incidenze **/
var lastColumn = pivot.columnNames().length - 1;
var records = pivot.records;
for (var r = 0; r < records.length; r++) {
for (var c = lastColumn; c >= 7; c--) {
var last = Number(records[r][c]);
var before = Number(records[r][c - 7]);
records[r][c] = (
((last - before) / popA[Number(records[r][0])]) *
100000
).toFixed(2);
}
}
/** get the columns with date **/
var columns = pivot.columnNames();
var last = columns.length - 1;
/** and configure the theme **/
theme.szFields = columns.slice(-7).join("|");
theme.szFieldsA = columns.slice(-7);
/** and set the label **/
theme.szLabelA = columns.slice(-7);
theme.szSnippet = "dal " + columns[last - 7] + " al " + columns[last - 1];
/** -----------------------------------------------------------------------------------------------
deploy the data
------------------------------------------------------------------------------------------- **/
ixmaps.setTitle(
"<span style='color:#aaaaaa;font-family:Arial;font-size:0.6em'>aggiornato al: " +
pivot.columnNames()[lastColumn] +
"</span>"
);
ixmaps.setExternalData(pivot, {
type: "dbtable",
name: options.name
});
});
}
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.
