top of page

A NYC Cyclist
Map and Personal Data Guide Data  

A Website and Data Visualization for Cyclists road safety

Advanced Data Visualization INFO 696-Under the Guidance of Professor Benjamin Zweig 

Role: UX/UI Designer & Data Visualizer

Tools: Figma, Python (Pandas, GeoPandas, Matplotlib), NYC Open Data API, Google Maps API, HTML/CSS, Leaflet.js

Deployment Tool: Vercel, website access through request

Timeline: Fall 2024

Platform: Responsive Web on Multiple Platforms

Raising Concerns of NYC Cyclists

With the rise of cycling in NYC post-pandemic, cyclist safety has become a growing concern. This project is a comprehensive data visualization and predictive analytics platform designed to help cyclists make safer route decisions in real time. By aggregating and analyzing collision data, traffic congestion, and street infrastructure, the tool enables users to evaluate and compare the safety of different paths across boroughs.

Project Summary

Data Strategy

Data collection and sources

Motor Vehicle Collisions

NYC Open Data (2019-2024)

Fields used: crash date, time, location (latitude/longitude), borough, number of persons injured/killed, contributing factors, vehicle types.

 

Google Maps API

Extracted real-time congestion metrics (speed index, delays).

NYC DOT Bike Lane Inventory

Identified protected vs. unprotected bike lanes and used for contextual mapping.

1.Congestion Data(Crash Heatmap)

 

Source:

Google Maps API – Traffic Layer API

NYC Open Data
 

Fields to extract:
Layers to represent and inspect where crashes occurred.

Map Coordinates for where accidents occured from NYC Open Data

2. Crash Severity Visualization

Tool:

Plotly for graphing crash trends by severity


Data Displayed:

Bar charts showing crashes by severity (fatal,injury, property damage only) over time


User Interaction:
Slider control to narrow down specific date ranges (pre- vs.post-pandemic)


Filters to view specific crash types (e.g., cyclist-involved,pedestrian-involved)

Using Leaflet Library for crash hotspots heatmap

Crash Heatmap by Severity

Tool:

Leaflet Map Library

Color Code:

Red = High Density

Orange = Medium Density

Blue = Low Density

Three Different layers:

CartoDB positron for overview

OpenStreetMap to view Major streets and bridges

Satellite to view infrastructure factors 

Zoom in Zoom out function to display detailed Map information

Insight:

The Majority of severe crashes occurred near intersections lacking dedicated bike infrastructure

and bridges linking to Manhattan.

Screenshot 2025-05-14 at 2.37.26 AM.png
Screenshot 2025-05-14 at 2.46.02 AM.png
Screenshot 2025-05-14 at 2.46.17 AM.png

Crash Heatmap

Crash Data Visualization

Using Bar Charts to Display Different Categories of Damage and Injuries for Cyclists, Pedestrians and Property Damage during a Cyclists Accident

Data Displayed:

Bar charts showing crashes by severity (fatal,injury, property damage only) over time

Eight categories are identified related to cyclists, pedestrians and others.

User Interaction:
Slider control to narrow down specific date ranges (pre- vs.post-pandemic)

 

Toolbars for varied actions on top
Filters to view specific crash types (e.g., cyclist-involved,pedestrian-involved)

Popup Layer for user to view exact Day data

Insights:

There is a general trend of increasing accidents during summer and fall in numbers during winter.

 

While Cyclists -Property Damage account for most times, few fatal are recored but most time with an injury for both cyclists and pedestrians during an accident.

Fig 1: Initial Bar Chart, with missing data from 2022 and 2023

Screenshot 2025-05-14 at 3.00.45 AM.png

Fig 2: User can Hide or Sort Specific Category, Other-Property Damage is hidden in this figure

Screenshot 2025-05-14 at 3.01.05 AM.png

Fig 3: Slider Control to expand specific range of time

image.png

Fig 4: Interactive Display of Specific Data from Each Category on Slected Days

Screenshot 2025-05-14 at 3.07.19 AM.png

That's all for the Data Visualization, but it is actually a website to use for cyclists to determine their best route in the city and avoid potential accidents at the same time.

Landing Page

Screenshot 2025-05-14 at 3.31.16 AM.png

Route Feature

Screenshot 2025-05-14 at 3.32.02 AM.png

Data Feature

Screenshot 2025-05-14 at 3.32.15 AM.png

A Website View of the Project

  • LinkedIn
bottom of page