TU Wien • 193.166 Visualisierung (Vis2) • Final Project

Direction-Based Pattern Mapping of NYC Taxi Trips

This project reproduces the methodology of Yao et al. on the NYC Yellow Taxi dataset using H3 hexagonal spatial aggregation and interactive D3.js visualizations. The aim is to reveal spatial interaction characteristics by encoding movement magnitude and travel distance into direction-based hexagonal glyphs.

H3 resolution 8 (138 active hexagons) 6 directional bins Interactive D3.js Paper-faithful FIX4 view Overview flow map

Open Live Demo Open Report (PDF) View GitLab Repository

Note: Please open the interactive demo via a web server (local or hosted). Direct file access (file://) may prevent JSON files from loading due to browser security restrictions.

Method

We discretize NYC into H3 hexagons (resolution 8) and aggregate trips per hexagon. For each hexagon, movements from pickup to dropoff are binned into six directions and summarized with magnitude and distance statistics. The resulting directional summaries are rendered as a direction-based pattern glyph.

Spatial unit: H3 hexagon (about ~1 km at resolution 8 in NYC), 138 active cells after filtering.
Direction binning: trips are classified into six compass directions (e.g., N, NE, E, ...).
Magnitude: encoded by grayscale (higher magnitude → darker gray).
Distance: encoded by a sequential OrRd scheme; optional percentile caps (p95/p98/p100) reduce outlier influence.

Demo

The live demo is provided as a single-file launcher with multiple tabs (views): a main interactive view, a paper-faithful reproduction (FIX4), and an overview flow map.

Filtering: adjust the minimum trips threshold and select a direction.
Interaction (FIX4 tab): click a hexagon to display its flows:
- Blue arrows: outgoing flows from the selected hexagon to dropoff locations.
- Green arrows: incoming flows toward the selected hexagon (arrow segment shown at the midline to reduce clutter).
Presentation support: story presets and export options are included in the demo.

Open Live Demo

Screenshots

Key views of the interactive system.

Paper-faithful direction-based pattern map (FIX4 view).

Main interactive direction pattern map with filtering and story modes.

Overview flow map showing a 1% OD sample and spatial context.

If an image does not show up, verify the filenames in site/assets/ match screen1.png, screen2.png, screen3.png.

Data

The preprocessing pipeline produces the following files loaded by the browser:

hex_directions_real.json — per-hex directional aggregates (138 active hexagons), including boundaries, centers, and six directional summaries used by the pattern maps.
trips_sample.json — a 1% OD sample used by the overview visualization to show transparent trip flows and study area context.
trips_sample_with_hex.json — a 1% OD sample enriched with pickup/dropoff H3 hex IDs, enabling click-to-inspect incoming/outgoing flows for a selected hexagon.
nyc_boundary.geojson — NYC borough boundaries used as the basemap outline in the overview map.

How to Run (Local)

Start a local web server from the project root folder (C:\Users\Mehran\viz), then open the project website:

cd C:\Users\Mehran\viz
py -m http.server 8001

http://localhost:8001/site/

Keep the terminal open while viewing the demo. On Windows, use py if python is not recognized.