vbb-commute-visualizer

An interactive commute visualization tool for Berlin public transit (VBB). Configure your own route and visualize train connections with transfers.

Quick Start

1. Copy the example config:

   cp config.example.json config.json

2. Configure your route - Edit config.json with your station IDs:

   {
     "route": {
       "from": { "id": "900210007", "name": "Your Start Station" },
       "to": { "id": "900120004", "name": "Your End Station" }
     }
   }

   Find station IDs at v6.vbb.transport.rest/locations

3. Generate the schedule:

   npm run update

4. View - Open index.html in a browser

Features

• Direction Toggle: Switch between outbound (Hin) and return (Rück) routes
• Three Visualization Modes:
  • Fahrzeit: Horizontal bar chart showing journey duration breakdown
  • Zeitstrahl: Timeline view with live "now" marker
  • Mobil: Vertical layout for mobile devices
• Real-time Updates: Live clock marker, auto-refresh on hour change
• Journey Breakdown: Train segments, transfer times, S-Bahn connections

Configuration

Copy config.example.json to config.json and set your stations:

Field	Description
route.from.id	VBB station ID for start
route.from.name	Display name for start station
route.to.id	VBB station ID for destination
route.to.name	Display name for destination

Project Structure

├── config.json           # Your route configuration
├── config.example.json   # Template for configuration
├── index.html            # Generated visualization (deploy this)
├── template.html         # HTML template for development
├── src/
│   ├── styles.css        # Styles
│   └── app.js            # Application logic
├── scripts/
│   └── updater.js        # Fetches VBB data, generates index.html
└── .github/workflows/
    └── update.yaml       # Daily schedule update

Usage

npm run update   # Fetch VBB data and generate index.html
npm run dev      # Open template.html for local development

Deployment

The generated index.html is self-contained (CSS/JS inlined). Deploy to any static host:

• GitHub Pages: Push to repo, enable Pages in Settings
• Netlify/Vercel: Connect repo or drag-drop index.html
• S3: aws s3 cp index.html s3://bucket/

Automated Updates (GitHub Actions)

GitHub Actions runs daily at 03:00 UTC to refresh schedule data.

Setup

1. Go to Settings → Secrets and variables → Actions
2. Add a secret named ROUTE_CONFIG with your config JSON:

   {"route":{"from":{"id":"900210007","name":"Your Start"},"to":{"id":"900120004","name":"Your End"}}}

3. Enable Settings → Actions → General → Workflow permissions → Read and write

The workflow handles API failures gracefully by keeping existing data.

Data Source

Schedule data from VBB REST API. Fetches journeys for 5:00-23:00 in 2-hour windows.