Demo Video
Visualization explanation
See above in the demo video section for demonstration on our visualization.
Data Analysis
The dataset used in this project is the MBTA Rail Ridership, available on the official MBTA website. This comprehensive dataset offers an intricate overview of ridership data encompassing all MBTA subway lines. It furnishes detailed information for each specific stop on every line, including the average count of passenger flow and more detailed information like ons and offs for each line. Our dataset contains mainly attribute data types, including both categorical and quantitative attribute types. Notably, it comprises data from various seasons, yet for the sake of consistency and to avoid pandemic-related disruptions, we specifically selected Fall 2019 data, representing the latest non-pandemic period available which we believe best mirrors the ridership status for current MBTA lines.
The steps for the data preprocessing were:
1. Downloaded raw data in csv from the web (MBTA_Rail_Ridership.csv) and deleted irrelevant columns that we didn’t want to get raw json file (data.json)
2. Grouped and calculated the average flow, ons, and offs based on the subway line and time period. The calculated data is saved into json file preprocessed_data.json
3. Load preprocessed_data.json into js file to be visualized.
All the data files we used in js are uploaded in the data folder. All the data processing code can be found in dataloader.js.
Task Analysis
Our domain tasks for this project are as follows:
1. What is the estimated passenger flow distribution for each subway line at this time period of the day? (analytic task: summarize, search task: explore, analyze task: discover)
2. Utilizing a time table, how does the passenger flow distribution change throughout the different time periods of the day? (analytic task: summarize, search task: explore, analyze task: enjoy)
Goals for first domain task:
- Show the passenger flow at various times for all the lines on the MBTA.
- Clearly show the user the general distribution of passenger numbers for each line.
- Quickly find general information on each MBTA rail to see which ones are busy at what specific times.
- Show users trends on passenger flows for each MBTA rail from the visualization.
Goals for second domain task:
- Shows user overall trend of passenger flow using timetable
- Users can explore various trends amongst each MBTA line using the timetable
- Utilization of a timetable provides a more enjoyable experience for users at navigating the visualization
- Enhance the interactivity of your visualizations through the implementation of a brushing and linking technique. This method allows for the establishment of connections between multiple visualizations by applying a highlighting effect. Simultaneously, adapt the content of the associated bar chart to reflect the selections made via brushing.
- Incorporate mouseover events to reveal in-depth details from the dataset. Positioning the cursor over a data point or a bar triggers a display of comprehensive information, offering users a deeper understanding of the data they are examining. This interactive feature not only enriches the user experience but also serves as a tool for detailed data analysis, making the insights more accessible and meaningful.
Design Process
Early Sketches:
In the bar-graph sketch above, we chose to use lines for the marks and each bar(line) represents a subway line. The channels used are vertical lengths, horizontal positions, and colors. We chose to use vertical lengths so that the user could easily distinguish the passenger volume for each line and see which line has the least or greatest volume. Additionally, we chose horizontal positions to represent the different subway lines and colors to relate to the names of the subway lines.
In the line graph sketch above, we chose lines and points for the marks. We chose lines to represent each subway line and each point on the line to represent the different times of the day. Our design choice for this was so that the user could easily see the passenger flow across different time periods of the day easily. Our color decision aligns with our rationale for its usage in the bar-graph sketch.
Final Sketch:
From our previous beginning sketches, our design choices remained consistent with what we described previously within our final sketch drawings (shown above). We kept the same channel and marks for both the line and bar graph and our justifications for both remain the same.
Conclusion
Our visualization effectively portrays the passenger flow across each MBTA line during various times of the day. We achieved this through a linked timetable, line chart, and bar graph, enabling users to discern specific trends across the lines. For future enhancements, our project aims to incorporate all commuter rail lines and comprehensively detail all stations along each line.
Acknowledgments
List here where any code, packages/libraries, text, images, designs, etc. that you leverage come from.
- D3: Data-Driven Documents by Mike Bostock.
- Pure CSS responsive "Fork me on GitHub" ribbon by Chris Heilmann.