Stack Overflow - Multiple calls to radar shit.

CSS

body {
  background: #192887;
}

.graticule {
  fill: none;
  stroke: #fff;
  stroke-width: .5px;
}

.land {
  fill: #007421;
}

.dot {
  fill: #c7141a;
}

.ring {
  fill: none;
  stroke: #c7141a;
}

JavaScript

var width = 960,
    height = 500;

var projection = d3.geo.mercator()
    .center([113, -3])
    .scale(1275)
    .translate([width / 2, height / 2])
    .clipExtent([[0, 0], [width, height]])
    .precision(.1);

var path = d3.geo.path()
    .projection(projection);

var graticule = d3.geo.graticule()
    .step([5, 5]);

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);

svg.append("path")
    .datum(graticule)
    .attr("class", "graticule")
    .attr("d", path);


var data = [{x:-8,y:100},{x:-10,y:110},{x: -12,y:120}];

svg.selectAll("circle")
    .data(data)
    .enter()
    .append("circle")
    .attr("class","dot")
    .attr("transform",translateCircle)
    .attr("r",8);
          
          
function translateCircle(datum, index)
          {
            return "translate(" +  projection([datum.y, datum.x]) + ")";
          };

setInterval(function(){
	      data.forEach(function(datum)
          {
			  svg
			  	.append("circle")
			      .attr("class", "ring")
			      .attr("transform", translateCircle(datum))
			      .attr("r", 6)
			      .style("stroke-width", 3)
			      .style("stroke", "red")
			    .transition()
			      .ease("linear")
			      .duration(6000)
			      .style("stroke-opacity", 1e-6)
			      .style("stroke-width", 1)
			      .style("stroke", "blue")
			      .attr("r", 160)
			      .remove();
          })
      }, 750)
    
  
d3.select(self.frameElement).style("height", height + "px");