001 Active Development

NYC Urban Data Visualization

A real-time 3D visualization platform that transforms New York City's complex urban data into an explorable, spatial experience—revealing patterns in transportation, density, and infrastructure that traditional charts and maps cannot capture.

Timeline 16 weeks, Fall 2024
Role Product Designer & Developer
Tools Three.js, D3.js, React, Figma
Status Active Development

Project Overview

Hero Demonstration

A cinematic overview of the complete visualization system, showcasing depth perception, camera navigation, and the dynamic "pulse" of New York City's urban systems.

Bird's-Eye Perspective

Top-down view optimized for analyzing congestion patterns, geographic clustering, and transit corridor intensity across the city.

Taxi Movement Layer

Demand-driven taxi flow patterns visualized alongside fixed subway infrastructure, revealing the relationship between flexible and permanent transit systems.

Project Context

The Challenge

New York City generates massive amounts of urban data daily—subway ridership, taxi movements, building permits, demographic shifts—but this data typically exists in isolated datasets that are difficult to understand holistically.

Traditional 2D maps and data tables fail to capture the complexity and interconnectedness of urban systems. They flatten spatial relationships, hide temporal patterns, and make it nearly impossible to understand how different city systems interact with each other.

The Opportunity

How might we visualize NYC's urban systems in a way that reveals patterns invisible in traditional formats? The goal was to create a visualization platform that could transform abstract data into spatial understanding while maintaining high performance and intuitive usability.

Key Question

How can 3D visualization make urban data more accessible and reveal insights that 2D representations miss?

Target Users

Urban planners, data analysts, researchers, journalists, and curious citizens interested in understanding city dynamics.

Research & Data Foundation

Data Source Analysis

I conducted extensive research into NYC's open data ecosystem to identify the most valuable and reliable data sources:

  • NYC Open Data Portal: 1M+ building footprints with height data, 472 subway station locations, and comprehensive demographic census data by census tract
  • MTA Real-Time Feeds: Live subway and bus positions, schedule adherence, and ridership statistics across all transit lines
  • Taxi & Limousine Commission: 200M+ annual trip records including pickup/dropoff locations, times, and fare data
  • Department of City Planning: Zoning classifications, land use patterns, and urban development permits

Technical Research

Early prototyping revealed several critical technical challenges that shaped the architecture:

  • Performance at scale: Rendering 1M+ building polygons in real-time required GPU optimization techniques
  • Data layer management: Supporting multiple simultaneous visualizations without frame rate degradation
  • 3D Navigation UX: Creating intuitive camera controls that don't disorient users unfamiliar with 3D interfaces
  • Cross-device compatibility: Ensuring responsive performance across desktop, tablet, and mobile devices
  • Data processing pipelines: Converting diverse data formats into optimized 3D geometries

Design & Development Process

Information Architecture

I developed a layered approach to data visualization that allows users to progressively explore complexity without overwhelming them:

Layer 01

Base Geographic Layer

3D building geometry establishing NYC's physical form and spatial context. Includes accurate building heights and footprints for all five boroughs.

Layer 02

Data Overlay System

Color-coded visualizations mapping demographic, transit, or economic data onto the geographic base. Users can toggle between different data themes.

Layer 03

Temporal Animation

Time-based visualizations showing movement patterns, daily cycles, and long-term evolution. Includes playback controls and time scrubbing.

Layer 04

Interactive Detail View

Drill-down capabilities for exploring specific neighborhoods, transit routes, or data points with contextual information panels.

Interaction Design

Navigation in 3D space requires careful consideration to balance exploratory freedom with guided discovery. I designed a multi-modal control system:

  • Orbital camera controls: Intuitive mouse/touch-based rotation, zoom, and pan with momentum physics for natural movement
  • Landmark-based navigation: Quick-jump buttons for key locations (Manhattan, Brooklyn Bridge, Central Park, etc.) with smooth animated transitions
  • Data layer controls: Toggle panel for switching between visualization modes, adjusting color scales, and filtering data ranges
  • Timeline interface: Scrubber and playback controls for exploring temporal patterns across different time scales (hourly, daily, seasonal)
  • Search functionality: Address and location search with automatic camera positioning

Visual Development Process

2D reference exploration
Phase 1: 2D Foundation

Initial 2D studies to establish visual hierarchy, color theory, and data density principles before translating to 3D space.

Focus: Readability and visual clarity at high data density
Phase 2: Motion Studies

2D animation prototypes testing information rhythm, annotation timing, and what elements remain legible during camera movement.

Focus: Temporal pacing and dynamic readability
NYC 3D base model
Phase 3: 3D Base Model

Complete NYC building model serving as the spatial foundation for all data overlays. Optimized geometry with level-of-detail system for performance.

Focus: Accurate spatial relationships, depth perception, and scalability

Transportation Layer Analysis

MTA Subway Network

Comprehensive visualization of all subway lines operating simultaneously, revealing system-wide congestion patterns, bottlenecks, and network behavior throughout the day.

