An expose of the NYC Subway and its lack of accessibility using D3.js, HTML, and CSS

This project was completed as a final for CUNY The Graduate Center's DATA 73200 class. The class focused on the fundamentals of D3.js, which is a JavaScript library that allows for the manipulation and visualization of data on web pages.
We were tasked to incorporate what we learned into a complete narrative, story, or analysis based on a topic of our choosing. In our second or third ideation session in class, I decided I wanted to learn more about the New York City subway system. As mundane as public transit may sound, I find the intricacies in the routes and stops very fascinating. 

Total Stops per Line vs Number of Accessible, Non-Accessible & Somewhat Accessible Stops

The graph is a stacked bar chart and legend was created with D3.js, HTML, and CSS.

Total Stops per Line vs Number of Accessible, Non-Accessible & Somewhat Accessible Stops

The map was created with D3.js, HTML, and CSS. It also allows for the user to hover over all the stops and boroughs to learn more about them. 

Original Outline

A Few Original Sketches

Introduction

My original idea was to begin by showing the first Mnahattan subway line.

Expansion 

Next, I wanted to show growth and expansion of the line using GeoJSON and other charts.

Accessibility

Finally, I would make a point about accessibility, physically and societally.

 Data Manipulation

Sourcing data was one of the most time-intensive parts of this project. I went through dozens of sites trying to find what I was looking for, a perfect CSV with everything I could ever want to know about the subway. Obviously, that didn't happen. What I did do was start out with a base CSV, from NYC Open Data, that included subway stop name, line, latitude, longitude, and notes about its service. I then compared the data to the MTA's current list of lines and stops and made any corrections to service. Since the data was last updated in 2018, the bulk of the data was intact. The challenging bits were taking out any night service lines listed per stop. I only wanted the lines to show up that appear on the subway sign above a stop. For example, the 23rd and Broadway stop on the yellow line offers the R, W, and N at night but the sign only states R and W. So, I made sure that my data only stated R, W. Unfortunately, there weren't any fancy formulas that could do this for me so this took an hour or so. I also tried my best to combine bigger station complexes into one data point for ease of visualization on a map. For example, Manhattan's Fulton Street stop offers the 2, 3, 4, 5, A, C, J, and Z trains. In the dataset, each was separated by color into their own mini station. Location-wise within the station, this makes sense as they are all on different platforms. But, a New Yorker would refer to Fulton Street station as having all of these lines in one location and would not separate them out in conversation.

In addition to the subway data, I pulled a JSON that outlines the 5 boroughs and added other properties to each borough such as population size, median household income, area size, and the number of subway stops. I also manually pivoted data to find accessible and non-accessible stops per colored line.

Reflection

If I had more time and resources, I would want to make this project bigger and better. First, I would want to include everything I had in my original designs. I really liked the idea of showing how the subway came to be. I don't think that the average  New Yorker knows about it either. I would have loved for this project to provide multiple types of information, direct as well as thought-provoking.  Unfortunately, I didn't realize how long it would take me to build just these two visualizations. Hopefully, as I practice, I will be able to make these types of graphics in under 10 hours.

In regard to my end result, there are also changes I wish I could make if I had more time. For the bar chart, I really wanted to make each total bar the color of the Line it represents. For example, NQRW would be yellow, ABC would be blue, etc. I realize this is not traditional to a bar chart, but I believe it would assist with understanding the chart in a clear and concise way. Additionally, I didn't actually want to build a legend. I wanted to have a tooltip appear on hover but I couldn't make it work within the time I had given myself.

Finally, with the GeoJSON map, I wanted to add a few other elements. Firstly, I wish the two tooltips could be combined into one. However, I couldn't figure out how to have multiple data sources when selecting the SVG or path. The mouseover could be a little smoother as well. In the future, I would also like to learn more about positioning and centering. I feel like the map is a little off-center, but I did what I could with my knowledge and time. 

Overall, I am satisfied with how this project came out as it was my first time working on my own in D3.js. It was quite a challenge and I really enjoyed the puzzle-like process. While tedious, I enjoyed troubleshooting on my own but also working with someone more advanced than myself.  I'm looking forward to experimenting more with D3 and data visualizations.