Canvas Animation Using D3.js

Inspired by:

WORKING WITH D3.JS AND CANVAS: WHEN AND HOW - Irene Ros
DOM-to-Canvas using D3 - Mike Bostock

In this example:

I create customed node to adopt d3's enter-update-exit pattern and animation feature.
Using MutationObserver to observer mutation on target node and its descendents.

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.12.0/d3.min.js" integrity="sha256-+9Mf3cAVmxxudDsr1XwXUeRZFtvdWVYdq5/vcgiYyNU=" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.6/dat.gui.min.js" integrity="sha256-HJ7j+71YYw6Kcs8THwQV9lXmPOcR0eXlg7n8KRTZsyA=" crossorigin="anonymous"></script>
  <style>
    canvas {
      display: block;
      margin: 0.5em auto;
    }
  </style>
</head>

d3.select(canvas).attr("width", w).attr("height", h);

var customNode = document.createElement("custom:cc"),
    dataContainer = d3.select(customNode),
    p = {
        num: 200,
        data: genCircles(this.num)
    };

var gui = new dat.GUI();
gui.add(p, "num", 100, 10000)
.step(100)
.onChange(function (n) {
    p.data = genCircles(n);
    drawCustom();
});

function drawCustom () {
    var u = dataContainer.selectAll("c").data(p.data);
    u.enter()
    .append("c")
    .attr("r", d => d.r)
    .attr("x", Math.random() * w)
    .attr("y", Math.random() * h)
    .merge(u)
    .transition()
    .duration(2000)
    .attr("x", d => d.x)
    .attr("y", d => d.y)
    .attr("r", d => d.r);
    
    u.exit().transition()
    .duration(2000)
    .attr("r", 0)
    .remove();
}

function drawCanvas () {
    ctx.save();
    ctx.clearRect(0, 0, w, h);
    ctx.lineWidth = 1;
    ctx.strokeStyle = "#335";
    ctx.beginPath();
    dataContainer.selectAll("c").each(function (d) {
        var x = +this.getAttribute("x"),
            y = +this.getAttribute("y"),
            r = +this.getAttribute("r");
        ctx.moveTo(x + r, y);
        ctx.arc(x, y, r, 0, Math.PI * 2, false);
    });
    ctx.stroke();
    ctx.restore();
    //window.requestAnimationFrame(drawCanvas);
}

drawCustom();
//d3.timer(drawCanvas);

// https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver
var config = { attributes: true, childList: true, subtree: true };
var callback = function (mutationsList, observer) {
    drawCanvas();
};
var observer = new MutationObserver(callback);
observer.observe(customNode, config);
    
  </script>
</body>

https://cdnjs.cloudflare.com/ajax/libs/d3/5.12.0/d3.min.js

https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.6/dat.gui.min.js