A bit of an experiment...
We're animating the movement of Honolulu's TheBus system, in the browser.
What is this?
Here's a taste of ~7 minutes compressed to 45 seconds on Vimeo.
This is a simple web app which combines:
- Honolulu's TheBus vehicle location data (the same used for the Google Transit Feed Specification (GTFS) - realtime service)
- The ProtoBufJS library (installed via npm), to parse Protocol Buffer data from GTFS-realtime, translating it into JSON.
- D3.js to render the SVG maps and animate bus activity.
This experiement was really an excuse for me to try out the Meteor web development framework. TheBus presented itself as a good candidate as it provides realtime information on its bus locations. Once bus positions are added/updated in MongoDB, Meteor syncs that data with any connected browsers.
D3 handles moving the dots on the map, since it ties data to SVG elements and animations to changes to that data.
In this way, I write very little code. It's fairly declarative in nature. Et, voilà ! Realtime bus map.
What is this for?
I don't know.
It kind of depends. This implementation is fairly specific to TheBus. But, that said, if your city uses GTFS-realtime, you could swap your system's data URL and
Of course, you'll also have to use a different map. I've written a bit about how to create these maps in D3 before. My write-up is just an extension of the formal D3 write-up by Mike Bostock, but mine's tailored to Hawai‘i.
How do I install and run this?
For Mac OS X
$ brew install node
Make sure it's on your path:
$ curl https://install.meteor.com | /bin/sh
$ git clone https://github.com/PasDeChocolat/LiveBus.git
$ cd LiveBus $ meteor
Open a browser and point it to
This is not using TheBus' older HEA API. It favors the GTFS-realtime feed, as this is the direction we seem to be going in for future services.
This work is licensed under a Creative Commons Attribution-ShareAlike 3.0 Unported License.
Copyright © 2013 Pas de Chocolat, LLC