projectAnimate.js

var transform, d3path;

function initSVG() {
  transform = d3.geo.transform({ point: projectPoint });
  d3path = d3.geo.path().projection(transform);
}

// We do the following for each feature
feature.geometry.coordinates = polyline.decode(
  feature.geometry.coordinates);

// This g is an SVG group element to hold all paths
g.append('path')
  .attr('d', d3path(feature))
  .datum(feature.properties)
  .each(pathTransition);

function pathTransition (d) {
  var duration = d.duration * 1000 / ( 60 * timeFactor); 

  d3.select(this)
    .attr('class', d.terminal)
    .transition()
    .duration(duration)
    .each('start', function (d) {
      this.style.opacity = 1;
    })
    .each('end', function (d) {
      updateCounts(d.terminal);
      // Fade out destination marker
      marker.attr('class', d.terminal)
        .transition()
        .duration(3000)
        .style('opacity', 0)
        .remove();
        
      // Fade out line
      d3.select(this)
        .transition()
        .duration(500)
        .style('opacity', 0)
        .remove();
    })
    .attrTween('stroke-dasharray', function () {
      return d3.interpolateString('0,' + l, l + ',' + l);
    });
}