Use case: Macro-level transit planning and capacity analysis
Taxi Demand Patterns

Real taxi trip data showing demand-driven "desire lines" across the city, highlighting activity hotspots and temporal demand surges in contrast to fixed subway infrastructure.

Use case: Understanding flexible transit needs and service gaps

Key Insights from Movement Data

The transportation layer visualizations reveal several important urban patterns:

  • Infrastructure vs. Demand: Fixed subway routes show consistent patterns, while taxi data reveals demand misalignment
  • Temporal Patterns: Morning/evening peaks with distinct business vs. nightlife geographies
  • Service Gaps: High taxi demand in subway-poor areas suggests expansion opportunities
  • Network Congestion: Line convergence points expose systemic bottlenecks

Technical Implementation

Technology Stack

The platform is built with modern web technologies, carefully selected for performance, maintainability, and cross-platform compatibility:

Three.js + WebGL

Core 3D rendering engine with custom GLSL shaders for efficient data visualization. Handles geometry generation, lighting, and camera systems.

React

UI framework managing application state, user controls, and data layer toggles. Integrates with Three.js using React Three Fiber.

D3.js

Data processing, scale generation, and color mapping. Handles CSV parsing, data transformation, and statistical calculations.

Web Workers

Off-main-thread processing for heavy data operations, geometry generation, and calculations to maintain 60fps UI responsiveness.

Performance Optimization Strategies

Rendering millions of data points in real-time required sophisticated optimization techniques:

  • Level-of-Detail (LOD) System: Dynamically reduces geometric complexity based on camera distance—distant buildings render as simple boxes while near ones show full detail
  • Frustum Culling: Only renders buildings and data points visible within the camera's view frustum, dramatically reducing GPU load
  • Instanced Rendering: Reuses identical geometries (buildings, transit markers) with GPU instancing, reducing draw calls by 95%
  • Texture Atlasing: Combines multiple textures into single atlas to minimize texture switching and state changes
  • Spatial Indexing: Octree data structure for efficient spatial queries and collision detection
  • Progressive Loading: Loads data in priority order—base geometry first, then progressively adds data layers

Data Pipeline Architecture

The system processes and transforms raw city data through a multi-stage pipeline:

  • Ingestion: Automated scripts fetch and cache data from NYC Open Data API endpoints
  • Cleaning: Validates coordinates, removes outliers, and standardizes formats across different data sources
  • Transformation: Converts lat/long to 3D coordinates, generates building geometries from footprints, and aggregates transit data
  • Optimization: Simplifies geometries, generates LOD levels, and compresses data for web delivery
  • Indexing: Creates spatial indexes and pre-computes common queries for real-time performance

Results & Key Learnings

Current Achievements

  • Performance: Successfully rendering 100,000+ building polygons at consistent 60fps on mid-range hardware
  • Usability: Intuitive camera controls validated through testing with 10+ users across different experience levels
  • Data Integration: Fully functional pipeline processing and visualizing 5+ distinct data sources simultaneously
  • Responsiveness: Adaptive design working smoothly across desktop, tablet, and high-end mobile devices
  • Visual Quality: Cinematic rendering quality with proper lighting, shadows, and atmospheric effects

Active Development Roadmap

  • Temporal Animations: Implementing day/night cycles, seasonal weather patterns, and historical data playback with 24-hour time compression
  • Advanced Filtering: Granular controls for data range selection, demographic segmentation, and custom query building
  • Storytelling Mode: Guided tours with narrated sequences highlighting specific urban phenomena (e.g., "Morning Commute Patterns," "The 2019 L Train Shutdown Impact")
  • Mobile Optimization: Touch-optimized controls, reduced polygon counts, and progressive enhancement for mobile devices
  • Collaboration Features: Shareable camera positions, annotation tools, and export capabilities for presentations
  • Additional Data Layers: Crime statistics, property values, tree canopy coverage, and air quality measurements

Key Lessons Learned

Less is More in Data Visualization: Early versions attempted to visualize too many data dimensions simultaneously, resulting in visual noise and cognitive overload. Through iteration, I learned the critical importance of progressive disclosure—showing users one clear layer at a time while making deeper exploration optional and intuitive.

Performance as a Feature: Smooth 60fps performance isn't just technical polish—it's essential to the user experience. Any frame rate drops break immersion and make the visualization feel sluggish. Extensive optimization work (LOD, culling, instancing) proved as important as the visual design itself.

3D Navigation is Hard: Users unfamiliar with 3D environments need careful onboarding. Adding landmark-based "teleport" navigation and gentle constraints (preventing camera from going underground) significantly improved usability testing results.

Context is Everything: Raw data visualization without context is just pretty colors. Adding contextual information (neighborhood names, transit line labels, statistical comparisons) transformed the tool from an interesting demo into something truly useful for understanding the city.

Next Project FeedbackNow All Projects