The end-to-end solution for building and hosting better data apps, dashboards, and reports.
Public
Edited
May 22, 2024
13 stars
Plot.plot({
y: {percent: true},
marks: [
Plot.barY(alphabet, growUp({x: "letter", y: "frequency", sort: "letter", tip: true})),
Plot.ruleY([0])
]
})
function growUp({
delay = 0,
duration = 250,
stagger = duration * 2,
ease = d3.easeCubicInOut,
...options
} = {}) {
return {
...options,
render(index, scales, values, dimensions, context, next) {
const g = next(index, scales, values, dimensions, context);
const R = g.querySelectorAll("rect");
const T = Float64Array.from(R, () => 1);
const Y = Float64Array.from(R, (r) => r.getAttribute("y"));
const H = Float64Array.from(R, (r) => r.getAttribute("height"));
const start = performance.now();
(function tick(now) {
let tt = false;
for (let i = 0, n = R.length; i < n; ++i) {
const t = ease(Math.max(0, Math.min(1, (now - start - (delay + stagger * i / n)) / duration)));
if (t < 1) tt = true;
if (T[i] === t) continue; // don’t touch if unchanged
R[i].setAttribute("y", Y[i] + H[i] * (1 - t));
R[i].setAttribute("height", H[i] * t);
T[i] = t;
}
if (tt) requestAnimationFrame(tick);
})(start);
return g;
}
};
}
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.
