xxxxxxxxxx<html><head> <meta charset="UTF-8"> <meta content="utf-8" http-equiv="encoding"> <title>Small Multiples</title><script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script><style> .divRoutes { float:left;}p{ font-family: ChevinBold; margin-left: 10px;}</style></head><body><script type="text/javascript">d3.json('data.json', function(err, data) { //console.log(data); viz(data); });var projection = d3.geo.equirectangular() .scale(1250905) .translate([-1124000,1890]) var path = d3.geo.path() .projection(projection);function viz(data) {//make a div for each object in our datavar divRoutes = d3.selectAll(".divRoutes").data(data).enter().append("div").attr("class","divRoutes");var title = divRoutes.append("p").html(function(d) {return "Section: "+d.id});var margin = { top: 10, right: 10, bottom: 10, left: 10 }, width = 150 - margin.left - margin.right, height = 100 - margin.top - margin.bottom;var divRoutesSvg = divRoutes.append('svg') .attr('width', width + margin.left + margin.right) .attr('height', height + margin.top + margin.bottom) .append('g') .attr('transform', 'translate(' + margin.left + ', 0)');var rects = divRoutesSvg.append("rect").attr("width",width).attr("height",height).style("fill","black"); var x = d3.scale.linear().domain([51.493204717358,51.4978927173579]).range([margin.left,width-margin.right]); var y = d3.scale.linear().domain([0.0660707550153611,0.0744301820153611]).range([height-margin.top,margin.bottom]);var line = d3.svg.line() .interpolate("basis") .x(function(d) { return x(d.lat); }) .y(function(d) { return y(d.lon); });var routes = divRoutesSvg.append("path") .attr("class", "line") .style("fill",function(d,i) {return "none";}) .style("stroke",function(d,i) {return "#00A4F2";}) .style("stroke-width",1.5) .attr("d", function(d) { return line(d.route); }) .attr("stroke-dasharray", 6500 + " " + 6500) .attr("stroke-dashoffset", 6500) .transition() .ease("linear") .duration(35000) .attr("stroke-dashoffset", 0); // var routes = divRoutesSvg.selectAll(".circle")// .data(function(d) {return d.route})// .enter().append("circle")// .attr("class", "circle")// .attr("cy", function(d,i) {return 10+(i*10);})// .attr("cx", function(d,i) {return d.lat;})// .attr("r", 10) ; }</script></body></html> https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js