I love to build dataviz for insight discovery. I also love to put technology to the service of humanity
vl.markLine({tooltip: true, fill: 'white', opacity: 0.9, strokeWidth:2})
.encode(
vl.x().fieldT("week_ending_date").axis({grid:false}),
vl.y().fieldQ(vl.repeat("layer")).scale({range: [step, -overlap * step]}).axis(null).axis(false),
vl.color().datum(vl.repeat("layer")).scale({range:["#777", "steelblue"]}),
vl.detail().fieldN("state"),
)
.width(width*.7)
.height(step) // facet cell height
.repeat({layer: ["average_expected_count", "observed_number"]})
.facet(vl.facet()
.fieldN("state")
.spacing(0)
.header({title: null, labelPadding: 0, labelFontSize: 10,
labelOrient: "left",
labelAlign: "left",
labelAngle: 0,
labelBaseline: "bottom"})
.sort(vl.sum("observed_number").order("descending"))
)
.bounds('flush') // use facet cell height for layout, not the full mark bounds
.padding(0) // no chart padding
.config({view: {stroke: null}}) // no cell borders
.columns(1)
.data(data.filter(d => d.state!=="United States").slice(0,5000))
.config({"view": {"stroke": "transparent"}})
.render()
data = loadSocrata(url)
import {loadSocrata} from "@john-guerra/socrata-load-multiples-pages"
import {vl} from "@vega/vega-lite-api"
import {slider} from "@jashkenas/inputs"
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.
