Plot.plot({
marginLeft: 50,
width: 928,
y: {
grid: true,
label: "↑ Unemployed (thousands)"
},
marks: [
-
Plot.areaY(data, Plot.windowY(
{ k: 5, anchor: "middle", strict: false },
{
x: "date",
y: "unemployed",
fill: "industry",
sort: {color: "-y"}
}
)),
+
Plot.areaY(
data,
Plot.windowY(
{ k: 5, anchor: "middle", strict: false },
{
x: "date",
y: "unemployed",
fill: "industry",
sort: { color: "-y" }
}
)
),
-
Plot.pointerX(Plot.binX({}, { x: "date", thresholds: 1000, insetTop: 20 }))
+
Plot.pointerX(
Plot.binX({}, { x: "date", thresholds: 1000, insetTop: 20 })
)
),
Plot.tip(
data,
Plot.pointerX(
Plot.binX(
+
{ title: (I) => Array.from(I, windowed) },
x: "date",
thresholds: 1000,
render(index, scales, values, dimensions, context) {
const g = d3.select(context.ownerSVGElement).append("g");
const [i] = index;
if (i !== undefined) {
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,
-
y: {domain: scales.scales.color.domain},
+
y: { domain: scales.scales.color.domain },
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: (data) => data.unemployed.toExponential(3),
frameAnchor: "right",
dx: -2
}),
Plot.text([data[0]], {
frameAnchor: "top-left",
dy: -13,
text: "date"
})
]
})
);
}
return g.node();
}
}
)
)
),
Plot.ruleY([0])
]
})