Data visualization software enginner: working to make visualization more accessible, equitable, and impactful.
Unlisted
Edited
Oct 14, 2024
Plot.plot({
marks: [
Plot.barY(tidy, {
offset: function (facets, Y1, Y2, Z) {
for (const series of facets) {
for (const I of series) {
const basis = d3.max(I, (i) => Y2[i]);
for (const i of I)
if (Z[i] === "<10" || Z[i] === "10-19") {
Y1[i] = Y2[i] = NaN;
} else {
Y1[i] /= basis;
Y2[i] /= basis;
}
}
}
},
x: "state",
y: "population",
fill: "age",
sort: { color: null, x: "-y" }
})
]
})
Plot.plot({
marks: [
Plot.barY(transformed, {
x: "state",
y: "percentage",
filter: (d) => d.age !== "<10" && d.age !== "10-19",
fill: "age",
sort: { color: null, x: "-y" }
})
]
})
Plot.plot({
marks: [
Plot.barY(tidy, {
offset: "normalize",
filter: (d) => d.age !== "<10" && d.age !== "10-19",
x: "state",
y: "population",
fill: "age",
sort: { color: null, x: "-y" }
})
]
})
Plot.plot({
marks: [
Plot.barY(tidy, {
filter: (d) => d.age !== "<10" && d.age !== "10-19",
...Plot.stackY({
offset: "normalize",
x: "state",
y: "population",
fill: "age",
sort: { color: null, x: "-y" }
})
})
]
})
import { tidy } from "@observablehq/plot-stacked-bar-chart"
transformed = aq
.from(tidy)
.groupby("state")
.derive({ statePop: (d) => aq.op.sum(d.population) })
.ungroup()
.derive({ percentage: (d) => d.population / d.statePop })
transformed
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.
