CTO @Datawrapper & proud @nytgraphics alumni
Plot.plot(
(() => {
const n = 3; // number of facet columns
const keys = Array.from(d3.union(industries.map((d) => d.industry)));
const index = new Map(keys.map((key, i) => [key, i]));
const fx = (key) => index.get(key) % n;
const fy = (key) => Math.floor(index.get(key) / n);
return {
height: 600,
axis: null,
y: { insetTop: 10, nice: false, grid: true },
fx: { padding: 0.1 },
fy: { padding: 0.25 },
marks: [
Plot.axisY({ anchor: "right" }),
Plot.lineY(industries, {
x: "date",
y: "unemployed",
fx: (d) => fx(d.industry),
fy: (d) => fy(d.industry)
}),
Plot.text(keys, {
fx,
fy,
frameAnchor: "top-left",
fontWeight: "bold",
fontSize: 13,
dx: 0,
dy: -5
})
]
};
})()
)
industries
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.
