title: How do I animate points down a path on a map in D3.js?
body: <p>I've got a map, and I've successfully plotted an array of LineStrings on the map.</p>
  
  <p>But what I really want to do is animate circles down the route each LineString defines.</p>
  
  <p>I've looked at a few examples (<a href="http://bl.ocks.org/zross/6a31f4ef9e778d94c204" rel="noreferrer">http://bl.ocks.org/zross/6a31f4ef9e778d94c204</a>, <a href="http://www.tnoda.com/blog/2014-04-02" rel="noreferrer">http://www.tnoda.com/blog/2014-04-02</a>) but I'm not sure how I actually put circles at the starting points, and then make them follow the path.</p>
  
  <p>Here's my map with paths plotted (in red for visibility)
  <img src="https://i.stack.imgur.com/keP5p.png" alt="paths I want points to follow">
  Here's my code - <code>hydro_map</code> is a shapefile converted to a GeoJSON FeatureCollection, <code>stations</code> is a GeoJSON feature collection (just points), and <code>links</code> is an array of LineString. I want to create circles, and transition them down each of the paths I created.</p>
  
  <pre><code>var width = 900, height = 800;
  var projection = d3.geo.mercator().center([-87.55,41.919]).scale(170000);
  var path = d3.geo.path().projection(projection);
  
  var svg = d3.select("#output").append("svg")
      .attr("width", width)
      .attr("height", height)
      .call(d3.behavior.zoom()
      .on("zoom", redraw))
      ;
  
  var g = svg.append("g");
  var terrainGroup = g.append("g");
  var arcGroup = g.append("g");
  var stationGroup = g.append("g");
  var tripGroup = g.append("g");
  
  //draw terrain
  terrainGroup.append("path")
           .datum({type: "FeatureCollection", features: hydro_map.features})
           .attr("d", path)
           .style("fill", "#3db7e4");
  
  //plot stations
  stationGroup.selectAll("circle")
      .data(stations.features).enter()
      .append("path")
      .attr("d", path.pointRadius(0.5));
  
  //draw paths between stations
  var pathArcs = arcGroup.selectAll(".arc")
                          .data(links);
  pathArcs.enter()
          .append("path")
          .attr({"class": "arc"})
          .style({fill: "none",})
          .attr({d: path})
          .style({
              stroke: "red",
              "stroke-width": "0.5px"
  });
  </code></pre>