Published
Edited
Jun 25, 2020
import {vl} from '@vega/vega-lite-api'
d3 = require('d3')
import {table} from '@tmcw/tables/2'
function removeState(d) {
delete d.state;
return d
}
toTitleCase = str => str[0].toUpperCase() + str.slice(1)
function getBarChart(yField) {
return vl.markBar()
.data(moStateData)
.transform(
vl.filter('month(datum.date) >= 2'),
vl.window(
vl.first_value(yField).as(`previous_${yField}`)
).frame(-1, 0),
vl.calculate(`datum.${yField} - datum.previous_${yField}`).as(`new_${yField}`)
)
.encode(
vl.y().field(`new_${yField}`).type('quantitative').title(toTitleCase(yField)),
vl.x().field('date').type('temporal').title('Date')
)
}
function getLineChart(yField) {
return vl.markLine({color: "red"})
.data(moStateData)
.transform(
vl.filter('month(datum.date) >= 2'),
vl.window(
vl.first_value(yField).as(`previous_${yField}`)
).frame(-1, 0),
vl.calculate(`datum.${yField} - datum.previous_${yField}`).as(`new_${yField}`),
vl.window(vl.mean(`new_${yField}`).as('rolling_mean')).frame(-6, 0)
)
.encode(
vl.y().field('rolling_mean').type('quantitative').title(toTitleCase(yField)),
vl.x().field('date').type('temporal').title('Date')
)
}
function getLayeredChart(yField) {
const barChart = getBarChart(yField);
const lineChart = getLineChart(yField);
return vl.layer(barChart, lineChart)
.title(`New ${toTitleCase(yField)} in Missouri (actual and 7-day average)`)
.height(400)
.width(600)
}
stateData = d3.csv('https://raw.githubusercontent.com/nytimes/covid-19-data/master/us-states.csv')
moStateData = stateData
.filter(d => d.state == 'Missouri')
.map(d => removeState(d))
table(moStateData)
getLayeredChart('cases').render()
getLayeredChart('deaths').render()
countyData = d3.csv('https://raw.githubusercontent.com/nytimes/covid-19-data/master/us-counties.csv')
moCountyData = countyData
.filter(d => d.state == 'Missouri')
.map(d => removeState(d))
table(moCountyData)
countyNames = d3.map(moCountyData, d => d.county).keys().sort()
topoJSON = vl.topojson(
'https://raw.githubusercontent.com/stlpublicradio/dailygraphics-archive/master/2018/2018-11-06-us-sen-mo-map/mocountieskc.json'
).feature('mocountieskc')
countyData.filter(d => d.date == '2020-06-23')
vl.markGeoshape({stroke: '#aaa', strokeWidth: 0.25})
.data(topoJSON)
.transform(
vl.calculate("replace(datum.properties.NAMELSAD, ' County', '')").as("county_name_t"),
vl.lookup('county_name_t')
.from(
vl.data(countyData.filter(d => d.date == '2020-06-23'))
.key('county')
.fields(['cases', 'deaths'])
)
)
.encode(
vl.tooltip([
{type: 'nominal', field: 'county_name_t', title: 'County'},
{type: 'quantitative', field: 'cases', title: 'Cases'},
{type: 'quantitative', field: 'deaths', title: 'Deaths'},
]),
vl.color()
.fieldQ('cases')
.scale({scheme: "blues"})
.legend({title: "Cases"})
)
.project(vl.projection('albersUsa'))
.width(800)
.height(500)
.config({view: {stroke: null}})
.render()
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.
