Public
Edited
Nov 2, 2023
Insert cell
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: 300,
axis: null,
//y: {insetTop: 10},
//fx: {padding: 0.03},
marks: [
Plot.areaY(industries, Plot.normalizeY("extent", {
x: "date",
y: "unemployed",
fx: (d) => fx(d.industry),
fy: (d) => fy(d.industry),
//title: (d) => `Unemployed: ${d.unemployed}`,
})),
Plot.text(keys, {fx, fy, frameAnchor: "top-left", dx: 6, dy: 6}),
Plot.frame(),
]
};
})())
Insert cell
Plot.lineY(aapl, {x: "Date", y: "Close", tip: true}).plot({y: {grid: true}})
Insert cell

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.
Learn more