From CS 294-10 Visualization Sp10

Jump to: navigation, search



I would like to create an interactive visualization that tells the story of riders commuting on the BART trains. I would like to include things like where commuters are traveling from and to during the different times of day. And information like if their reason for traveling, age, gender, if they sit or stand, etc. I hope that this would give users an understanding of riding trends and of their fellow BART passengers from, to and between any of the stations.


BART recently completed a survey of its riders with questions like: "what station did you get on?", "are you riding from home?", "did you sit or stand?". They have released this information on their website, and I have also emailed the survey takers to get more of the raw data. I would like to display routes that people take from station to station, as well as some information about those travelers.


I imagine this visualization overlaid on the BART map showing all of the stations. Users would be able to select a station or pair of stations and see travel information to and from those stations. Users could also filter the information to just show all travelers commuting to and from work, or see which stations generally have the fewest seats available during weekday rush.

I plan to create the entire visualization using protovis in javascript.

Finding information about a particular station

A simple task that the user will be able to do is find information about a station of his/her choosing. The user would accomplish this by simply selecting the station from the BART map. It would then display some information about that station. There could also be color coded connections between stations that show travel volume from the current station to that station.

Information about travelers between two stations

The user could select two stations and then see information about the commuters between those two points.

Possible other features

I think it would also be nice if the visualization supported click based queries like double clicking on the percentage of male riders altered all the figures to reflect the male passengers only. Or to see all the commuters who are traveling for sporting events.


I think that the traditional BART map is the best way to show this data. Firstly, the station map is the view of BART that the majority of people are familiar with since it is posted in all stations. Also, since the information is about certain location and relationships between locations, it makes sense to display it on top of those locations.

Final Implimentation

I was in contact with some people at BART who seemed like they would get me the ridership loads broken down by time, but they never got back to me in the end. Instead, I found ridership data for the MUNI with the number of people getting on and off at every stop during 6 different times of day, so I decided to modify my original design to use this data. I decided that I would like to represent the load between two adjacent stations with a line whose width shows the number of people, similar to the famous Minard visualization of Napoleons army. All of this information is overlaid on the traditional MUNI map.

If you click on one of the line letters in the lower left of the map, the ridership load data will be overlaid on the line. You can also toggle on and off the different time periods that make up this data with the buttons above the large letters, by default, they all start on. If you mouse over the line, you will see the exact numbers, and lastly, if you mouse over the tiny circles that represent the stations, it will display the stations name.

Changes between FInal Design and Storyboard

The biggest changes is that I used MUNI data instead of BART since it was more detailed in terms of the load at different time periods. Since I switched to this data, I did not have the BART survey figures which tell the gender, age, reason for traveling, etc, so I could not incorporate that into the final design. Instead, I focused more on the ridership figures. Also, since the MUNI data was split up by route, and the BART data was split by station, clicking on the entire MUNI route made more sense than clicking on the station.



This is an html page with javascript written in protovis.

Development Process

The final design took me about 17 hours to implement. The process was difficult in part because I did not have a good html and javascript IDE; I was using a text editor, so catching errors was only possible by running the project. Though, I've worked a lot in Java, this was my first time working in javascript, so there was a bit of a learning curve. Also, protovis was difficult to master and there was not sufficient documentation on their website.

[add comment]
Personal tools