Public
Edited
Jul 1, 2023
Paused
7 stars
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
sprites = d3.schemeTableau10.map(fill => createDot(radius, { alpha, dpr, fill, strokeWidth }))
Insert cell
Insert cell
Insert cell
{
const w = 1000, h = 400;
const ctx = DOM.context2d(w, h, dpr);
ctx.fillStyle = "#fff";
ctx.fillRect(0, 0, w, h);
// DOM.context2d() applies a transform that also affects drawImage().
ctx.resetTransform();

const time = timer(30, invalidation); // Refresh UI every 50ms.
for(const [tx, ty, sprite] of data) {
ctx.drawImage(
sprite.image,
sprite.x + tx * w * dpr,
sprite.y + ty * h * dpr
);
if(viewof animate.value && time()) yield ctx.canvas;
}
yield ctx.canvas;
}
Insert cell
createDot = (radius, {fill = null, alpha = 1, dpr = 1, strokeWidth = 1, stroke = "black"} = {}) => {
const center = Math.ceil(radius + strokeWidth / 2 + 1); // add some aliasing buffer.
const ctx = DOM.context2d(center * 2, center * 2, dpr);
ctx.beginPath();
ctx.moveTo(center + radius, center);
ctx.arc(center, center, radius, 0, Math.PI * 2);

ctx.globalAlpha = alpha;

if(fill) {
ctx.fillStyle = fill;
ctx.fill();
}

if(stroke && strokeWidth) {
ctx.strokeStyle = stroke;
ctx.lineWidth = strokeWidth;
ctx.stroke();
}
return {x: -center * dpr, y: -center * dpr, image: ctx.canvas};
}
Insert cell
Insert cell
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