stackChart
death = d3.csv(
"https://raw.githubusercontent.com/CSSEGISandData/COVID-19/master/csse_covid_19_data/csse_covid_19_time_series/time_series_covid19_deaths_global.csv"
)
confirmed = 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"
)
recovered = d3.csv(
"https://raw.githubusercontent.com/CSSEGISandData/COVID-19/master/csse_covid_19_data/csse_covid_19_time_series/time_series_covid19_recovered_global.csv"
)
tidy = (data, type) => {
const t = data
.map(d => {
let prev = 0; // previous total, to compute diffs
return (
Object.keys(d)
.filter(parseDateMDY)
// .filter(d => d !== "2/12/20") // bad data day
.map(k => {
const total = +d[k],
cases = total - prev;
prev = total;
return {
type,
country: d["Country/Region"],
province_name: d["Province/State"],
province: `${d["Country/Region"]}:${d["Province/State"]}`,
lat: +d["Lat"],
long: +d["Long"],
date: parseDateMDY(k),
ymd: d3.timeFormat("%Y-%m-%d")(parseDateMDY(k)),
cases,
total
};
})
);
})
.flat()
.filter(d => d.total > 0);
return t;
}
tdeath = tidy(death, "death")
tconfirmed = tidy(confirmed, "confirmed")
trecovered = tidy(recovered, "recovered")
data = [...tdeath, ...tconfirmed, ...trecovered].sort((a, b) =>
d3.ascending(a.date, b.date)
)
provinces = d3.groups(data, d => d.province).map(d => d[0])
import { chart as stackChart } with {
databyday as data,
color,
margin
} from "@d3/stacked-area-chart"
margin = ({ top: 20, right: 30, bottom: 30, left: 90 })
databyday = {
const rollups = d3
.rollups(
data.filter(d => d.type === type),
v => {
const o = {};
provinces.forEach(p => (o[p] = 0));
v.forEach(d => (o[d.province] = d.total));
return o;
},
d => d.ymd
)
.map(d => ({ date: parseDateYMD(d[0]), ...d[1] }));
const last = rollups[rollups.length - 1];
return Object.assign(rollups, {
columns: [...Object.keys(last)].sort((a, b) =>
d3.descending(last[a], last[b])
),
y: `Cumulative ${type} cases of covid-19 infection, by country & province`
});
}
color = d3
.scaleOrdinal()
.domain(provinces)
.range(d3.schemeOranges[9])
d3 = require("d3@5", "d3-array@2")
parseDateYMD = d3.timeParse("%Y-%m-%d")
parseDateMDY = d3.timeParse("%m/%d/%y")
parseDateMDYHMP = d3.timeParse("%m/%d/%y %H:%M")
import { select } from "@jashkenas/inputs"
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.
