The end-to-end solution for building and hosting better data apps, dashboards, and reports.
Public
Edited
Aug 24, 2023
10 forks
22 stars
{
const stack = (options) => Plot.stackY({}, { x: "type", y: "value", z: "age", ...options });
return Plot.plot({
x: {
domain: columns,
axis: "top",
label: null,
tickFormat: (d) => `Share of ${d}`,
tickSize: 0,
padding: 0 // see margins
},
y: {
axis: null,
reverse: true
},
color: {
scheme: "prgn",
reverse: true
},
marginLeft: 50,
marginRight: 60,
marks: [
Plot.areaY(
data,
stack({
curve: "bump-x",
fill: "age",
stroke: "white"
})
),
Plot.text(
data,
stack({
filter: (d) => d.type === "population",
text: (d) => `${d.value}%`,
textAnchor: "end",
dx: -6
})
),
Plot.text(
data,
stack({
filter: (d) => d.type === "wealth",
text: (d) => `${d.value}%`,
textAnchor: "start",
dx: +6
})
),
Plot.text(
data,
stack({
filter: (d) => d.type === "population",
text: "age",
textAnchor: "start",
fill: "white",
fontWeight: "bold",
dx: +8
})
)
]
});
}
wide = d3.csvParse(raw, d3.autoType)
columns = wide.columns.slice(1);
data = columns.flatMap((type) => wide.map((d) => ({ age: d.age, type, value: d[type] })))
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.
