路嘉锋/Jiafeng Lu
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.
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
Fig 2: User can Hide or Sort Specific Category, Other-Property Damage is hidden in this figure
Fig 3: Slider Control to expand specific range of time
Fig 4: Interactive Display of Specific Data from Each Category on Slected Days
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.
