Published
Edited
Apr 4, 2022
Insert cell
Insert cell
Insert cell
{
const w = 1800,
h = 1800;
const canvas = DOM.canvas(w, h),
context = canvas.getContext('2d');

const data = beforeData.map(d=>{
const _after = afterData.find(j=>j.index === d.index);
return {"id":d.index,"r":d.r,"sx":w/2, "sy":h/2, "tx":_after.x, "ty":_after.y};
});

const ease = d3.easeCubic;

const timer = d3.timer((elapsed) => {
const t = Math.min(1, ease(elapsed / duration));
data.forEach(datum => {
datum.x = datum.sx * (1 - t) + datum.tx * t;
datum.y = datum.sy * (1 - t) + datum.ty * t;
});
context.clearRect(0, 0, w, h);
for (const datum of data) {
drawNode(datum);
}
if (t === 1) { // timer over, stop
timer.stop();
}
});

function drawNode(d){
context.beginPath();
context.fillStyle = "rgba(0, 0, 255, 0.6)";
context.arc(d.x + d.r, d.y + d.r, d.r, 0, 2 * Math.PI);
context.fill();
}

return canvas;
}
Insert cell
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