viewof line = vl.markLine()
.width(750)
.height(400)
.data(all)
.encode(
vl.x().fieldQ("index").axis({ title: 'Days since Countries Patient Zero' }),
vl.y().fieldQ("Cases").axis({ title: 'Deaths' }),
vl.color().fieldN("Country")
)
.render()
liveDataUK = (await fetch("https://api.covid19api.com/total/dayone/country/united-kingdom/status/deaths")).json();
liveDataItaly = (await fetch("https://api.covid19api.com/total/dayone/country/italy/status/deaths")).json();
liveDataSpain = (await fetch("https://api.covid19api.com/total/dayone/country/spain/status/deaths")).json();
liveDataChina = (await fetch("https://api.covid19api.com/total/dayone/country/china/status/deaths")).json();
liveDataUsa = (await fetch("https://api.covid19api.com/total/dayone/country/us/status/deaths")).json();
liveDataItalyIndexed = (() => {
let x = 1;
liveDataItaly.map((item) => {item.index = x; x++; return item;})
return liveDataItaly;
})();
liveDataChinaIndexed = (() => {
let x = 1;
liveDataChina.map((item) => {item.index = x; x++; return item;})
return liveDataChina;
})();
liveDataSpainIndexed = (() => {
let x = 1;
liveDataSpain.map((item) => {item.index = x; x++; return item;})
return liveDataSpain;
})();
liveDataUKIndexed = (() => {
let x = 1;
liveDataUK.map((item) => {item.index = x; x++; return item;})
return liveDataUK;
})();
liveDataUsaIndexed = (() => {
let x = 1;
liveDataUsa.map((item) => {item.index = x; x++; return item;})
return liveDataUsa;
})();
all = (liveDataUKIndexed.concat(liveDataSpainIndexed, liveDataUsaIndexed, liveDataItalyIndexed, liveDataChina)).sort((a, b) => new Date(a.Date) - new Date(b.Date))
import {vl} from '@vega/vega-lite-api';
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.
