vl.data(data)
.transform(
vl.window({ op: 'mean', field: 'daily_deaths', as: 't_deaths' }).frame([-7, 0]),
vl.window({ op: 'mean', field: 'daily_cases', as: 't_cases' }).frame([-7, 0])
)
.encode(
vl.x().fieldT('date').axis({ grid: false, tickCount: 8, title: false })
)
.layer(
vl.markLine({ interpolate: 'step', size: 1, opacity: .2 })
.encode(vl.y().fieldQ('daily_cases')),
vl.markLine({ size: 1, strokeDash: [4, 2] })
.encode(vl.y().fieldQ('t_cases').axis(false)),
vl.markLine({ interpolate: 'step', size: 1, color: 'red', opacity: .2 })
.encode(vl.y().fieldQ('daily_deaths')),
vl.markLine({ color: 'red', size: 1, strokeDash: [4, 2] })
.encode(vl.y().fieldQ('t_deaths').axis(false)),
)
.resolve({ scale: { y: 'independent' } })
.width(width)
.autosize({ type: 'fit-x', contains: 'padding' })
.render()
vl.data(data)
.encode(
vl.x().fieldT('date').axis({ grid: false, tickCount: 8, title: false })
)
.layer(
vl.markLine({ size: 1 })
.encode(vl.y().fieldQ('cases')),
vl.markLine({ size: 1, color: 'red' })
.encode(vl.y().fieldQ('deaths')),
)
.resolve({ scale: { y: 'independent' } })
.width(width)
.autosize({ type: 'fit-x', contains: 'padding' })
.render()
data = d3
.rollups(states, d => d.reduce((sum, d) => ({
cases: sum.cases + d.cases,
deaths: sum.deaths + d.deaths
}), {cases: 0, deaths: 0}), d => +d.date)
.map(([date, {cases, deaths}], i, states) => ({
date: new Date(date),
cases,
daily_cases: cases - (i ? states[i-1][1].cases : 0),
deaths,
daily_deaths: deaths - (i ? states[i-1][1].deaths : 0)
}))
states = d3.csv('https://raw.githubusercontent.com/nytimes/covid-19-data/master/us-states.csv', d3.autoType)
import { vl } from '@vega/vega-lite-api'
d3 = require('d3-array@2', 'd3-dsv@1', 'd3-fetch@1')
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.
