Published
Edited
Nov 3, 2021
2 forks
<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>
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")
Inputs.Table(rawdata)
confirmed_7 = __every_7(__mean_7(Data.import({"source":rawdata,"type":"json"})))
Inputs.Table(confirmed_7.json())
last_56 = confirmed_7.columnNames();
fields_56 = last_56.slice(-21).join("|");
label_56 = last_56.slice(-20);
xaxis_56 = last_56.slice(-20);
{
for ( var i=1; i < xaxis_56.length-1; i++ ){
xaxis_56[i] = (xaxis_56.length-i)%14?" ":new Date(xaxis_56[i]).toLocaleDateString();
}
xaxis_56[0] = new Date(xaxis_56[0]).toLocaleDateString();
xaxis_56[xaxis_56.length-1] = new Date(xaxis_56[xaxis_56.length-1]).toLocaleDateString();
return xaxis_56;
}
actual_date = xaxis_56[xaxis_56.length-1];
fatalities_7 = __every_7(__mean_7(Data.import({"source":rawdata_f,"type":"json"})))
last_56_f = fatalities_7.columnNames();
fields_56_f = last_56_f.slice(-21).join("|");
label_56_f = last_56_f.slice(-20);
xaxis_56_f = last_56_f.slice(-20);
theme = () => {
return {
"layer": "World Mercator",
"field": fields_56,
"field100": "",
"style": {
"type": "CHART|SYMBOL|SEQUENCE|PLOT|LINES|AREA|LOLLIPOP|BOX|GRID|COLOR|DIFFERENCE|SUM|FIXSIZE|NOLEGEND",
"colorscheme": [
"55",
"rgba(200,150,150,1)",
"rgba(200, 0, 90,1)"],
"fillopacity": "0.3",
"shadow": "false",
"dbtable": "CONFIRMED",
"datacache": "false",
"lookupfield": "Lat|Long",
"symbols": [
"circle"],
"units": "",
"label": label_56,
"xaxis": xaxis_56,
"normalsizevalue": "2",
"scale": "0.2",
"rangescale": "1",
"minvalue": "0",
"maxvalue": "auto",
"align": "23right",
"linewidth": "15",
"bordercolor": "none",
"boxopacity": "0.01",
"titlefield": "Country/Region",
"valuescale": "1",
"valuedecimals": "0",
"name": "new_cases_curves_1",
"title": "COVID-19 - new cases/day <br> last 56 days",
"snippet": "fonte: <a href='https://github.com/CSSEGISandData/COVID-19' target='_blank'>JHU CCSE</a>"
}
}
}
theme_f = () => {
return {
"layer": "World Mercator",
"field": fields_56_f,
"field100": "",
"style": {
"type": "CHART|SYMBOL|SEQUENCE|PLOT|LINES|LOLLIPOP|BOX|GRID|RIGHT|TITLE|COLOR|DIFFERENCE|SUM|FIXSIZE|NOLEGEND",
"colorscheme": [
"55",
"rgba(150,150,150,1)",
"rgba(50, 50, 50,1)"],
"fillopacity": "0.3",
"shadow": "false",
"dbtable": "FATALITIES",
"datacache": "false",
"lookupfield": "Lat|Long",
"symbols": [
"circle"],
"units": "",
"label": label_56_f,
"xaxis": xaxis_56_f,
"normalsizevalue": "2",
"scale": "0.2",
"rangescale": "1",
"minvalue": "0",
"maxvalue": "auto",
"align": "23right",
"linewidth": "5",
"bordercolor": "none",
"boxopacity": "0",
"titlefield": "Country/Region",
"titleupper": "1:10000000",
"textcolor": "rgba(200, 0, 90,1)",
"name": "new_cases_curves_2",
"title": "COVID-19 - new cases/day <br> last 56 days",
"snippet": "fonte: <a href='https://github.com/CSSEGISandData/COVID-19' target='_blank'>JHU CCSE</a>"
}
}
}
project = () => {
return {
"$schema": "https://gjrichter.github.io/ixmaps/schema/ixmaps/v1.json",
"map": {
"map": "../../maps/svg/maps/generic/mercator.svg",
"attribution": "iXMaps",
"basemap": "ArcGIS - Light Gray Base",
"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>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 update: "+actual_date+"</h4>",
"item": "",
"scaleParam": {
"objectScaling": "1.7",
"normalSizeScale": "55000000",
"dynamicScalePow": "2"
},
"options": {
"featurescaling": "dynamic",
"objectscaling": "dynamic",
"flushChartDraw": "50000",
"mapopacity": "1",
"basemapopacity": "1"
},
"center": {
"lat": "50.064191736659104",
"lng": "12.94189453125"
},
"zoom": "5"
},
"themes": [
theme(),
theme_f()
],
}
}
{
ixmaps.waitForMap('map1',map => {
map.setData(confirmed_7,{type:"jsonDB",name:"CONFIRMED"});
map.setData(fatalities_7,{type:"jsonDB",name:"FATALITIES"});
map.loadProject(project());
})
return project();
}
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')
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.
