The end-to-end solution for building and hosting better data apps, dashboards, and reports.
Public
Edited
Oct 3, 2024
2 stars
// This code is generic wrt facets, etc.
function staggered({ render, ...options } = {}) {
let facets;
let G = new Map();
return Plot.transform(
{
...options,
render: (index, scales, values, dimensions, context, next) => {
const fi = index.fi ?? 0; // facet index
// First run
if (!G.has(fi)) {
const g = (render ?? next)(
facets[fi], // draw everything in the facet (even with the pointer transform)
scales,
values,
dimensions,
context,
render ? next : undefined
);
G.set(fi, g);
// Add stylesheet
if (fi === 0) {
const style = context.document.createElement("style");
style.textContent =
".pointed {font-size: 10px; font-weight: 700; fill: currentColor}";
g.append(style);
}
// stagger texts
for (const node of g.childNodes) {
const i = node.__data__;
node.setAttribute("y", 9 * (i % 10)); // move each letter
}
}
const g = G.get(fi);
// On pointer events, add the .hover class to the pointed element(s)
const test = new Set(index); // faster lookups
for (const node of g.childNodes) {
const i = node.__data__;
if (test.has(i)) node.classList.add("pointed");
else node.classList.remove("pointed");
}
return g;
}
},
(data, _facets) => ({ data, facets: (facets = _facets) })
);
}
data = FileAttachment("antigen.csv").csv({typed: true})
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.
