A bit of an experiment...

We're animating the movement of Honolulu's TheBus system, in the browser.

See the tutorial for more detailed description of how this works. There's also a live version courtesy of Meteor at http://livebus.meteor.com.

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.
• Underscore.js, because it's nearly impossible to maintain my sanity in JavaScript without it.
• The Meteor JavaScript web application framework to tie it all together.

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.

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 .proto into server.js.

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.

• Homebrew
• Git

Install node.js

$ brew install node

Make sure it's on your path:

export PATH="/usr/local/share/npm/bin:$PATH"

Install Meteor

$ curl https://install.meteor.com | /bin/sh

Grab LiveBus

$ git clone https://github.com/PasDeChocolat/LiveBus.git

Run app

$ cd LiveBus
$ meteor

Open a browser and point it to http://localhost:3000/

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