francisbrito · September 23, 2014 18:14
diff --git a/bleep.html b/bleep.html
 <!DOCTYPE html>
 <html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
    <script type="text/javascript" src="http://mbostock.github.com/d3/d3.js?1.29.1"></script>
    <style>
    #canvas {
      width: 500px;
      height: 500px;
    }

    #canvas > svg {
      width: 100%;
      height: 100%;
    }

    .marker {
      fill: red;
    }

    .radar {
      fill: rgba(255, 0, 0, 0.65);
      stroke: red;
      stroke-width: 5px;
      stroke-opacity: 1;
    }
    </style>
  </head>
  <body>
    <div id="canvas"></div>
    <script type="text/javascript">
    var canvas = d3.select('#canvas');

    var baseRadius = '10%',
        centerX    = '50%',
        centerY    = '50%';

    canvas
      .append('svg')
        .append('circle')
          .attr('r', baseRadius)
          .attr('cx', centerX)
          .attr('cy', centerY)
          .attr('class', 'marker')
          
    canvas
      .select('svg')
        .append('circle')
            .attr('cx', centerX)
            .attr('cy', centerY)
            .attr('class', 'radar')
            .transition()
              .each('end', bleep);
              

    function bleep() {
      var radar = d3.select(this);

      return radar.attr('r', 0)
        .style('fill-opacity', 1)
        .style('stroke-width', '5px')
        .transition()
          .ease('cubic-in-out')
          .duration(3000)
          .attr('r', '40%')
          .style('fill-opacity', 0)
          .style('stroke-width', 0)
          .each('end', bleep);
    }
    </script>
  </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
	<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
	<script type="text/javascript" src="http://mbostock.github.com/d3/d3.js?1.29.1"></script>
	<style>
	#canvas {
	width: 500px;
	height: 500px;
	}

	#canvas > svg {
	width: 100%;
	height: 100%;
	}

	.marker {
	fill: red;
	}

	.radar {
	fill: rgba(255, 0, 0, 0.65);
	stroke: red;
	stroke-width: 5px;
	stroke-opacity: 1;
	}
	</style>
	</head>
	<body>
	<div id="canvas"></div>
	<script type="text/javascript">
	var canvas = d3.select('#canvas');

	var baseRadius = '10%',
	centerX = '50%',
	centerY = '50%';

	canvas
	.append('svg')
	.append('circle')
	.attr('r', baseRadius)
	.attr('cx', centerX)
	.attr('cy', centerY)
	.attr('class', 'marker')

	canvas
	.select('svg')
	.append('circle')
	.attr('cx', centerX)
	.attr('cy', centerY)
	.attr('class', 'radar')
	.transition()
	.each('end', bleep);


	function bleep() {
	var radar = d3.select(this);

	return radar.attr('r', 0)
	.style('fill-opacity', 1)
	.style('stroke-width', '5px')
	.transition()
	.ease('cubic-in-out')
	.duration(3000)
	.attr('r', '40%')
	.style('fill-opacity', 0)
	.style('stroke-width', 0)
	.each('end', bleep);
	}
	</script>
	</body>
	</html>