🚉 interactive NYC subway map that adjusts distance based on travel time
JavaScript Python HTML
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
schedules
.DS_Store
.gitignore
CNAME
OneHour.svg
OneHourWithoutLabel.svg
README.md
assets.sketch update assets Dec 8, 2017
generate_routes_json.py
google_transit.zip
gtfs_json.js
gtfs_json.py
howitworks.html
index.html mobile Dec 8, 2017
map.js
mapgif.gif
og.png
routing.js work Dec 7, 2017
subway.js
virtual_rider.js

README.md

NYC Travel Time Map

Animation

How does it work?

The main page is index.html, but most of the code is in map.js. map.js uses d3.js to render the map based on JSON data generated by a couple Python scripts.

If you'd like to set this up yourself, you'll need to unzip the google_transit.zip file into this directory, then run python3 generate_routes_json.py and python3 gtfs_json.py to generate the required subway.js and gtfs_json.js files. These are required by virtual_rider.js, which implements Djiksta-like algorithm for simulating a rider's journey from a starting stop throughout the system. virtual_rider.js is invoked by map.js whenever a stop is clicked, and the results are used to shift the distance of each stop away from the clicked stop.

Adapting to another city

If your city's transit system provides data in the GTFS format, you can probably get this map working fairly well for it. Here's a rough set of steps, which may be incomplete:

  1. Download and unzip the gtfs data, and place the folder (rename it google_transit if it's not called that already).

  2. Use Python 3 to run generate_routes_json.py This generates a file called subway.json, which you'll need.

  3. Use Python 3 to run gtfs_json.py — this generates a new copy of the schedules/ folder and its contents.

Feel free to post an issue if you have any questions!