Map of the Week: Bike Lanes and Truck Routes in NYC
We welcome [Jeff Jenkins] to our Map of the Week series. Jenkins is a cyclist board gamer and software engineer living in New York City.
He decided to take NYC’s data on truck routes and overlayed it onto a map with bike lanes to prove that there is a need for better southbound bike lanes in central or eastern Manhattan.
We asked Jeff how he created his map and he tells us all about it here:
Choosing the Project
When I first got my CartoDB account I was really excited about how easy it would be to create visualizations. I decided that I'd try to find a project which I could use to help the New York bicycle community.
New York City publishes copious amounts of interesting data highlighting the functioning of the city. They also maintain a portal to access this data at data.cityofnewyork.us. After browsing through the transportation-related data sets I discovered map data on what NYC's truck routes were. Because of their size and the drivers' poor visibility trucks are known to be especially dangerous for cyclists.
It turned out that the data for trucks was in kml format and didn't have all of the metadata I wanted but the department of transportation has a data feeds page which has the same thing as shape files.
Trimming the Data
Since CartoDB has limits on how much data you can store it's a good idea to trim anything you don't need. It's so easy to drag the raw data back in that you aren't really losing anything. My map only dealt with Manhattan so I used the boro column in truck data to delete anything I didn't care about. Here is a before and after:
The data size went from 14MB to 2MB which leaves lots of extra space in my plan for additional visualizations. I didn't need to do it but I could have also deleted some of the many columns which I wasn't using to further reduce the data size. I also decided to leave all of Manhattan even though most of it wasn't needed since I thought the context would be useful. I also imported the NYC bike lane data but it was quite small so I didn't do any trimming.
The Visualization
I created a new visualization and created layers for each of the truck and bike tables. The most difficult part of the process turned out to be figuring out how make both of the lines visible. Since both data sets were dealing with the city streets they overlapped each other at exactly the places I wanted to call out. I played with the line opacity width and different colors but it wasn't possible to make it so that you could really see both. After a while of failing to make both visible I checked a CartoCSS reference and discovered line-offset which moves a line to the side. I added this style to my visualization and it worked perfectly:
{% highlight scss%}
truck_routes {
line-color: #B81609; line-width: 3; line-opacity: 0.8; line-offset: 3; } ##_END_REPLACE_ME_PRE_##
I also needed lines on the map denoting the southbound bike lanes. I added a manual layer to accomplish this. The button can be hard to see but it's in the menu on the right side.
Lastly I added a legend explaining what each color was. Once I had tweaked everything to my liking I published the visualization on my blog using the embed iframe option. Other than my not knowing about line-offset the whole process only took a few hours.
If you want to be part of our [Map of the Week] and create beautiful maps like this one go to CartoDB and sign up for a free account.
