Map Hacking NYCT Subway Station Conditions, Part I

There’s probably a name for someone who takes the data from someone’s map and creates a whole new map based on it because they thought the first map didn’t do the data justice. I’m sure the name is not pleasant and I’m also sure it applies to me.

After hearing about the Citizens Budget Commission interactive map of NYCT subway station conditions, I decided to check it out. It’s a decent use of Tableau for data visualization, but as a general tool for information visualization, Tableau lacks a lot in how it displays spatial features. In this case, the CBC probably ran into the limitation on how many layers you can show on one map, which is why they only show stations and not the lines connecting them. To see how a station ranks, you have to either click on it, or use the slider to filter.

The original Citizens Budget Commission's interactive NYCT Subway Conditions visualization, available at

The original Citizens Budget Commission’s interactive NYCT Subway Conditions visualization using Tableau, available at

Overall, this is an acceptable way of viewing the data, but I thought I might be able to do it a little better. To CBC’s credit, this data is too good to be locked into a subpar platform.

So I downloaded the data from Tableau and went to work. The first step was figuring out the data columns. It seems they had to put in a lot of hacks to get the visual display they were looking for, including vertical bars to represent the number of structural components in a state of good repair and those that weren’t for their pop-up. This is just one of the things you have to do when you’re not coding your own solution.

From there, it was as simple as dragging and dropping the data into CartoDB and starting to style the visualization, adding the subway routes from a project I recently did looking at transit sheds in New York City. I then added the visualization to the interactive map template I created a few weeks ago and started working on the overlays. I created an information box and linked to the original visualization.

I then noticed the search functionality by subway routes in the original. Without the line segments, it’s a little hard to see, but it’s a nice piece of functionality. I decided to implement this with my visualization, which proved to be the second most difficult part of the project. The most difficult was the graph. I tried a few solutions and ended up coding a custom solution in D3.js. Getting the functionality I wanted took some playing around with the CartoDB API and getting more acquainted with jQuery. You can see the visualization here.

I’m not trying to make fun of the Citizens Budget Commission or in any way downplay their work putting this data together. It’s obvious they put a lot of time and resources into the Tableau map they created. This is important information in the debate over MTA capital financing and this visualization is just a part of a much larger report that details the issues in more detail. I recognize that JavaScript, HTML, and CSS aren’t easy things to learn for those without a technical background, but having a custom map opens up a world of opportunities for making the data come alive for users. Platforms like CartoDB make this task much easier and easier to get started creating these kind of custom interactive graphics.

As readers become more accustomed to the interactive graphics style that’s proliferating across online news sites, organizations wanting to get their data visualizations in front of people are going to have to adopt this style of presentation. Far more people will see the visualization than will take the time to read the report. The visualization has to communicate the story of the data in a clear and concise way. I don’t see a lot of the tools like Tableau or ESRI’s ArcGIS Online being able to do this as easily as advertised or in as sophisticated a way as customers may like. Like it or not, JavaScript seems to be the data visualization language of the future and the way in which data, whether from an academic report or an article in Buzzfeed, is communicated.

In part II, I’ll be detailing the steps in designing and coding this map, including samples. In the meantime, feel free to checkout the code on Github. I’ll be teaching many of the techniques that went into getting the data and styling it during my open data class at Pratt Institute that starts this Saturday (September 12th).

Disclaimer: I’m a CartoDB partner, but this project had no official connection to CartoDB other than the use of their excellent mapping platform and tools.

5 thoughts on “Map Hacking NYCT Subway Station Conditions, Part I

  1. Minor quibble; would it be possible to change the best and worst categories for SGR to something that isn’t red-green? It’s a bit difficult to read as a color-blind person.

  2. The pop-up window that gives information for each station states:
    But the legend in the right hand corner states: “% Structural
    Components in SGR”

    Are you showing components *not* in SGR or components in SGR?

Leave a Reply to datapolitan Cancel reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s