d3.js Throbbing marker points on a map

Question

I'm building an application that will plot markers on a map - and have alarm rings animating smoothly from the markers.

The markers will have the following properties

• size
• x coordinate
• y coordinate
• alarm rating

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.

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.

Here is the latest fiddle, http://jsfiddle.net/NYEaX/367/

This is what I am aiming to build - http://demo.joostkiens.com/het-parool-4g/

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);
                        }   

Answer 1

Here is some code/concepts that may help

window.setInterval(makeRings, 1000);

function makeRings() {

datapoints.each(function(circleData){  
   //datapoints is your d3 selection of circle elements

speedLineGroup.append("circle")
  .attr({"class": "ring",
         "fill":"red", //or use CSS to set fill and stroke styles
         "stroke":"red",
         "cx": circleData.xCoord,
         "cy": circleData.yCoord,
             //position according to this circle's position
         "r":radius, //starting radius, 
                     //set according to the radius used for data points
         "opacity": 0.8, //starting opacity
         "fill-opacity":0.5 //fill will always be half of the overall opacity
        })
  .transition()
  .duration( intensityTimeScale(circleData.intensity) )
      //Use an appropriate linear scale to set the time it takes for 
      //the circles to expand to their maximum radius.
      //Note that you *don't* use function(d){}, since we're using the data
      //passed to the .each function from the data point, not data
      //attached to the ring
  .attr("r", radius + intensityRadiusScale(circleData.intensity) )
      //transition radius
      //again, create an appropriate linear scale
  .attr("opacity", 0) //transition opacity
  .remove(); //remove when transition is complete

});
}




    function myTransition(d){
var transition = d3.select(this).transition();

        //Forward transition behavior goes here
        //Probably create a new circle, expand all circles, fade out last circle

        transition.each('end', myTransition); //This calls the backward transition
    }

    d3.select('myFlashingElement').each(myTransition);

1. Use 'setInterval' to call a function on a regular basis (e.g., once or twice per second) that will create a new ring around each data circle.

2. Create the rings using an .each() call on your data circles, but add them to a different element, and/or with different class names so there is no confusion between the rings and the data points.

3. Set the initial radius of the ring to be the same as the data point, but then immediately start a transition on it. Make the duration of the transition a function of the "intensity" data value for the associated data circle, and also make the final radius a function of that data value. Also transition the opacity to a value of 0.

4. Make the final line of the transition for the rings .remove() so that each ring removes itself after it has finished expanding.

   create looping transitions in d3 is to use the end callback on transitions. Create two functions, which each create a transition on your data, with one going from your start point to your end point, and the other going back, and have them call each other on completion, like so:

Answer 2

This seems to closely match the example. http://jsfiddle.net/NYEaX/468/

Here are the settings I've used.

                function getDurationPerDot(circleData){
                    var totalTime = 3000;//3 seconds max
                    var time = totalTime-(circleData.alarmLevel*10)
                    return time;
                }

                function getOuterRadiusPerDot(circleData){
                    var radius = circleData.alarmLevel*.5;
                    return radius;
                }