"Progress dots" in D3, Wolfram style

Question

Wolfram (math-related site) has following progress bar (or should I say progress dots):

You can see it in action here.

How would this be implemented in D3?

I wrote this codepen in D3, with some different idea:

Maybe it can serve as a starting point.

Answer 1

If you just want the circles you've generated to animate in and out of existence, this will work.

I love your best circle generator, but it would be easier if it generated an array of data like the following:

[
{x: 14, y: 15, r: 5},
{x: 200, y: 100, r:8}
]

With an array like that, you can use transition chaining:

svg.selectAll("circle")
    .data(generatedCircleArray)
    .enter()
    .append("circle")
    .attr("r", 0)
    .attr("cx", function(d) {return d.x})
    .attr("cy", function(d) {return d.y})
    .transition()
    .delay(function() {return Math.random() * 500})
    .each(animate)

function animate() {
  var circle = d3.select(this);
  (function repeat() {
    circle = circle.transition()
        .attr("r", function(d) {return r})
      .transition()
        .attr("r", 0)
        .each("end", repeat);
  })();
}

That's adapted from this example.

That should show the circles animate into and out of existence. You can pair that with animating the opacity or varying the opacity to mix it up.