Plot.plot({
width: 900,
height: 600,
axis: null,
facet: { data: states, x: "x", y: "y" },
color: {
type: "diverging-log", // diverging-log scales pivot at 1 by default
scheme: "piyg"
},
marks: [
Plot.barX(states, {x1: 0, x2: "y", domain: [0, 5]}),
// Plot.cell(states, {x: "x", y: "y", fill: change}),
// Plot.text(states, {x: "x", y: "y", text: "key", dy: -2}), // state abbr
Plot.text(states, {x: "x", y: "y", text: formatChange, dy: 10, fillOpacity: 0.6}),
// Plot.ruleX([300])
]
})
states
grid = FileAttachment("grid.csv").csv({ typed: true })
.then((states) => new Map(states.map((state) => [state.name, state])))
population = FileAttachment("population.csv").csv({typed: true})
states = population
.filter((d) => grid.has(d.State))
.map((d) => ({ ...d, ...grid.get(d.State) }))
change = d => d["2019"] / d["2010"]
formatChange = ((f) => (d) => f(change(d) - 1))(d3.format("+.0%"))
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.
