embed = require("vega-embed@6")
import {vl} from '@vega/vega-lite-api'
import {select} from '@jashkenas/inputs'
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(data)
.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')
)
lineChart = vl.markLine({color: "red"})
.data(data)
.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')
)
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.
