Skip to content


Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
This branch is 11 commits ahead, 2 commits behind mudphone:master.

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time


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

What is this?

Here's a taste of ~7 minutes compressed to 45 seconds on Vimeo.

This is a simple web app which combines:

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 .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.

How do I install and run this?

For Mac OS X


  • Homebrew
  • Git

Do this:

Install node.js

$ brew install node

Make sure it's on your path:

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

Install Meteor

$ curl | /bin/sh

Grab LiveBus

$ git clone

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.


Creative Commons License
This work is licensed under a Creative Commons Attribution-ShareAlike 3.0 Unported License.

Copyright © 2013 Pas de Chocolat, LLC


Real-time mapping of Honolulu's TheBus routes and vehicle locations.






No releases published


No packages published


  • JavaScript 92.4%
  • CSS 6.6%
  • Ruby 1.0%