Drawing MBTA Commuter Rail Map using their CSV and D3
After checking out the MBTA Developers Page and recently playing with D3.js, I wanted to draw the commuter rail stations and connections on a real map using Geo location data from MBTA feeds. Their Commuter Rail data page has a CSV file which lists all the stations per line with Geo coordinates, stop sequence, and much more. This is great and I can use my previous D3 example to draw lines in between all the stations, but when I started working on this, I have encountered some challenges.
I did not want to use a complete USA map with zoom into the state because that would require rendering unnecessary code (for all the other states). So, I had to find a map of Massachusetts and I wanted more detail since the state will be zoomed in. I was able to find some detailed state data but then I realized that I actually need Rhode Island as well, since one of the MBTA lines goes into Providence. So, I ended up grabbing the two states out of the 5m GeoJSON code in the link above and that worked well, but the map was still zoomed out. I found this Stackoverflow answer on D3 zooming and it has worked for my demo below.
The other major issue was around the JSON data as it contains all the information about every station stop in every direction. There are primary and secondary stops there and if you draw it all out, the map looks weird. I wanted the final SVG to look exactly like the overlay you see in the interactive street map tab here. So, before sending data to my draw lines function, I filtered the JSON and only considered Primary stations in one direction. This worked well, but the Newburyport/Rockport line actually includes the secondary stops going all the way to Newburyport. So, I filtered the JSON and did another loop in order to draw those station stops.
Here is the demo.
Related:
Subway Map Visualization jQuery Plugin
D3 Click Zooming in JSfiddle
D3 Drawing lines based on points and moving a circle on arcs
Subways of North America Image on XKCD
Meteor and D3 to generate SVG
CSS Tube Map – London Underground map with just CSS
Paris Subway Map with D3.js and SVG
Metro Maps for News with code on GitHub
