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, Object.keys(rawData[0]).length]}),
vl.y().fieldQ("count").axis({ title: comparisonType === 'Actual' ? 'Deaths' : 'Deaths per 100000 of population' }).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("200808deaths.csv").text());
Object.keys(rawData[0]).length
x = {
let i = Object.keys(rawData[0]).length;
while (true) {
if (freeze === true) {
yield Promises.delay(250, 0);
return;
}
--i;
if (i === -1) {
i = Object.keys(rawData[0]).length - 1;
yield Promises.delay(20000, i);
}
yield Promises.delay(250, i);
}
}
// rawData = yieldedData.rawData;
italyData = rawData.find((item) => item['Country/Region'] === 'Italy')
ukData = rawData.find((item) => (item['Country/Region'] === 'United Kingdom' && item['Province/State'] === ''))
spainData = rawData.find((item) => (item['Country/Region'] === 'Spain'))
chinaData = rawData.find((item) => (item['Country/Region'] === 'China' && item['Province/State'] === 'Hubei'))
usData = rawData.find((item) => (item['Country/Region'] === 'US'))
franceData = rawData.find((item) => (item['Country/Region'] === 'France' && item['Province/State'] === ''))
iranData = rawData.find((item) => (item['Country/Region'] === 'Iran' && item['Province/State'] === ''))
swedenData = rawData.find((item) => (item['Country/Region'] === 'Sweden' && item['Province/State'] === ''))
// 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 all = [];
item.forEach((current, index) => {
all.push({day: index, count: comparisonTypeFunc(parseInt(current, 10), country), country});
});
return all;
},
R.last,
R.splitWhen((x) => (x !== "0")),
R.values,
R.omit(['Province/State', 'Country/Region', 'Lat', 'Long'])
)(data)
all = (() => {
return [].concat(transformFunc(italyData, 'Italy'), transformFunc(ukData, 'UK (Mainland Only)'), transformFunc(spainData, 'Spain'), transformFunc(chinaData, 'China (Hubei Only)'), transformFunc(usData, 'USA'), transformFunc(franceData, 'France'), transformFunc(iranData, 'Iran'), transformFunc(swedenData, 'Sweden'));
})();
populations = {
return {
'UK (Mainland Only)': 66440000,
'Italy': 60480000,
'France': 66990000,
'Spain': 46660000,
'Iran': 81160000,
'China (Hubei Only)': 58500000,
'USA': 327200000,
'Sweden': 10230000
}
}
scales = ['linear', 'log']
comparisonTypes = ['Actual', 'Cases per hundred thousand population']
scaleObject = scale === 'log' ? { type: 'log', domain: [1, comparisonType === 'Actual' ? 200000 : 80]} : { domain: [1, comparisonType === 'Actual' ? 200000 : 80]};
comparisonTypeFunc = comparisonType === 'Actual' ? (x) => (x) : (x, country) => ((100000 / populations[country]) * x)
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.
