Plot.plot({
marks: [
Plot.areaY(data, {
x: "date",
y: "unemployed",
fill: "industry"
}),
Plot.tip(
data,
Plot.pointerX(
Plot.binX(
// we could also use groupX, since the dates are the same across series
{
y: () => 0,
title: (v) => v
},
{
x: "date",
y: "unemployed",
thresholds: 100,
render: (index, scales, values, dimensions, context) => {
const g = d3.select(context.ownerSVGElement).append("g");
const [i] = index;
if (i !== undefined) {
console.log(values, dimensions)
const data = values.title[i];
g.attr(
"transform",
`translate(${Math.min(
values.x1[i],
dimensions.width - dimensions.marginRight - 200
)}, 20)`
).append(() =>
Plot.plot({
marginTop: 14,
height: 85,
width: 195,
axis: null,
marks: [
// Plot.frame({ fill: "white", stroke: "currentColor" }),
// Plot.dot(data, {
// y: "industry",
// fill: (d) => scales.color(d.industry), // 👉 ensure color consistency
// r: 5,
// frameAnchor: "left",
// symbol: "square2",
// dx: 7
// }),
Plot.text(data, {
y: "industry",
text: "industry",
frameAnchor: "left",
dx: 14
}),
// Plot.text(data, {
// y: "industry",
// text: "unemployed",
// frameAnchor: "right",
// dx: -2
// }),
// Plot.text([data[0]], {
// frameAnchor: "top-left",
// dy: -13,
// text: "date"
// })
]
})
);
}
return g.node();
}
}
)
)
),
Plot.ruleY([0])
]
})
data = unemployment.filter(d => selection.includes(d.industry))
selection = d3.groupSort(unemployment, d => d3.sum(d,d =>d.unemployed), d => d.industry).slice(-5)
import {unemployment} from "@observablehq/plot-stacked-area-chart"
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.
