viewof line = vl.markLine()
.width(750)
.height(400)
.data(all)
.encode(
vl.x().fieldQ("day").axis({ title: 'Days since first death in country' }).scale({domain: [0, 120]}),
vl.y().fieldQ("count").axis({ title: 'Deaths' }).scale(scaleObject),
vl.color().fieldN("country")
)
.render()
d3 = require("d3@5")
import {vl} from '@vega/vega-lite-api';
R = require("ramda")
rawData = d3.csvParse(await FileAttachment("20060625nhscoviddeaths@2.csv").text());
x = {
let i = Object.keys(rawData[0]).length;
while (true) {
--i
if (i === -1) {
i = Object.keys(rawData[0]).length - 1;
yield Promises.delay(20000, i);
}
yield Promises.delay(250, i);
}
}
set2 = rawData.find((item) => (item['region'] === 'London'))
set3 = rawData.find((item) => (item['region'] === 'Midlands'))
set4 = rawData.find((item) => (item['region'] === 'North East And Yorkshire'))
set5 = rawData.find((item) => (item['region'] === 'North West'))
set6 = rawData.find((item) => (item['region'] === 'South East'))
set7 = rawData.find((item) => (item['region'] === 'South West'))
set8 = rawData.find((item) => (item['region'] === 'East Of England'))
// Omit data not needed, find the first day that is not 0 (first death) and use as day 0, prepare for graph
transformFunc = (data, country) => R.compose(
R.dropLast(x),
(item) => {
const toSum = [];
const all = [];
item.forEach((current, index) => {
all.push({day: index, count: parseInt(current, 10), country});
});
return all;
},
// R.last,
// R.splitWhen((x) => (x !== "0")),
R.values,
R.omit(['Age group', ''])
)(data)
all = (() => {
return [].concat(transformFunc(set2, 'London'), transformFunc(set3, 'Midlands'), transformFunc(set4, 'North East And Yorkshire'), transformFunc(set5, 'North West'), transformFunc(set6, 'South East'), transformFunc(set7, 'South West'), transformFunc(set8, 'East Of England'))
})();
scales = ['linear', 'log']
comparisonTypes = ['Actual', 'Cases per hundred thousand population']
scaleObject = ({ domain: [1, 300]});
html`<code>css</code> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.0/css/bootstrap.min.css" integrity="sha384-PDle/QlgIONtM1aqA2Qemk5gPOE7wFq8+Em+G/hmo5Iq0CCmYZLv3fVRDJ4MMwEA" crossorigin="anonymous">`
$ = require('jquery').then(jquery => {
window.jquery = jquery;
return require('popper@1.0.1/index.js').catch(() => jquery);
})
bootstrap = require('bootstrap')
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.
