66000 points animation

A version of the previous block, but improved to speed the drawing and to make fast transitions.

<!DOCTYPE html>
<meta charset="utf-8">
<style>
</style>
<body>
<script src="https://d3js.org/d3.v4.min.js"></script>

var canvas = d3.select("body")
        .append("canvas")
        .attr('height', height)
        .attr('width', width);

var context = canvas.node().getContext("2d");

var points = [];

for(var i=j; i<totalVictimes; i++){
        points.push('Altres');
    }

function orderedLayout(points){
    let stackHeight = 220;
    points.forEach((point) => {
        point.x = 3*Math.floor(point.order/stackHeight);
        point.y = 3*(point.order%stackHeight);;
    });
    return points;
}

function randomLayout(points){
    let stackHeight = 220;
    shuffle(points)
    points.forEach((point, i) => {
        point.x = 3*Math.floor(i/stackHeight);
        point.y = 3*(i%stackHeight);;
    });
    return points;
}

const layouts = [randomLayout, orderedLayout];

function draw() {
  context.clearRect(0,0,canvas.attr("width"),canvas.attr("height"));

for (let i = 0; i < points.length; ++i) {
    const point = points[i];
    context.fillStyle = point.color;
    context.fillRect(point.x, point.y, 2, 2);
  }
}

function animate(layout) {
  // store the source position
  points.forEach(point => {
    point.sx = point.x;
    point.sy = point.y;
  });

// get destination x and y position on each point
  layout(points);

// store the destination position
  points.forEach(point => {
    point.tx = point.x;
    point.ty = point.y;
  });

timer = d3.timer((elapsed) => {
    // compute how far through the animation we are (0 to 1)
    const t = Math.min(1, ease(elapsed / duration));

// update point positions (interpolate between source and target)
    points.forEach(point => {
      point.x = point.sx * (1 - t) + point.tx * t;
      point.y = point.sy * (1 - t) + point.ty * t;
    });

// update what is drawn on screen
    draw();

// if this animation is over
    if (t === 1) {
      timer.stop();
      
      currLayout = (currLayout + 1) % layouts.length;

animate(layouts[currLayout]);

}
  });

}

animate(layouts[currLayout]);

function shuffle(array) {
//https://stackoverflow.com/questions/2450954/how-to-randomize-shuffle-a-javascript-array
  var currentIndex = array.length, temporaryValue, randomIndex;

// While there remain elements to shuffle...
  while (0 !== currentIndex) {

// Pick a remaining element...
    randomIndex = Math.floor(Math.random() * currentIndex);
    currentIndex -= 1;

// And swap it with the current element.
    temporaryValue = array[currentIndex];
    array[currentIndex] = array[randomIndex];
    array[randomIndex] = temporaryValue;
  }

return array;
}
</script>
</body>

https://d3js.org/d3.v4.min.js