gistfile1.js

$(document).ready(function(){
	getData();	
	
});
var duration;

duration = 18000;
/* Load the map */

var tiles = ["http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png","http://{s}.tile.stamen.com/toner-lite/{z}/{x}/{y}.jpg","http://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png","http://a.tiles.wmflabs.org/bw-mapnik/%7Bx%7D%7By%7D%7Bz%7D.png"]

var map = new L.Map("map", {center: [38.1004106, -77.070529], zoom: 6})
    .addLayer(new L.TileLayer(tiles[2]));

// add an svg layer with a sublayer of g
var svg = d3.select(map.getPanes()
	.overlayPane)
	.append("svg");
    g = svg.append("g").attr("class", "leaflet-zoom-hide");

/*
Queue is very useful because it allows the data to be loaded first and then exectue the function
*/
function getData(){
	console.log("Called getData()");

	queue()
		.defer(d3.json, 'MY_GEOJSON_DATA.json')
		.await(makemap)		
}

function makemap(error, data){
  
	console.log("Called makemap()");

	// Stop the loading spinner
	spinner.stop()
	
	svg.attr("class", "route");

	var transform = d3.geo.transform({point: projectPoint});
    var	path = d3.geo.path().projection(transform);

	var paths = g.selectAll("path")
		.data(data.features)
		.enter()
		.append("path")
		.call(transition)
    
	var targetPath = d3.selectAll(".route")[0][0]  // select all classes .route
	var pathNode = d3.select(targetPath).selectAll('path').node();
  var pathLength = pathNode.getTotalLength();
    
  var markers = g.selectAll("path")
    
  var circleS = markers.append("circle")
  	.attr({
      r: 5,
      fill: 'red',
      class: "marker",
      transform: function () {
          var p = pathNode.getPointAtLength(0)
          return "translate(" + [p.x, p.y] + ")";
      }
      .call(circle_transition)
  });

	function transition(path) {
		path.transition()
			.duration(duration)
			.ease("cubic-in-out")
			.attrTween("stroke-dasharray", tweenDash)
			.each("end", function() { d3.select(this)})
	}

	function tweenDash() {
		var l = this.getTotalLength(),
		i = d3.interpolateString("0," + l, l + "," + l); // interpolation of stroke-dasharray attr
			return function(t) {
				var marker = d3.select(".marker")
				var p = pathNode.getPointAtLength(0);
				marker.attr("transform", "translate(" + p.x + "," + p.y + ")");
			return i(t);
		};
	}

	function circle_transition(circle) {
		console.log("circle transition function called")
		circle.transition()
			.duration(duration)
        	.ease("linear")
        	.attrTween("transform", function (d, i) {
        		return function (t) {
            		var p = pathNode.getPointAtLength(pathLength*t);
            		return "translate(" + [p.x, p.y] + ")";
            	
        		}
    		});
        }

	map.on("viewreset", reset);
	reset();

	// Reposition the SVG to cover the features.
	function reset() {
		var bounds = path.bounds(data),
		    topLeft = bounds[0],
		    bottomRight = bounds[1];
		    
		svg.attr("width", bottomRight[0] - topLeft[0])
		    .attr("height", bottomRight[1] - topLeft[1])
		    .style("left", topLeft[0] + "px")
		    .style("top", topLeft[1] + "px");
		    
		g.attr("transform", "translate(" + -topLeft[0] + "," + -topLeft[1] + ")");
		
		paths.attr("d", path);  
	}

	// Use Leaflet to implement a D3 geometric transformation.
	function projectPoint(x, y) {

		if(x != null && y != null){
			var point = map.latLngToLayerPoint(new L.LatLng(y, x));
			this.stream.point(point.x, point.y);
		}
	}

}