‘Tis the season to revisit and update some of our past projects. You may remember the map from November 2011 showing 24 hours of GPS location data from MBTA buses, colored according to their speeds. (A local adaptation of maps made by the venerable Eric Fischer once upon a time.)
The cool thing about the existence of such a map in the first place is that the data behind it are live and constantly published. It’s the same data that has helped you catch the bus on time thanks to apps built around it. Every minute it’s something new, so why limit mapping to a single snapshot in time? I’ve learned better ways to automate this mapping since making that first map, so with a bit of code we can sit back and let the maps draw themselves as time goes on.
Starting today, we’ll keep an archive of daily bus location/speed maps, and also maintain more of a live map that shows the most recent data. The latter is a web map that you can pan and zoom, and it’s updated every hour. It shows either the most recent three hours—so you can look at different times of day and see, for example, the difference between rush hour and late night—or the full 24 hours of the previous day.
As the collection of archived maps grows, you can find a particular day’s map at a URL of this format:
https://bostonography.com/bus/archive/mbta-bus-YYYY-MM-DD.jpg
(e.g., https://bostonography.com/bus/archive/mbta-bus-2013-05-29.jpg)
The most recent day’s map will always be at:
https://bostonography.com/bus/archive/yesterday.jpg
Meanwhile, check out the web map, and discuss!
Details for nerds
Design: The design and concept of the maps are essentially the same as the older map. They are partly meant to convey overall patterns of MBTA bus service and allow comparison over time, and partly meant to be pretty pictures.
Color: Unlike the original map, these are more true to the traffic light metaphor commonly used in traffic maps. I wanted to stick with this because it’s fairly well planted in most of our brains, and further because the colors are all vibrant (unlike proper sequential color schemes), which is important in an aesthetic piece like this. Red-yellow-green is a big problem for color blind people, however. Thanks to some tips from Twitter peers, I worked with colors that vary in levels of blue. Viewed through the helpful tool Color Oracle the colors can be distinguished, although obviously they’re not great.
Technical: We hit the NextBus data feed frequently and save bus locations to a database. The database keeps a rolling 24 hours of data, so old records are deleted as new ones arrive. Image rendering is done by some pretty simple PHP scripts that grab the data, string the points together into lines based on vehicle ID, calculate distances and speeds, then draw thousands of lines either on top of a street map image (for the static, archived maps) or on blank map tiles (for the web map). The code is available on GitHub, with the caveat that it represents an easy way of doing this, not necessarily a good way. Improvements welcome, especially if I can understand them!
Base map: The street map underneath the bus lines uses OpenStreetMap data and was a quick design in TileMill. In the web map, the tiles are served using this thing.
Pingback: Boston Weekly Roundup: Live MBTA Bus Speeds & More!
You ought to produce a poster of this.
Love this idea. As a color blind person (together with something like 10% of all men), I can say that the map is useless. I appreciate you’ve used tools to adjust the colors for us, but it didn’t work. Red/green maps, charts, and visualizations are used everywhere because they’re supposedly instantly intuitive, but you have to realize that, for us, it’s the exact opposite. The most common form of color blindness is called red-green, if that gives you any jndication of hiq frustrating this is. Your map conveys literally NO information. What’s worse, there’s no way for us to make it usable. I really, really want to see what you’ve done, but you’ve given me no choice.
I would suggest that everyone would also immediately understand red=slow, blue=fast, which would read well for color blind people. Anything but red/green.
Thanks for your feedback, Erik. It’s comforting in an unfortunate way, as it confirms my suspicion that there’s no way to win with colors here. Red and green are bad for color blind people, but red and blue (which I used in the original map) received complaints for not making sense: blue is understood to mean “slow” apparently, or at the very least it’s no more easily understood than any other totally arbitrary color scheme.
The color blindness simulation tools suggest that these colors can be distinguished (red and yellow being more difficult than red and green, in fact), but clearly this isn’t true, at least not for all individuals. I hope that in time traffic maps can break away from the red-yellow-green traffic light metaphor so that we don’t have to make sacrifices one way or the other.
Nifty. I wonder if it could be adapted to show the mendacity of politicians in real time. Imagine if every politician were required to wear an ultra-miniature polygraph, which would report to a central server every time a lie was detected. Then each politician’s mendacity index could be displayed on a website in real time.
Pingback: Curioso mapa diario de las velocidades de los autobuses que recorren Boston | Teknófilo
Really interesting map and idea. I always thought it would be interesting to mesh bus travel time data with weather data, then you could average the travel times for certain weather (rain, snow, sunny, etc) and have a rough estimate of delays when said weather happens.
Love the look of these, especially https://bostonography.com/wp-content/uploads/2011/11/mbta_1104_labels.jpg . Do you happen to have any to have these in higher resolution, 15,000×15,000 ppi? Wanted to print my own poster, for personal use of course.
Thanks,
-Dom
Pingback: Your Favorite Traffic Map is Lying to You - Joshua Stevens
Amazing. Would be neat to see this applied to other cities like mine (Vancouver, Canada)… The data is out there: TransLink Open API page – http://developer.translink.ca