viz = {
const context = DOM.context2d(width,height)
const makePiecewise = (d,i) => {
const scaleDomainMin = d3.scaleLinear().domain([0, nodes1.length]).range([1/3,2/3])
const scaleTime = d3.scaleLinear().domain([scaleDomainMin(i), scaleDomainMin(i)+1/3]).range([0,1]).clamp(true)
return (t) => {
return d3.interpolateNumber(nodes1[i][d], nodes2[i][d])(scaleTime(t))
}
}
const interpArray = d3.range(0, nodes1.length).map(i => ({
'x': makePiecewise('x',i),
'y': makePiecewise('y',i),
'r': makePiecewise('r',i),
}))
// draw nodes
const draw = (t) => {
context.clearRect(0,0,width,width)
context.globalAlpha = 0.3
context.fillStyle = 'steelblue';
context.strokeStyle = 'black';
interpArray.forEach(function(d,i) {
context.beginPath();
context.moveTo(d.x(t) + d.r(t), d.y(t));
context.arc(d.x(t), d.y(t), d.r(t), 0, 2 * Math.PI);
context.fill();
context.stroke();
});
}
const timer = d3.timer(function(elapsed) {
if (elapsed < 3000) {
draw(elapsed/3000)
} else {
timer.stop();
}
})
return context.canvas;
}
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.
