Loop

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>D3: Adding values and elements to a chart</title>
      <script type="text/javascript" src="https://d3js.org/d3.v4.min.js"></script>
		<style type="text/css">
			/* No style rules here yet */
		</style>
	</head>
	<body>

// the margin convention
		var margin = {top: 20, right: 10, bottom: 20, left: 10};
		var  width = 960 - margin.left - margin.right,
        height = 500 - margin.top - margin.bottom;

d3.select("body").append("button")
										.attr("id","button1")
										.text(1)

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 + ")");

var data = [

[0,0],
[15,4.841229183],
[30,13.69306394],
[45,25.15576475],
[60,38.72983346],
[75,54.12658774],
[90,71.15124735],
[105,89.6608192],
[120,109.5445115],
[135,130.7131879],
[150,153.0931089],
[165,176.621948],
[180,201.246118],
[195,226.9189007],
[210,253.5990931],
[225,281.25],
[240,309.8386677],
[255,339.3352877],
[270,369.7127263],
[285,400.9461466],
[300,433.0127019],
];

var xScale = d3.scaleLinear()
					 .domain([0, d3.max(data, function(d,i) { return data[i][0]; })])
					 .range([margin.left, width]);

var yScale = d3.scaleLinear()
					 .domain([0, d3.max(data, function(d,i) { return data[i][1]; })])
					 .range([height, margin.top]);

var xAxis = d3.axisBottom()
						.scale(xScale);

var yAxis = d3.axisLeft()
						.scale(yScale);

svg.append("g").call(xAxis)
					 		.attr("transform", "translate(" + 10 + "," + height + ")");
	svg.append("g").call(yAxis)
					 		.attr("transform", "translate(" + 20 + "," + 0 + ")");

svg.selectAll("circle")
	.data(data)
	.enter()
	.append("circle")
	.attr("cx", function (d, i){
		return data[i][0]+20;
	})
	.attr("cy", function(d, i) {
		return -data[i][1]+height;
	})
	.attr("r", 10)
	.attr("stroke", "red")
	.attr("fill", "green");

d3.select("#button1")
 .on("click", function repeat() {
	svg.selectAll("circle")
					.data(data)
					.transition()
					.duration(500)
					.delay (function (d,i){	return i*20;})
					.attr("cx", function (d, i){ return data[i][1]+20;})
					.attr("cy", function(d, i) { return -data[i][0]+height;})
					.attr("r", 10)
					.attr("stroke", "black")
					.attr("fill", "blue")
			    .transition()
					.duration(500)
					.delay(700)
					.attr("cx", function (d, i){ return data[i][0]+20;})
					.attr("cy", function(d, i) { return -data[i][1]+height;})
					.attr("r", 10)
					.attr("stroke", "black")
					.attr("fill", "orange")
					.on("end", repeat);
					});

</script>
	</body>
</html>

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