D3 Examples - Pulsating Circle

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.v4.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.scaleOrdinal()
                      .domain(d3.range(1))
                      .range([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)
            
    function timeForTimeline(){ // har
      console.log("timefortimeline")
      var timeline = svg.append("circle")
          .attr("stroke", "steelblue");
      repeat();
​
      function repeat() {
        timeline.attr({
            'cx': 10,
            'cy': 130,
            'r':10
        })
        .transition()
        .duration(4000)
        .ease("linear")
        .attr({
            'cx': 20,
            'cy': 430,
            'r':100   
        })
        .on("end", repeat);
      }
    }
        timeForTimeline();
​
        function pulse() {
            var circle = svg.select("circle");
            (function repeat() {
                circle = circle.transition()
                    .duration(2000)
                    .attr('stroke-width', 0.5)
                    .attr("r", 200)
                    .ease('sine')
          .remove()
                    .on("end", repeat);  // when the transition finishes start again
            })();
        }
    </script>
​
    