The end-to-end solution for building and hosting better data apps, dashboards, and reports.
Public
Edited
Oct 26, 2024
4 forks
35 stars
Plot.plot({
marginLeft: 50,
width: 928,
y: {
grid: true,
label: "↑ Unemployed (thousands)"
},
marks: [
Plot.areaY(data, {
x: "date",
y: "unemployed",
fill: "industry",
sort: {color: "-y"}
}),
Plot.ruleX(
data,
Plot.pointerX(Plot.binX({}, { x: "date", thresholds: 100, insetTop: 20 }))
),
Plot.tip(
data,
Plot.pointerX(
Plot.binX(
{title: (v) => v},
{
x: "date",
thresholds: 100,
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},
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.
