z2

<!doctype html>
<html lang="en">

  <head>
    <script src="https://d3js.org/d3.v3.min.js"></script>
  </head>
  <body>
  <script>
    function drawCircles() {
        var data = d3.range(10).map(function() {
            return {
                x: Math.random()*500,
                y: Math.random()*500
            };
        });

        var circles = svg.selectAll("circle")
            .data(data).enter()
            .append("circle")
            .attr("cx", function(d) { return d.x; })
            .attr("cy", function(d) { return d.y; })
            .attr("r", 15)
            .style("fill", "white")
            .style("stroke", "blue");

        transitionTime = 0;

        circles.each(function(d) {
            let durationTime = Math.random() * 1000 + 400
            d3.select(this).transition().duration(durationTime).style("fill", "#26a69a")
            d3.select(this).transition().delay(durationTime).duration(durationTime).attr("r", width/2).style("opacity", 0)
        })
    }
    var width = 500;
    var height = 500;
    var svg = d3.select("body")
        .append("svg")
        .attr("width", width)
        .attr("height", height)

    setInterval(function() {
        setTimeout(drawCircles, 3100)
        setTimeout(svg.selectAll("circle").remove(), 3000)
    }, 3000)


</script>
  </body>