spec = {
let response = await fetch("https://raw.githubusercontent.com/MUSA-620-Spring-2019/week-11/master/measlesAltair.json")
let json = await response.json()
return json
}
embed = require("vega-embed@4")
viewof view = embed(spec)
import {vl} from '@vega/vega-lite-api'
import {printTable} from '@uwdata/data-utilities'
printTable(data.slice(0, 5))
colorscale = ({domain: [0, 100, 200, 300, 1000, 3000], range: ['#F0F8FF', 'cornflowerblue', 'mediumseagreen', '#FFEE00', 'darkorange', 'firebrick'], type: "sqrt"})
heatmap = {
// the vertical line for the vaccine year
let line = vl.markRule({strokeWidth:4})
.data([{'threshold':1963}])
.encode(vl.x().fieldO('threshold'))
// the heat map
let heatmap = vl.markRect({stroke: "white"})
.data(data)
.encode(
vl.x().fieldO('YEAR').axis({ticks: false, title:false}),
vl.y().fieldN('state').axis({ticks: false, title:false}),
vl.color().fieldQ('incidence').scale(colorscale).legend(null),
vl.tooltip(['state', 'YEAR', 'incidence'])
)
.width(650)
.height(450)
// return the layered chart
return vl.layer([heatmap, line]).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.
