5 circles are better than 1.

loop animation basics.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
#main {
	border: 1px solid #AAA;
	width: 450px;
	height: 450px;
	margin: 25px auto 0 auto;
}
</style>
<body>
<div id="main"></div>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script>

var margin = {top: 0, right: 0, bottom: 0, left: 0},
        width = 450 - margin.left - margin.right,
        height = 450 - margin.top - margin.bottom;

var svg = d3.select("#main").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 interval = 2000;

var circles = svg.selectAll(".en").data( [0,1,2,3,4] );

circles.enter()
			.append("circle")
			.attr("class", "en");

var mainLoop = function() {

circles.transition()
			.ease("linear")
			.duration(1000).delay( function(d,i){return i*50}).ease("circle")
			.attr("r", function(d) { return Math.floor( Math.random()*200+20) })
			.attr("cx", function(d) { return Math.floor( Math.random()*width) })
			.attr("cy", function(d) { return Math.floor( Math.random()*height) })
			.attr("opacity", 1.0)
			.attr("stroke", "#000")
			.attr("stroke-width", "10px")
			.style("fill", "none");

return function() {
	        d3.timer( mainLoop(), interval );
	        return true;
	    }
	};

d3.timer( mainLoop(), interval );

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

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

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