Public
Edited
Jun 29, 2023
14 forks
8 stars
Insert cell
Insert cell
Plot.plot({
label: null,
x: {
axis: "top",
label: "← decrease · Change in population, 2010–2019 (%) · increase →",
labelAnchor: "center",
tickFormat: "+",
percent: true
},
color: {
scheme: "PiYG",
type: "ordinal"
},
marks: [
Plot.barX(statepop, {
x: "value",
y: "State",
fill: (d) => d.value > 0,
sort: { y: "x" }
}),
Plot.gridX({ stroke: "white", strokeOpacity: 0.5 }),
d3
.groups(statepop, (d) => d.value > 0)
.map(([growth, states]) => [
Plot.axisY({
x: 0,
ticks: states.map((d) => d.State),
tickSize: 0,
anchor: growth ? "left" : "right"
}),
Plot.textX(states, {
x: "value",
y: "State",
text: ((f) => (d) => f(d.value))(d3.format("+.1%")),
textAnchor: growth ? "start" : "end",
dx: growth ? 4 : -4,
})
]),
Plot.ruleX([0])
]
})
Insert cell
statepop = FileAttachment("us-state-population-2010-2019.csv").csv({typed: true})
.then(data => data.map((d) => ({...d, value: (d[2019] - d[2010]) / d[2010]})))
Insert cell

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.
Learn more