D3 Examples - The last 10 minutes of bus positions in Washington DC From WMATAAPIAPI

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
<style>
​
body {
  margin:0;
  padding:0;
  background:#002833;
}
​
.bus {
    opacity:0.6;
    fill:#ffe;
}
​
p {
    color:#eef;
    position:absolute;
    font:12px/20px;
    right:20px;
    bottom:10px;
}
p a {
    color:#fff;
}
​
</style>
<body>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="https://d3js.org/queue.v1.min.js"></script>
<script>
​
var width = window.innerWidth,
    height = window.innerHeight;
​
var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);
​
var g = svg.append('g')
    .attr("width", width)
    .attr("height", height);
​
var projection = d3.geo.orthographic()
    .scale(99500)
    .translate([width / 2, height / 2])
    .clipAngle(90)
    .rotate([77.0398, -38.9058])
    .precision(.1);
​
var path = d3.geo.path()
    .pointRadius(3)
    .projection(projection);
​
d3.json("https://secret-wildwood-1777.herokuapp.com/bus/position/history/", function(error, list) {
    var q = queue(1);
    list.slice(0, 10).forEach(function(l) {
        q.defer(d3.json, l.url);
    });
    q.awaitAll(function(err, resp) {
        var i = 0;
        function run() {
            draw(resp[i].features);
            if (++i > resp.length - 1) i = 0;
        }
        window.setInterval(run, 100 * 1);
        run();
    });
});
​
function draw(features) {
    var buses = svg.selectAll("path")
        .data(features, function(d) {
            return d && d.properties.tripid;
        });
    buses.exit().remove();
    buses.enter().append("path")
        .attr('class', 'bus');
    buses.transition().attr("d", path);
}
</script>
<p>
<a href='https://github.com/tmcw/wmataapiapi'>tmcw/wmataapiapi</a> powered by
<a href='https://secret-wildwood-1777.herokuapp.com/'>wmataapiapi</a>
</p>
​
    