Plot.plot({
height: 420,
axis: null,
width,
color: {
type: "diverging-log", // diverging-log scales pivot at 1 by default
scheme: "piyg"
},
marks: [
Plot.cell(states, { x: "x", y: "y", fill: (d) => d.change }),
Plot.text(states, { x: "x", y: "y", text: "key", dy: -14 }), // state abbr
Plot.text(states, {
x: "x",
y: "y",
text: "product_name",
dy: 0,
fontSize: 9
}), // state abbr
Plot.text(states, {
x: "x",
y: "y",
text: formatChange,
dy: 12,
fillOpacity: 0.6
})
]
})
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 = state_drug_change
.filter((d) => grid.has(d.state_name))
.map((d) => ({ ...d, ...grid.get(d.state_name) }))
formatChange = (
(f) => (d) =>
f(d.change - 1)
)(d3.format("+.0%"))
state_drug_change_22_to_23.csv
Type Table, then Shift-Enter. Ctrl-space for more options.
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.
