Visualizing MBTA Data source code now available

We’re happy to announce that the un-minified JavaScript and stylesheets that power mbtaviz.github.io are now available online.  The sources are available under the MIT license from the github repository that powers the main website.  Check out the readme in the repository for more information here.

When we launched the website a month ago we didn’t expect much.  The project was interesting to us having both lived around the Boston area and being frequent riders of the T, but the website has reached people outside of our bubble and the interest from the online community has been great.  Several people have reached out for the source code and we’ve spent a little time adding comments and trying to better organize the code base.  This page walks through some of the different sections and rationale for what we have put online.

All of the JavaScript files and the Less stylesheets are available under the MIT license, you are free to use them under the terms of that license.  Several pieces of code in the repository are not available under this license including the README.md file, main web page and images.  These are available for you to use under github’s terms of service which are summarized here: https://help.github.com/articles/open-source-licensing, essentially you are free to view and fork this repository.  Feel free to read all of the files to get an understanding of how the website is organized and how the visualizations and the content are linked together.  The actual report on mbtaviz.github.io is still under copyright by the original authors.  Part of the reasoning for this is we have not decided in what direction we want to take this project so we have licensed some parts conservatively.  We hope people can explore and benefit from the code that’s available.

The codebase itself is broken up into several large JavaScript files where each file represents a section of the website, possibly including several visualizations.  There are several other supporting utilities that are used by the visualizations that are located in other JavaScript files.  Each visualization also has a corresponding Less stylesheet that defines the styles specific to that visualization.  The first thing you’ll notice from looking at the source code is that most of the visualizations are quite complicated.  The basic ideas started out simple but refinements and adding interactions slowly made the code base more complicated.  Many of the interactions are effective because they are so tightly integrated with the visualizations themselves and this also increases the complexity of the codebase.

The raw data is also available on dropbox for you to download and experiment with.  There are two files, one is the cleaned and organized realtime data feed that was captured for the month of February and the other is the station entry and exit data for the month of February.  The realtime data is used on the ‘The Trains,’ ‘How People and Trains Affect Each Other,’ and ‘Your Commute’ visualizations and contains the per minute entries for the subway and commuter rail.  The station entries and exits is released with permission from the MBTA and contains per minute entries and exits for stations on the red, blue, green, silver and orange lines that have turnstiles.  This data is used on the ‘The People’ and ‘How People and Trains Affect Each Other’ sections of the report.  We also provide the processed data that’s fed into the visualizations and some information about the formatting of this data.  The utilities that transform the raw data into the files used by the visualizations are not available at this time.

The github wiki has an outline of the data format and a small write up for each visualization, be sure to look that over before diving in.  Also checkout the README.md file on the github repo.  It’s been a great to build this visualization and we hope you find these resources useful, if you build something based off of this code be sure to let us know so we can point others to your work.

Mike and Brian

Advertisement