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.
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.
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.