The avatar for @gjrichter
gjrichter
Published
Edited
May 18, 2022
Fork of ixmaps - COVID-19 weekly new cases and fatalities - last 20 weeks
Insert cell
Insert cell
map = ixmaps.embed("mymap", {
mapCdn: "https://gjrichter.github.io/ixmaps",
width: "100%",
height: "840px",
legend: 1},
map => map
.view([50.064191736659104,12.94189453125],6)
.options({
objectScaling: "1.7",
normalSizeScale: "55000000",
dynamicScalePow: "2",
panhidden: "false",
featurescaling: "dynamic",
objectscaling: "dynamic",
flushChartDraw: "50000",
mapopacity: "1",
basemapopacity: "1"
})
.legend(legend)
.setData(confirmed_7,{type:"jsonDB",name:"CONFIRMED"})
.setData(fatalities_7,{type:"jsonDB",name:"FATALITIES"})
.layer(theme_f)
.layer(theme)
);
Insert cell
Insert cell
Insert cell
Insert cell
rawdata = d3.csv("https://raw.githubusercontent.com/CSSEGISandData/COVID-19/master/csse_covid_19_data/csse_covid_19_time_series/time_series_covid19_confirmed_global.csv")
Insert cell
Inputs.Table(rawdata)
Insert cell
Insert cell
rawdata_country = Data.import({"source":rawdata,"type":"json"})
Insert cell
Insert cell
rawdata_f_country = Data.import({"source":rawdata_f,"type":"json"})
Insert cell
Insert cell
pop = d3.csv("https://s3.eu-west-1.amazonaws.com/data.ixmaps.com/World/API_SP.POP.TOTL_DS2_en_csv_v2_1926760.csv");
Insert cell
Inputs.Table(pop)
Insert cell
Insert cell
popA = Data.import({"source":pop,"type":"json"}).lookupArray("2019","Country Name");

Insert cell
Insert cell
{
popA["US"] = popA["United States"];
popA["Russia"] = popA["Russian Federation"];
popA["Czechia"] = popA["Czech Republic"];
for (var i in popA){
if (popA[i] < 1000000){
popA[i] = null;
}
}
return popA;
}
Insert cell
Insert cell
Insert cell
confirmed_7 = __every_7(__mean_7(rawdata_country))
Insert cell
Inputs.Table(confirmed_7.json())
Insert cell
Insert cell
Insert cell
Insert cell
{
for (var i = 4; i<columnsA.length; i++){
confirmed_7.column(columnsA[i]).map(function(value,row){
return (Number(value)/Number(popA[row[1]])*100000).toFixed(2);
})
}
return confirmed_7;
}
Insert cell
Insert cell
fields = columnsA.slice(-21).join("|");
Insert cell
label = columnsA.slice(-20);
Insert cell
xaxis = columnsA.slice(-20);
Insert cell
Insert cell
{
for ( var i=1; i < xaxis.length-1; i++ ){
xaxis[i] = (xaxis.length-i)%14?" ":new Date(xaxis[i]).toLocaleDateString();
}
xaxis[0] = new Date(xaxis[0]).toLocaleDateString();
xaxis[xaxis.length-1] = new Date(xaxis[xaxis.length-1]).toLocaleDateString();
return xaxis;
}
Insert cell
Insert cell
actual_date = new Date(xaxis[xaxis.length-1]).toLocaleDateString();
Insert cell
Insert cell
fatalities_7 = __every_7(__mean_7(rawdata_f_country))
Insert cell
columnA_f = fatalities_7.columnNames();
Insert cell
{
for (var i = 4; i<columnA_f.length; i++){
fatalities_7.column(columnA_f[i]).map(function(value,row){
return (Number(value)/Number(popA[row[1]])*100000).toFixed(2);
})
}
return fatalities_7;
}
Insert cell
fields_f = columnA_f.slice(-21).join("|");
Insert cell
label_f = columnA_f.slice(-20);
Insert cell
xaxis_f = columnA_f.slice(-20);
Insert cell
Insert cell
Insert cell
Insert cell
theme =
ixmaps.layer("generic")
.data({
name: "CONFIRMED"
})
.binding({
position: "Lat|Long",
value: fields
})
.style({
type: "CHART|SYMBOL|SEQUENCE|PLOT|LINES|AREA|BOX|GRID|COLOR|DIFFERENCE|SUM|FIXSIZE|NOCLIP|NOLEGEND",
colorscheme: [
"rgba(200,150,150,1)"],
fillopacity: "0.2",
symbols: [
"circle"],
values: [
"0",
"1"],
label: label,
xaxis: xaxis,
normalsizevalue: "2",
scale: "0.08",
rangescale: "1",
minvalue: "0",
maxvalue: "2000",
align: "23right",
linewidth: "10",
bordercolor: "none",
boxopacity: "0.01",
titlefield: "Country/Region",
valuescale: "1",
valuedecimals: "0"
})
.meta({
title: "COVID-19 - cases incidence/week <br> last 20 weeks",
snippet: "fonte: <a href='https://github.com/CSSEGISandData/COVID-19' target='_blank'>JHU CCSE</a>",
splash: "loading and aggregating data ...<br>this may take a bit ...<br>please give me some time ..."
})
.define()
Insert cell
theme_f =
ixmaps.layer("generic")
.data({
name: "FATALITIES"
})
.binding({
position: "Lat|Long",
value: fields_f
})
.style({
type: "CHART|SYMBOL|SEQUENCE|PLOT|LINES|LOLLIPOP|DIFFERENCE|SUM|BOX|BOTTOMTITLE|GRID|RIGHT|RECT|FIXSIZE|NOLEGEND",
colorscheme: [
"rgba(120, 120, 120,0.5)"],
fillopacity: "0.1",
symbols: [
"circle"],
values: [
"0",
"1"],
label: label_f,
xaxis: xaxis_f,
normalsizevalue: "2",
scale: "0.08",
rangescale: "1",
minvalue: "0",
maxvalue: "20",
align: "23right",
linewidth: "10",
bordercolor: "none",
boxopacity: "0.01",
titlefield: "Country/Region",
valuescale: "1",
valuedecimals: "0"
})
.meta({
title: "COVID-19 - fatality incidence/week <br> last 20 weeks",
snippet: "fonte: <a href='https://github.com/CSSEGISandData/COVID-19' target='_blank'>JHU CCSE</a>",
splash: "loading and aggregating data ...<br>this may take a bit ...<br>please give me some time ..."
})
.define()
Insert cell
Insert cell
legend = "<h1>COVID-19 <br> <b style='color:rgba(200, 0, 90,1)'>new cases</b> / <b>fatalities</b> <br> last <b>20</b> weeks</h1><h4>7 days cumulative incidence (cases per 100.000)</h4><h4>The two curves have different scales:<br> cases: 0-1000, fatalities: 0-10 </h4><h4>data: 2019 Novel Coronavirus COVID-19 (2019-nCoV) Data Repository by <a href='https://github.com/CSSEGISandData/COVID-19' target='_blank'>Johns Hopkins CSSE</a><br><br>last updated: "+actual_date+"</h4>"
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
ixmaps = require('https://gjrichter.github.io/ixmaps/ui/js/htmlgui_api.js')
Insert cell
Inputs = require("@observablehq/inputs@0.7.21/dist/inputs.umd.min.js")
Insert cell
Data = require('https://gjrichter.github.io/data.js/data.js')
Insert cell

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.
Learn more