Unlisted
Edited
Oct 27, 2024
Insert cell
Insert cell
Added in fork
windowed = {
const { channels } = Plot.dotY(
data,
Plot.windowY(
{ k: 5, anchor: "middle", strict: false },
{
x: "date",
y: "unemployed",
fill: "industry",
sort: { color: "-y" }
}
)
).initialize();
return (i) => ({
date: channels.x.value[i],
unemployed: channels.y.value[i],
industry: channels.fill.value[i]
});
}
Insert cell
Changed in fork
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.ruleX( data,
-
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: (v) => v},
+
{ title: (I) => Array.from(I, windowed) },
{
+
title: (_, i) => i,
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),
+
text: "unemployed",
frameAnchor: "right", dx: -2 }), Plot.text([data[0]], { frameAnchor: "top-left", dy: -13, text: "date" }) ] }) ); } return g.node(); } } ) ) ), Plot.ruleY([0]) ] })
Insert cell
data = unemployment.filter(d => selection.includes(d.industry))
Insert cell
selection = d3.groupSort(unemployment, d => d3.sum(d,d =>d.unemployed), d => d.industry).slice(-5)
Insert cell
import {unemployment} from "@observablehq/plot-stacked-area-chart"
Insert cell