Pulsating Circle - broken

A pulsating circle.

forked from chiester's block: Pulsating Circle

<!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>

Modified http://d3js.org/d3.v4.min.js to a secure url

https://d3js.org/d3.v4.min.js