Data Visualization Consultant, and an enthusiastic generalist in building software systems
numDatapoints = 50
dataUpdateInterval = 750
height = 25
{
animate();
const timer = d3.timer(interpolator);
function interpolator(elapsed) {
// compute how far through the animation we are (0 to 1)
const t = Math.min(1, easing(elapsed / transitionDuration));
// update point positions (interpolate between source and target)
data.forEach(point => {
point.x = point.sx - interpolate(t);
});
// redraw
draw();
// if interpolation is over
if (t === 1) {
// stop the timer
timer.stop();
// add more points and animate
addNewDatapoint();
animate();
// restart timer
timer.restart(interpolator);
}
}
}
transitionDuration = Math.min(450, dataUpdateInterval)
// Calculate source and target position for points for interpolation
function animate(){
// store the source position
data.forEach(d => {
d.sx = d.x;
d.sy = d.y;
});
// determine target x position for every point
caterpillar(data);
// store the target position
data.forEach(d => {
d.tx = d.x;
d.ty = d.y;
});
}
function caterpillar() {
data.forEach(function(d, i){
d.x = scale(i);
});
}
d3 = require("d3@5")
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.
