title: d3.js: map with concentric circles emanating from dots
body: <p>Been away from d3.js for a few months... and I've inherited a simple US map with features that someone else started.</p>
  
  <p>The features are represented by simple dots of varying sizes.</p>
  
  <p><strong>I want to add emanating concentric circles to each dot</strong>, similar to the classic Onion example by Mike Bostock: <a href="http://bl.ocks.org/mbostock/4503672" rel="nofollow">http://bl.ocks.org/mbostock/4503672</a>  (maybe not so ominous looking though)</p>
  
  <p>I've got a block set up here: <a href="http://bl.ocks.org/mbostock/4503672" rel="nofollow">http://bl.ocks.org/mbostock/4503672</a></p>
  
  <p>(Not sure why the states aren't rendering correctly in the block, but it probably doesn't matter for this.)</p>
  
  <p>In Mike's example there is only one dot, so I'm have trouble understanding how to translate what he did to what I've got (many dots).</p>
  
  <p>Here's my script:</p>
  
  <pre><code>/**
   * Page initialization
   */
  $(function() {
      renderMap('#map-container');
  });
  
  function renderMap(container) {
      var width = 960,
          height = 500,
          active;
  
      var projection = d3.geo.albersUsa()
          .scale(960)
          .translate([width / 2, height / 2]);
  
      var path = d3.geo.path()
          .projection(projection);
  
      var radius = d3.scale.sqrt()
          .domain([0, 1e7])
          .range([0, 10]);
  
      var path2 = d3.geo.path()
          .projection(projection);
  
      //  Remove svg, if already exist
      d3.select(container).select('svg').remove();
  
      var svg = d3.select(container).append("svg")
          .attr("width", width)
          .attr("height", height);
  
      svg.append("rect")
          .attr("width", width)
          .attr("height", height);
          //.on("click", reset);
  
      var g = svg.append("g");
  
      queue()
          .defer(d3.json, "/mbostock/raw/4090846/us.json")
          .defer(d3.json, "dots.json")
          .await(function (error, us, centroid) {
              g.append("g")
                  .attr("id", "states")
                  .selectAll("path")
                  .data(topojson.feature(us, us.objects.states).features)
                  .enter().append("path")
                  .attr("d", path)
                  .attr("class", "state");
                  //.on('click', click);
  
              g.append('path')
                  .attr("id", "state-borders")
                  .datum(topojson.mesh(us, us.objects.states, function(a, b) { return a !== b; }))
                  .attr("d", path)
                  .attr("class", "mesh");
  
              var dots = g.append("g")
                  .attr("id", "dots")
                  .selectAll("path")
                  .data(centroid.data)
                .enter().append("path")
                  .attr("class", "dot")
                  .attr("d", path2.pointRadius(function(d) { return radius(d.properties.pool); }));
          }    
      );
  
   }
  </code></pre>
  
  <p>and the key part of Mike's example for making the rings is:</p>
  
  <pre><code>setInterval(function() {
    svg.append("circle")
        .attr("class", "ring")
        .attr("transform", "translate(" + projection([100, -8]) + ")")
        .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", "brown")
        .attr("r", 160)
        .remove();
  }, 750);
  </code></pre>
  
  <p>how do I get the rings positioned on the dots?</p>