Sometimes bus riding can feel intimidating, but this visualization proves it: everybody's doing it. Pick a route off the map and watch a day in the life of the line. Buses speed by, passengers jumping on and off. Some lines are slow, some are hopping, and rush hour is often hilarious.
Where's the data from?
The Bay Area
d3.js user group
put out a call for entries for the Urban Prototyping's
Urban Data Challenge.
Three cities - Zurich, San Francisco, and Geneva - provided
public transportation data
from the week of October 1-7, 2012. The data includes each bus, the time it arrived at each stop, and how many people got on and off (as counted by lasers), along with the lat/long of each stop and route. The challenge: use the datasets to show something new and interesting.
Swiss cities have a much higher transit ridership and more vehicles on a line at a given time.
Cleaning up the data
The raw data needed a lot of processing before we could make our pencil and paper sketch real. Mostly this involved wrangling the three cities into a standard format (so all the column names were the same across the cities), then organizing that into JSON blobs by date and route.
Thanks to our favorite tools:
this was easier than it sounds.
Visualizing the data
takes over. That simulation you're watching? The time is scaled to real time - 24hrs takes is played back over approximately 3min. We kick off a bunch of d3 timers - one for every trip a bus takes along the line. Then, within each trip, more timers get kicked off to add the waiting passengers to each stop and to move the bus so it arrives at each stop at the proper time. The waiting passengers arrive at a random time between when the bus is a few stops away and when it arrives. The passengers who get off at that stop exit the bus and disperse.
Clicking a new route on the map loads that route, and the day pulldown switches days, just as you'd expect. And a few things we couldn't resist: The skyline changes color in an ambient display of the time of day, and we drew the little bus in inbound/outbound modes, and also made it turn headlights on at night. Finally, hovering over the stop on the route visualization panel shows the street names of the stop, and highlights the stop location on the map.
Many other awesome things we used.
Thanks are in order: The map is the beautiful
map tiles, via
The d3.js layer over the leaflet tiles uses this
and we used
to render the routes and the stops. (Thanks
for converting for the routes to TopoJSON.) Also thanks to: Heroku, github, and the rest of the open source world.