Public
Edited
Jul 6, 2023
Importers
facetDomain = facetWrapDomain(industries, "industry")
facets = makeFacetWrap(facetDomain, 3)
Plot.plot({
height: 400,
marginTop: 15, // create room for top set of labels
axis: null,
fx: { padding: 0.03 },
fy: { padding: 0.21 }, // ratio to height, so may have to twiddle
marks: [
Plot.areaY(
industries,
Plot.normalizeY("extent", {
x: "date",
y: "unemployed",
fx: (d) => facets.fx(d.industry),
fy: (d) => facets.fy(d.industry)
})
),
// facet titles
Plot.text(facetDomain, {
...facets,
frameAnchor: "top-left",
dx: 0,
dy: -11
}),
Plot.frame()
]
})
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)
})
),
Plot.text(keys, { fx, fy, frameAnchor: "top-left", dx: 6, dy: 6 }),
Plot.frame()
]
};
})()
)
// Object[], String -> String[]
facetWrapDomain = function (data, name) {
return Array.from(d3.union(data.map((d) => d[name])));
}
// String[], Number -> {fx: (String -> Number), fy: (String -> Number)}
makeFacetWrap = function (domain, nCol) {
const index = new Map(domain.map((key, i) => [key, i]));
const fx = (key) => index.get(key) % nCol;
const fy = (key) => Math.floor(index.get(key) / nCol);
return { fx, fy };
}
import { changeTable } from "@ijlyttle/change-log"
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.
