The end-to-end solution for building and hosting better data apps, dashboards, and reports.
vl.markBar()
.data(tidyScotusData)
.transform(
vl.calculate("indexof(['Majority', 'Concurrence', 'Dissent'], datum.Opinion)").as("stackSortOrder")
)
.encode(
vl.x().fieldN("Justice")
.sort(vl.sum("Count").order("descending"))
.axis({ title: null, ticks: false, labelAngle: 0, labelPadding: 5 }),
vl.y().sum("Count").axis({ title: null, grid: false }),
vl.color().fieldN("Opinion").sort(["Majority", "Concurrence", "Dissent"]).scale({ scheme: "set2" }),
vl.order("stackSortOrder")
)
.width(640)
.config({ view: { stroke: null } })
.render()
vl.markBar()
.data(tidyScotusData)
.encode(
vl.column().fieldN("Justice")
.sort(vl.sum("Count")
.order("descending"))
.title(null)
.header({ labelOrient: "bottom", labelPadding: 6 }),
vl.x().fieldN("Opinion")
.sort(["Majority", "Concurrence", "Dissent"])
.axis({ title: null, ticks: false, labels: false }),
vl.y().sum("Count").axis({ title: null, grid: false }),
vl.color().fieldN("Opinion")
.sort(["Majority", "Concurrence", "Dissent"])
.scale({ scheme: "set2" })
)
.width(60)
.config({
view: { stroke: null },
facet: { spacing: 0 },
scale: { bandPaddingInner: 0, bandPaddingOuter: .25 }
})
.render()
vl.markBar()
.data(tidyScotusData)
.encode(
vl.column().fieldN("Justice"),
vl.x().fieldN("Opinion"),
vl.y().sum("Count"),
vl.color().fieldN("Opinion")
)
.render()
d3 = require("d3@5", "d3-array@2")
import { vl } from "@vega/vega-lite-api"
rough = require("roughjs@3.0.0/dist/rough.js").catch(() => window.rough)
jsdiff = require("diff")
caveatFont = html`<link href="https://fonts.googleapis.com/css?family=Caveat" rel="stylesheet">`
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.
