D3 Examples - Continuous expanding circle ping

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
<style>
    svg {
        background-color: #3b3b3c;
    }
    circle {
        fill: none;
        stroke: #398FBD;
    }
</style>
​
<body>
    <script src="https://d3js.org/d3.v3.min.js"></script>
    <script>
        var margin = {
            top: 40,
            right: 40,
            bottom: 40,
            left: 40
        }, width = 960 - margin.left - margin.right,
            height = 500 - margin.top - margin.bottom;
​
        var y = d3.scale.ordinal().domain(d3.range(1)).rangePoints([0, height]);
​
        var svg = d3.select("body")
            .append("svg")
            .attr("width", width + margin.left + margin.right)
            .attr("height", height + margin.top + margin.bottom)
            .append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");
        svg.selectAll("circle")
            .data(y.domain())
            .enter()
            .append("circle")
            .attr("stroke-width", 20)
            .attr("r", 10)
            .attr("cx", width / 2)
            .attr("cy", y)
            .each(expand);
​
        function expand() {
            var circle = svg.select("circle");
            (function repeat() {
                circle = circle.transition()
          .transition()
          .duration(2000)
          .attr('stroke-width', 0)
          .attr("r", 250)
          .ease('sine')
          .transition()
          .duration(0)
          .attr('stroke-width', 15)
          .attr("r", 15)
          .ease('bounce')
          .each("end", repeat);
            })();
        }
    </script>
    