title: d3.js Throbbing marker points on a map
body: <p><img src="https://i.stack.imgur.com/MVaxr.jpg" alt="enter image description here"><img src="https://i.stack.imgur.com/uidXq.jpg" alt="enter image description here"></p>
  
  <p>I'm building an application that will plot markers on a map - and have alarm rings animating smoothly from the markers.</p>
  
  <p>The markers will have the following properties</p>
  
  <ul>
  <li>size</li>
  <li>x coordinate</li>
  <li>y coordinate</li>
  <li>alarm rating</li>
  </ul>
  
  <p>if the alarm rating is low - I want the rings to throb very slowly, if its high to throb faster and maybe go out further.</p>
  
  <p>This will be used in a dating app at some point, so like alarm rating will represent people urgently looking to find another person to date. Be good if the map falls on the users current location and an urgent user's rings just come into view.</p>
  
  <p>Here is the latest fiddle, <a href="http://jsfiddle.net/NYEaX/367/" rel="nofollow noreferrer">http://jsfiddle.net/NYEaX/367/</a></p>
  
  <p>This is what I am aiming to build - <a href="http://demo.joostkiens.com/het-parool-4g/" rel="nofollow noreferrer">http://demo.joostkiens.com/het-parool-4g/</a></p>
  
  <pre><code>function makeRings() {
                              var datapoints = circleGroup.selectAll("circle");
                              var radius = 1;
  
                                  function myTransition(circleData){
  
                                      var transition = d3.select(this).transition();
  
                                          speedLineGroup.append("circle")
                                            .attr({
                                                       "class": "ring",
                                                       "fill":"red",
                                                       "stroke":"red",
                                                       "cx": circleData.xcoord,
                                                       "cy": circleData.ycoord,
                                                       "r":radius,
                                                       "opacity": 0.4,
                                                       "fill-opacity":0.1
                                            })
                                            .transition()
                                            .duration(function(){                 
                                                  return 100*circleData.alarmLevel;
                                            })
                                            .attr("r", radius + 100 )
                                            .attr("opacity", 0)
                                            .remove();
                                      transition.each('end', myTransition);
                                  }
  
                            datapoints.each(myTransition);
                          }   
  </code></pre>