Plot.plot({
width: 928,
height: 500,
x: { label: null },
y: { tickFormat: "s", tickSpacing: 50, label: null },
color: { scheme: "Spectral" },
marks: [
Plot.barY(tidy, { // stackY is implicit here
x: "state",
y: "population",
fill: "age",
sort: {color: null, x: "-y"},
tip: true,
title: (d) => `${d["population"]} people ${d["age"]} years old in ${d["state"]}`
})
]
})
Plot.plot({
width: 928,
height: 500,
x: { label: null },
y: { tickFormat: "s", tickSpacing: 50, label: null },
color: { scheme: "Spectral" },
marks: [
Plot.barY( // stackY is explicit here, but equivalent the implicit version
tidy,
Plot.stackY({
x: "state",
y: "population",
fill: "age",
sort: {color: null, x: "-y"},
tip: true,
title: (d) => `${d["population"]} people ${d["age"]} years old in ${d["state"]}`
})
)
]
})
Plot.plot({
width: 928,
height: 500,
x: { label: null },
y: { tickFormat: "s", tickSpacing: 50, label: null },
color: { scheme: "Spectral" },
marks: [
Plot.barY(tidy, { // stackY is implicit here
x: "state",
y: "population",
fill: "age",
sort: {color: null, x: "-y"},
tip: true,
title: (d) => `${d["population"]} people ${d["age"]} years old in ${d["state"]} with a very long string`
}),
Plot.text( // This is Fil's recommendation
tidy,
Plot.pointerX(
renameXYPxPy(
Plot.stackY({
x: "state",
y: "population",
frameAnchor: "top-left",
dy: -20,
text: (d) =>
`${d["population"]} people ${d["age"]} years old in ${d["state"]}`
})
)
)
)
]
})
function renameXYPxPy({x, y, ...options}) {
mutable z = {...options, px: x, py: y}
return {...options, px: x, py: y, tip: false};
}
mutable z = 42
population = FileAttachment("us-population-state-age.csv").csv({typed: true})
tidy = population.columns.slice(1).flatMap((age) => population.map(d => ({state: d.name, age, population: d[age]})))
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.
