Published
Edited
Mar 15, 2020
1 star
md`# Covid chart - confirmed cases`
md`Country confirmed ases based on JHU data https://github.com/CSSEGISandData/COVID-19`
countryindex = 100 //change to see other countries
{
const country_data = allcountrydata[100]
const country_data2 = allcountrydata[48]
const country_confirmed_data = country_data.confirmed
const country_confirmed_data2 = country_data2.confirmed
var confirmed = {
type: "scatter",
mode: "lines",
name: country_data.country,
x: unpackarray(country_confirmed_data, 0),
y: unpackarray(country_confirmed_data, 1),
line: {color: '#1700CF'}
}
var confirmed2 = {
type: "scatter",
mode: "lines",
name: country_data2.country,
x: unpackarray(country_confirmed_data2, 0),
y: unpackarray(country_confirmed_data2, 1),
line: {color: '#17BECF'}
}
var data = [confirmed, confirmed2];
var layout = {
title: countrydata.country + " & " + country_data2.country + " confirmed",
width: width,
legend: {
x: 0,
y: 1.0,
bgcolor: 'rgba(255, 255, 255, 0)',
bordercolor: 'rgba(255, 255, 255, 0)'
},
};
const div = DOM.element('div');
Plotly.newPlot(div, data, layout);
return div;
}
md`uses transformation from there https://github.com/covid19-data/covid19-data , 3 days old currently`
d3 = require("d3@^5.9")
datafile = "https://raw.githubusercontent.com/covid19-data/covid19-data/master/output/cntry_stat.json"
allcountrydata = d3.json(datafile)
countrydata = allcountrydata[countryindex]
{
const p = document.createElement("h1");
p.appendChild(document.createTextNode(countrydata.country));
return p;
}
myTable = {
const div = d3.select(html`<div></div<`);
const table = div.append("table");
const header = table.append("tr");
header.selectAll(".headerCell")
.data(["date", "confirmed", "deaths"])
.enter().append("td")
.attr("class", "headerCell")
.text(d => d);
const rows = table.selectAll(".row")
.data(countrydata.confirmed)
.enter().append("tr")
.attr("class", "row")
const cells = rows.selectAll(".cell")
.data(d => Object.values(d))
.enter().append("td")
.attr("class", "cell")
.text(d => d);
return div.node()
}
Plotly = require("https://cdn.plot.ly/plotly-latest.min.js")
async function csv(url) {
return Plotly.d3.csv.parse((await (await fetch(url)).text()));
}
function unpack(rows, key) {
return rows.map(function(row) {
return row[key];
});
}
function unpackarray(rows, i){
return rows.map(function(row){
return row[i]
});
}
countrydata.confirmed
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.
