Global Metro Visualization - Interactive Transit System Explorer
A web-based visualization platform that transforms GTFS transit data into interactive, animated maps showcasing metro systems from major cities worldwide
The Challenge
Public transit data remains locked in technical formats despite its potential to enhance urban understanding and mobility awareness. While transit agencies worldwide publish comprehensive GTFS (General Transit Feed Specification) datasets containing detailed route, schedule, and geographic information, these complex data structures primarily serve developers and transportation planners rather than fostering broader public engagement with urban mobility systems.
This project addresses the challenge of transforming standardized GTFS data into engaging, interactive visualizations that showcase the complexity and beauty of metro systems across major cities. The objective was to create a generic approach that could visualize any city’s transit network with minimal modification to the original datasets, maintaining data integrity while maximizing visual impact.
Currently, GTFS data is presented in highly technical CSV formats suitable for routing applications but potentially overwhelming for citizens who want to understand their city’s transit infrastructure. The challenge was clear: How can we make transit data accessible and visually compelling? How can we create a universal visualization system that works across different cities and transit agencies?
The central questions driving this project were: How can urban residents better understand the scope and complexity of their metro systems? How can we create a visualization tool that celebrates the engineering marvel of public transportation while remaining technically accurate?
Our Solution
Generic GTFS Visualization Framework
Through extensive analysis of GTFS data structures across multiple transit agencies, we developed a universal visualization approach that transforms standardized transit data into dynamic, interactive maps. Our solution centers on maintaining data integrity while creating visually compelling representations that work across different cities and metro systems with minimal customization.
Animated Transit Experience
Drawing inspiration from real-time transit tracking systems, we created an animated visualization platform that brings static route data to life. Moving train indicators (“vagons”) traverse actual route paths, creating an engaging representation of metro system operations while maintaining geographic accuracy and respecting the underlying data structure.
The solution integrates authentic GTFS data with real-time animation, providing users with an intuitive understanding of transit network complexity and geographic coverage across major metropolitan areas.
What We Built
🚇 Live Interactive Demo: Buenos Aires Metro System
🎮 Interactive Transit Visualization
Click and drag to explore • Use mouse wheel to zoom • Watch live train animations
🚇 Loading Buenos Aires Metro Visualization...
Starting p5.js canvas...
🔧 Technical Implementation: Real-time GTFS data processing with p5.js canvas animation
🎯 Features: Interactive zoom/pan • Animated train movements • Authentic route geometry
📊 Data Source: Buenos Aires SBASE GTFS feeds with live coordinate mapping
Interactive Transit Visualization Platform
We developed a sophisticated web application that transforms static GTFS transit data into dynamic, animated metro system visualizations. The platform features real-time train animations, interactive zoom and pan controls, and accurate geographic representations of major metropolitan transit networks.
Technical Implementation
The platform leverages JavaScript and p5.js framework to create an interactive canvas-based visualization that handles complex geometric data processing. Our data pipeline begins with standardized GTFS files from various transit agencies, which are processed and optimized for real-time visualization while maintaining geographic accuracy and route authenticity.
System Architecture
┌───────────────────────────────────────────────────────────────────────────┐
│ DATA SOURCES │
├─────────────────┬─────────────────┬─────────────────┬─────────────────────┤
│ Buenos Aires │ Mexico City │ New York │ Other Cities │
│ (SBASE) │ (METRO CDMX) │ (MTA) │ (Global GTFS) │
│ │ │ │ │
│ • Routes.txt │ • Agency.txt │ • Stops.txt │ • Santiago (SDC) │
│ • Shapes.txt │ • Shapes.txt │ • Trips.txt │ • Berlin (BE) │
│ • Stops.txt │ • Stop_times │ • Routes.txt │ • Gothenburg (GBG) │
│ • Stop_times │ • Calendar.txt │ • Shapes.txt │ • Standard GTFS │
│ • Trips.txt │ • Frequencies │ • Transfers │ Format │
└─────────┬───────┴─────────┬───────┴─────────┬───────┴─────────────────────┘
│ │ │
▼ ▼ ▼
┌───────────────────────────────────────────────────────────────────────────┐
│ DATA PROCESSING │
├───────────────────────────────────────────────────────────────────────────┤
│ R + gtfstools Pipeline │
│ │
│ ┌─────────────────┐ ┌──────────────────┐ ┌─────────────────────┐ │
│ │ GTFS │ │ Route │ │ Geographic │ │
│ │ Validation │ │ Processing │ │ Optimization │ │
│ │ │ │ │ │ │ │
│ │ • File Format │ │ • Shape Path │ │ • Coordinate │ │
│ │ Checking │ │ Generation │ │ Bounds Calc │ │
│ │ • Data Quality │ │ • Stop-Route │ │ • Color Mapping │ │
│ │ Control │ │ Associations │ │ • Config Generation │ │
│ └─────────────────┘ └──────────────────┘ └─────────────────────┘ │
└─────────────────────────────┬─────────────────────────────────────────────┘
│
▼
┌───────────────────────────────────────────────────────────────────────────┐
│ APPLICATION LAYER │
├───────────────────────────────────────────────────────────────────────────┤
│ JavaScript + p5.js │
│ │
│ ┌──────────────┐ ┌──────────────┐ ┌──────────────┐ ┌──────────────┐ │
│ │ Canvas │ │ Animation │ │ Interaction│ │ Config │ │
│ │ Rendering │ │ Engine │ │ Controls │ │ Management │ │
│ │ │ │ │ │ │ │ │ │
│ │ • Route │ │ • Train │ │ • Zoom/Pan │ │ • City Switch│ │
│ │ Drawing │ │ Movement │ │ • Mouse │ │ • Color │ │
│ │ • Stop │ │ • Path │ │ Controls │ │ Schemes │ │
│ │ Markers │ │ Following │ │ • Responsive │ │ • Bounds │ │
│ │ • Geography │ │ • Speed Var │ │ Design │ │ Config │ │
│ └──────────────┘ └──────────────┘ └──────────────┘ └──────────────┘ │
└─────────────────────────────┬─────────────────────────────────────────────┘
│
▼
┌───────────────────────────────────────────────────────────────────────────┐
│ DEPLOYMENT │
├───────────────────────────────────────────────────────────────────────────┤
│ │
│ ┌─────────────────────┐ ┌─────────────────────────────────┐ │
│ │ Static Web │ │ GitHub Pages │ │
│ │ Assets │ │ or Web Hosting │ │
│ │ │ │ │ │
│ │ • GTFS Data Files │ ───────> │ • Cross-Platform Access │ │
│ │ • GeoJSON Boundaries│ │ • Real-time Animation │ │
│ │ • City Config │ │ • Interactive Controls │ │
│ │ • Color Schemes │ │ • Mobile Responsive │ │
│ └─────────────────────┘ └─────────────────────────────────┘ │
│ │
│ Generic GTFS Framework │
│ (Any City ← → Minimal Configuration) │
└───────────────────────────────────────────────────────────────────────────┘
Data Integration Strategy
The application employs a robust GTFS data processing approach:
- Standardized GTFS files from major transit agencies worldwide
- R-based data pipeline using gtfstools for validation and processing
- Automated route path generation from shapes.txt coordinate sequences
- Dynamic color scheme mapping based on official transit line branding
- Geographic boundary calculation for optimal map viewport settings
Below you can see the visualizations in action across different cities:
Recorded Demo (Alternative View):
Video demonstration of the interactive Buenos Aires Subte system visualization
🛠️ Technical Implementation Showcase
💻 Core JavaScript Architecture
The BA_gtfs.js file demonstrates our generic GTFS processing framework:
// Core Animation Loop function draw() { // Clear canvas and update viewport background(30);// Draw metro routes from GTFS shapes drawRoutes(gtfsData.routes);
// Animate trains along paths updateTrains(); renderTrains(); }
Routes, shapes, stops parsed from CSV
Mouse/touch zoom, pan, real-time response
Path interpolation with authentic routes
🌎 Multi-City Implementation Examples
Mexico City Metro System:
CDMX Metro: Same framework, different GTFS dataset - demonstrating universal compatibility
Santiago de Chile Metro System:
Santiago Metro: Generic codebase adapted with minimal configuration changes
Santiago Metro system animation demonstrating real-time transit visualization
Real-time Transit Animation
The core visualization feature displays animated train cars (“vagons”) that follow actual route paths derived from GTFS shapes data. Each train moves at variable speeds along authentic geographic coordinates, creating a dynamic representation of metro system operations that reflects real-world network complexity and coverage patterns.
🔬 Development Architecture Deep Dive
📁 Project Structure & File Organization
metro-visualization/
├── 🚇 BA_gtfs.js # Buenos Aires implementation (live demo above)
├── 🏙️ CDMX_gtfs.js # Mexico City version
├── 🏔️ CHILE_gtfs.js # Santiago implementation
├── 📊 data/
│ ├── BA_routes.json # Processed Buenos Aires GTFS
│ ├── CDMX_routes.json # Mexico City GTFS data
│ └── CHILE_routes.json # Santiago transit data
├── 🎨 config/
│ ├── colors.js # City-specific color schemes
│ └── bounds.js # Geographic boundary settings
└── 🛠️ utils/
├── gtfs-processor.R # R script for GTFS conversion
└── path-optimizer.js # Route path optimizationSame core logic, different data inputs
Real-time GTFS data parsing & rendering
p5.js-powered animation engine
Interactive City Comparison
The platform enables seamless switching between different metropolitan areas, allowing users to compare transit network density, geographic coverage, and operational patterns across major cities. Each city maintains its authentic color scheme and geographic boundaries while using the same underlying visualization framework.
Capabilities We Delivered
Universal Transit Visualization Platform
The application provides comprehensive visualization capabilities designed to work with any GTFS-compliant transit dataset:
- Animated Route Networks: Real-time train movement along authentic route paths
- Interactive Map Controls: Zoom, pan, and navigation across metropolitan areas
- Multi-City Support: Seamless switching between Buenos Aires, Mexico City, Santiago, New York, and Berlin
- Geographic Accuracy: Precise coordinate mapping maintaining real-world geographic relationships
Generic GTFS Processing Framework
We designed a flexible, scalable platform that handles diverse GTFS data structures:
- Standardized Data Pipeline: R-based processing using gtfstools for validation and optimization
- Automatic Route Generation: Dynamic path creation from coordinate sequences in shapes.txt
- Color Scheme Management: Configurable line colors respecting official transit branding
- Boundary Calculation: Automatic viewport optimization based on geographic extent
Performance Optimization
The platform implements efficient rendering strategies for smooth animation:
- Canvas-based Rendering: Hardware-accelerated graphics using p5.js framework
- Optimized Animation: Variable speed trains with smooth path interpolation
- Responsive Design: Cross-platform compatibility with touch and mouse controls
- Modular Configuration: City-specific settings loaded dynamically
Innovation
Universal Transit Data Processing
We developed an innovative approach that transforms standardized transit data into compelling visual experiences while maintaining complete data integrity. The platform successfully processes any GTFS-compliant dataset with minimal configuration, creating a truly universal transit visualization solution.
Real-time Animation Integration
The application pioneers the combination of static GTFS route data with dynamic animation, creating moving representations of transit systems that reflect authentic geographic relationships and operational complexity while remaining visually engaging and technically accurate.
Scalable Multi-City Architecture
Our modular configuration system enables rapid expansion to new metropolitan areas, making the platform adaptable for any city with available GTFS data. The generic framework approach eliminates the need for custom development for each new transit system.
Project Impact
Transit Data Accessibility
Global Metro Visualization represents a successful approach to making complex transportation data accessible and visually compelling. The platform demonstrates how standardized GTFS datasets can be transformed into engaging interactive experiences that reveal the complexity and beauty of urban transit systems across different metropolitan areas.
Urban Mobility Understanding
The application contributes to broader urban planning and transportation awareness goals by providing intuitive visualizations of metro network complexity. By making transit system geography and operations visible and understandable, the platform encourages appreciation for public transportation infrastructure and urban mobility planning.
Replicable Framework
This project establishes a generic, scalable framework for visualizing any GTFS-compliant transit system, providing a model for transit agencies, urban planners, and researchers seeking to communicate complex transportation networks through interactive visualization without custom development requirements.
Our Approach: Generic GTFS processing • Real-time animation • Multi-city scalability • Minimal data modification Technology Stack: JavaScript • p5.js • R • gtfstools • Canvas Animation • GTFS Standards Project Status: Open source | Web-based deployment | Cross-platform compatibility
Interested in visualizing transit systems or creating interactive transportation data tools? This framework demonstrates how standardized GTFS data can be transformed into compelling visual experiences that celebrate urban mobility infrastructure.