JSFiddle - React, Tailwind, and code Playground

by James Uther

HTML

<script src="http://maps.googleapis.com/maps/api/js?libraries=visualization&amp;sensor=true_or_false"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.4.13/d3.min.js"></script>

CSS

html, body, #map-canvas {
     height: 100%;
     margin: 0px;
     padding: 0px
 }

JavaScript

function clean(d) {
        d.latitude = parseFloat(d.latitude);
        d.longitude = parseFloat(d.longitude);
        d.timestamp = parseFloat(d.timestamp) / 1000;
        return d;
    }
    
    function drawNext(c, xScale, yScale, x, xs) {
        var p1 = clean(xs.shift());
        var tsdiff = p1.timestamp - x.timestamp;
        var dst = Math.sqrt(Math.pow(Math.abs(x.longitude - p1.longitude), 2) + Math.pow(Math.abs(x.longitude - p1.longitude), 2));
        if (tsdiff < 1000 && dst < 0.03) {
            c.append('line')
            .attr('x1',xScale(x.longitude))
            .attr('x2',xScale(p1.longitude))
            .attr('y1',yScale(x.latitude))
            .attr('y2',yScale(p1.latitude))
            .attr('stroke-width', 2)
            .attr('stroke','yellow')
            .attr('opacity',1)
            .transition()
            .style("opacity", "0.05");
        }
        setTimeout(drawNext, 0, c, xScale, yScale, p1, xs);
    }

$(document).ready(function () {

d3.xml(
    "https://dl.dropboxusercontent.com/u/26693853/output.svg", 
    "image/svg+xml", 
    function(xml) {
  document.body.appendChild(xml.documentElement);

    var svg = d3.select('svg');

    var bbox =  [51.5023223705702,-0.116449968400531,51.5282224872759,-0.079421512868276];
    var width = svg[0][0].clientWidth;
    var height = svg[0][0].clientHeight;
    
    var x = d3.scale.linear()
              .domain([bbox[1], bbox[3]])
              .range([0,width])

    var y = d3.scale.linear()
              .domain([bbox[0],bbox[2]])
              .range([height,0]);
    
    d3.csv("https://dl.dropboxusercontent.com/u/26693853/bicyclesFull.csv", function (data) {
        var p0 = clean(data.shift());
        drawNext(svg, x, y, p0, data);
    });
        });

    });