Published
Edited
Jun 12, 2020
viewof view =embed(vl.layer(barChart,lineChart).title(`New COVID Cases in ${select_state}`).toSpec())
embed = require('vega-embed@6')
d3 = require ('d3')
data = d3.csv('https://raw.githubusercontent.com/nytimes/covid-19-data/master/us-states.csv')
states = d3.map(data, d => d.state).keys().sort()
barChart = vl.markBar()
.data('https://raw.githubusercontent.com/nytimes/covid-19-data/master/us-states.csv')
.transform(
vl.filter('month(datum.date) >= 2'),
vl.filter(
{field:"state", equal: select_state}
),
vl.window(vl.first_value('cases').as('previous_cases')).frame(-1,0),
vl.calculate('datum.cases - datum.previous_cases').as('new_cases')
)
.encode(
vl.y().field('new_cases').type('quantitative').title('Cases'),
vl.x().field('date').type('temporal').title('Date')
)
.height(400)
.width(850)
lineChart = vl.markLine({color: 'red'})
.data('https://raw.githubusercontent.com/nytimes/covid-19-data/master/us-states.csv')
.transform(
vl.filter('month(datum.date) >= 2'),
vl.filter(
{field:"state", equal: select_state}
),
vl.window(vl.first_value('cases').as('previous_cases')).frame(-1,0),
vl.calculate('datum.cases - datum.previous_cases').as('new_cases'),
vl.window(vl.mean('new_cases').as('rolling_mean')).frame(-6,0),
)
.encode(
vl.y().field('rolling_mean').type('quantitative').title('Cases'),
vl.x().field('date').type('temporal').title('Date')
)
.height(400)
.width(850)
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.
