Skip to content
A Javascript (p5.js) project visualizes NYC Subway and Taxi data
JavaScript HTML CSS
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
20171204_2100
readme
signs
.DS_Store
MtaShape.js
MtaStation.js
README.md
Stations.csv
Traffic.js
Train.js
ic_keyboard_arrow_down_white_48px.svg
ic_schedule_white_48px.svg
ic_subway_station.png
index.html
main.js
shapes.txt
stops.txt
style.css
trips.json

README.md

The Data Visualization of NYC Traffic

A Javascript (p5.js) project visualizes NYC Subway and Taxi data.

Data Source

Taxi Data

Due to the difficulties of getting realtime traffic data, we found an example from Deck.gl , which is a visual library made by Uber. One of the example recorded the route coordinates of the taxi in a certain time span. Accordingly, we took the data from the example to be our traffic data to represent the traffic speed.

  • The data is in trips.json

Subway Data

For the subway data, MTA provides realtime position data for all the trains. Unfortunately, it is not in JSON format. It is in a data format called GTFS instead. GTFS stands for_General Transit Feed Specification_, which is made by Google. It uses with protocol buffer to encode the data feed into a form that is even lighter than JSON format. We found a Python solution from GTFS Realtime Downloader that can decode the GTFS file into JSON format.

  • The train position data is in the folder 20171204_2100
  • Subway station position data is in Station.csv
  • Subway routes for every line is in shapes.txt and stops.txt

Implementation

SETUP

The first thing is to set the map. Our project uses Mapbox as the base, and we use Mappa.js to call Mapbox and connect it to p5. Next, load data for traffic, subway stations, subway routes, and subway GTFS data.

DATA ANALYSIS

  • To convert the raw data into class objects, I use some simple regular expression techniques to get and match what I want.
  • To find out the information from GTFS data, I create several hash tables to look up train id and route id.
  • Sort and trim the train data to make sure the chronological issues.
  • Sort and trim the route data to not drawing similar lines.
  • Calculate the moving speed of trains and taxis in each frame.
You can’t perform that action at this time.