An example of how you could use the wmataapiapi API, based off of the hosted version.
Want to help? Improve the code, or host an instance! I'm hosting this out-of-pocket and would love for it to be owned instead by some organization with a vested interest.
| <!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; | |
| } | |
| text { | |
| font:normal 20px sans-serif; | |
| fill:#fff; | |
| } | |
| </style> | |
| <body> | |
| <script src="http://d3js.org/d3.v3.min.js"></script> | |
| <script src="http://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 loadingText = g.append('text') | |
| .attr('transform', 'translate(' + [width/2, height/2] + ')') | |
| .attr('text-anchor', 'middle') | |
| .text('Loading'); | |
| 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("http://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) { | |
| loadingText.remove(); | |
| 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='http://secret-wildwood-1777.herokuapp.com/'>wmataapiapi</a> | |
| </p> |