CityLab Metrics: NYC Taxi Trip Visualization

Course: UT 402 Creative Coding

Professor: Jonathan O. Schwartz

Date: Fall 2023

Group Members: Rongyu Shen

Role: Frontend/Interaction Developer

Tools: VSCode, JavaScript, D3,js, NYC Open Data

Skills:

Javascript

D3.js

Database Manipulation

Code →

In my opinion, one of the most vital chaotic systems embedded within the urban landscape is how and where people choose to move around. Understanding the underlying cause of the behavior in this system can unlock new opportunities to upgrade existing infrastructure to better fit the needs of the people.

The aim of this project was for users to follow a story. A story of trips, public transportation, and the lively movement of millions of people in a dense urban environment. It’s meant to generate questions like “Why is this area so congested?” or “Why are most people coming from this district?” The interactive elements are supposed to allow users to develop their own urban inquiry of movement - their own story line - and follow it through the NYC districts until they reach their destination.

Creating HMW Question

During the first step of the project, we looked at some example databases and generated HWM questions based on interesting relationships we saw in the data. After making a couple of questions, we had to choose an area of focus to help guide our approach. Our group decided to pursue mobility.

Final HWM: How might we be able to visualize how New Yorkers move around NYC?

We also developed further reserach questions to help with the context of our project

  1. How do people move around NYC?

  2. What are the hotspots and patterns of the flow of traffic?

Our main objective was to create a tool that was both easy to use and informative about the urban space to the user.

Creating The Database

The data sets chosen were NYC Yellow Taxi Trips 2018 and NYC District Zones. Both datasets were pulled from NYC Open Data. JavaScript and d3.js was used to merge the databases together. Below are the steps on how the files were merged to create the final database where our visualization pulls from:

Original files and their content

Matching the ZONEID data with the PUID (Pickup ID) and DOID (Dropoff ID)

Creating an array of the information for each

Calculating the sum after creating all arrays to speed up processing time

Adding the created array's and sums back into the Zone Map unter the ZONEID

Naming the new information in the database

Choosing The Visual Structure

Choosing how we wanted to visualize the data was one challenge we faced during the ideation process. The goal was to make an easy to read map where patterns could be uncovered just by glancing at the surface, and then more in detail as the user interacts with the visualization.

How we wanted to do this went through multiple iterations. Using the Crazy 8's method, we prototyped node networks, bar charts, 3d pillars, and bubble circles. However, we felt these mediums were either too complex when deciphering trends, or too basic where further analysis through interactions were hard to incorporate.

In our final iteration, we decided to use a Choropleth map as our medium. Our data was location based, and while the previous design iterations could represent the data, our focus was on the movement of people around NYC, and a Choropleth map gave the flexibility to show the data on the surface and the ability to incorporate further user interactions.

Choosing Colors

Choosing the right colors was a major consideration. The issue was there were two types of information that needed to be seen: Incoming and Outgoing taxi trips. Our final color palette was chosen for the following reasons:

  • The colors show the intensity of the data by using cooler colors for low traffic and warmer colors for high traffic. They also use societies perceived notion of color definitions.

  • Similar but different palettes for the two types of data to show the relationship but also keeping them separate.

Tool Tip Creation

The tool tip was the first interaction element implemented and was designed to give further analysis on the different districts. Its position on the map was off to the side to not cover any of the information, and was locked in the same place to limit eye movement. In addition, the top three districts are only shown to keep the tooltip concise.

Tool Tip Creation

Clicking and Hovering mechanics were also implemented into the final design.

  • Clicking: Changed information between incoming and outgoing traffic. It also changed the color palette to represent the right information

  • Hovering: Highlights the district to make it easy to see on the map. Also displayed the tool tip.

Compromises and Future Changes

The time constraint to finish this project came very fast so we did not get a chance to fully implement everything that we wanted to. This led to us composing and prioritizing certain features over others in order to accomplish our end goal of making an interactive map where the user can follow a storyline.

That being said, we still plan on editing this project in the future and below is a list of items that are on our radar:

  • Better Zoom feature - users can zoom in but it's a bit wonky

  • Optimized tooltip feature - Current one takes too much time to find and display the data

  • Click changes legend/tooltip when switching from outgoing to incoming - Would add more relevent info to the visualization

  • Add year slider - Allow users to see how movemnet has changed through the years

  • Make 3D graph - Purely visual