~ 20 000 Simultaneous Canvas Transitions

See also the SVG version.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">

<title>Canvas, Lots of Transitions</title>

</head>
<body>
    <canvas width=960 height=500></canvas>
    <script>

var width = 960;
var height = 500;

var data = d3.range(19200)

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

var faux = d3.select(document.createElement("custom"));

// rendering function, called repeatedly:
function render() {
  context.clearRect(0, 0, width, height);
  faux.selectAll("rect").each(function() {
    var sel = d3.select(this);
    context.beginPath();
	context.fillStyle = sel.attr("fill");
	context.fillRect(sel.attr("x"),sel.attr("y"),4,4);
    
  })
  window.requestAnimationFrame(render) 
}

window.requestAnimationFrame(render)

</script>
</body>

</html>

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