Introducing: The Weekendest — Dynamic Map for New York City Subway

Using Mapbox and goodservice.io’s APIs, the Weekendest provides a high-level visualization of every train’s routing in real-time.

The Weekendest provides a high-level up-to-the-minute overview of where trains are/are not running. This screenshot was taken at 11:30pm on a weeknight and shows the transition of weeknight to overnight service patterns, as well as additional service changes (e.g. no service on Broadway due to Fastrack)

The New York City subway map is quite confusing. No, not because of its inconsistencies and questionable design choices. It’s confusing because it only reflects the service it provides at its peak hours only. At other times of the day, or during weekends, it’s simply inaccurate. Even if you can remember the typical service patterns for weekends and overnight (the MTA has a somewhat helpful night map), train service rarely ever follows them because of planned service changes, when trains are re-routed to allow maintenance work to happen on this 24/7 system. Now, there’s finally a map that can show you a high-level overview of the whole system, introducing the Weekendest.

Features

The Weekendest’s goal is to provide an overview of subway service across the whole system. Given that it is a digital map and not paper, being able to interact with it is important. Not only can you can pan and zoom around the system map, you can also select each train route to highlight its service pattern at the moment.

You can select a train route to display its current routing. This is the F train’s routing overnight this past week, when it was running over the A between W 4 St and Jay St–MetroTech downtown and running local both ways between Jackson Heights–Roosevelt Av and Forest Hills–71 Av.

You can also select a station on the map to zoom in on its proximity and highlight the train routes that serve it.

A view of Queens Plaza station with the train routes you can take there, along with their next arrival times.

How it Works

In a previous blog post, I explained how goodservice.io used the real-time GTFS-RT data provided by the MTA to generate dynamic route maps per route. Using the same dataset and cross-referencing MTA’s data on stations’ longitude/latitude, I was able to plot on a map where each train route stops and connected them together. For this proof-of-concept, I was inspired by Aliza Aufrichtig, for her i-want-to-ride-an-electric-citi.bike site by the map’s simplicity, and so I used the same library of Leaflet.js and similar map theme.

Proof-of-concept for the Weekendest (October 2018)

While the proof-of-concept looked like a great starting point, there were a few issues I needed to work on. First of all, simply connecting stations together with lines was not enough. Not only do the jagged lines look unsightly, trains that run express would often be shown to be running on a completely different path than its local counterpart due to locations of the stations, which is often (but not always) not the case in real life. Secondly, the lines need to not overlap each other. Typically, up to 4 routes can run along a segment. It’s impossible to assign positions for each route ahead of time, as their placement can change and the combinations can differ because of service changes. Lastly, given that it is digital medium, we should take advantage of it and display the map differently based on user’s interactions and user’s zoom level. While Leaflet.js is very lightweight and loads very quickly, it lacks some of the interactive features I wanted.

I started looking into using Mapbox instead. I realized it can do what I wanted to do after looking at examples like Sarah Kleinman’s DC Metro Trip Planner, and Saadiq Mohiuddin’s examples of using React and Mapbox to Map Calgary Bus Routes and his BRT map.

To render the lines more accurately, I took the published shapes.txt file from MTA’s GTFS dataset and created a graph with stations connected if they are adjacent to each other. Then I incorporated a recursive path-finding algorithm to determine the path to render. As for dealing with multiple lines running concurrently, well, it’s basically the classic Computer Science coloring map problem, so I came up with an algorithm for that too. With Mapbox Studio, I was able to create a custom map that removes unnecessary labels for this context, like states and cities, and de-emphasized street names. With their JS SDK, I was able to create customized station symbols based on their stop patterns, and responsive sizes for the station names and route lines. Furthermore, I added states to allow users to select a train route or station by either clicking on the map or selecting from the sidebar, and put its context into the view.

When is the mobile app coming out?

I get this question a lot from the non-technical folks. The answer is, not for a while. I don’t have any mobile development experience, so this would be really difficult. But! You can add web apps to your home screen and iOS treats them basically like apps, anyway. So how about try that? Also, this is open source, so theoretically, you can create the app!