Real-time mapping of Honolulu's TheBus routes and vehicle locations.
JavaScript CSS Ruby
Switch branches/tags
Nothing to show
Pull request Compare This branch is 11 commits ahead, 2 commits behind mudphone:master.

README.md

LiveBus

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.

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

Prerequisites

  • 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 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/

Notes

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.

License

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

Copyright © 2013 Pas de Chocolat, LLC