Published
Edited
Oct 10, 2022
1 fork
Insert cell
stateage = {
const data = await FileAttachment("us-population-state-age-smaller.csv").csv({typed: true});
const xAccessor = data.columns[0];
const ages = data.columns.slice(1); // convert wide data to tidy data
return Object.assign(ages.flatMap(age => data.map(d => ({state: d[xAccessor], age, population: d[age]}))), {ages});
}
Insert cell
Plot.plot({
x: {
axis: null,
domain: stateage.ages
},
y: {
grid: true,
tickFormat: "s"
},
color: {
domain: stateage.ages,
scheme: "spectral",
legend: true,
marginTop: 100,
marginRight: 100,
marginBottom: 100,
marginLeft: 100,
},
fx: {
domain: d3.groupSort(stateage, v => d3.sum(v, d => -d.population), d => d.state).slice(0, 6),
label: null,
tickSize: 6
},
style: {
legend: {
marginLeft: 60
},
},
facet: {
data: stateage,
x: "state"
},
marks: [
Plot.barY(stateage, {x: "age", y: "population", fill: "age", title: "age"}),
Plot.ruleY([0])
]
})
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