Measles Incidence: Altair + Vega Lite
Load the chart's JSON specification:
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 }
Load the vega-embed package:
embed = require("vega-embed@4")
Viola!
viewof view = embed(spec)
How about the same plot in Vega-Lite?
Load some libraries:
import {vl} from '@vega/vega-lite-api'
import {printTable} from '@uwdata/data-utilities'
d3 = require("d3-fetch")
Load the measles incidence data from GitHub (using d3)
data = await d3.json("https://raw.githubusercontent.com/MUSA-620-Spring-2019/week-11/master/data/measlesData.json")
Print out the head of the data table:
printTable(data.slice(0, 5))
Define the custom color scale:
colorscale = ({domain: [0, 100, 200, 300, 1000, 3000], range: ['#F0F8FF', 'cornflowerblue', 'mediumseagreen', '#FFEE00', 'darkorange', 'firebrick'], type: "sqrt"})
Make the plot:
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() }