Interactive Transit Analytics Dashboard

Live Demo

Static Demo: View Dashboard

An interactive HTML presentation showcasing dashboard visualizations and insights.

Full Interactive App: Run python app.py for the complete Dash application with real-time filtering and data updates.

Project Overview

A fully interactive, real-time analytics dashboard built with Python Dash and Plotly for visualizing Toronto Transit Commission (TTC) performance metrics, ridership patterns, and delay analysis. This project demonstrates advanced data visualization, interactive web applications, and business intelligence dashboard development skills.

Live Demo

Dashboard includes:

• Real-time delay monitoring
• Route performance analytics
• Ridership trend analysis
• Interactive maps and charts
• KPI cards and metrics
• Predictive analytics visualizations

Key Features

Interactive Visualizations

• Dynamic line charts with time-series data
• Interactive maps showing route performance
• Bar charts for comparative analysis
• Heatmaps for pattern recognition
• Scatter plots for correlation analysis

User Controls

• Date range pickers
• Route/line filters
• Metric selectors
• Responsive layouts
• Export capabilities

Analytics Modules

1. Performance Dashboard: On-time performance, delays, cancellations
2. Ridership Analytics: Trends, peak times, capacity utilization
3. Route Comparison: Multi-route performance comparison
4. Predictive Insights: Forecasting and trend predictions
5. Real-Time Monitoring: Live data updates (simulated)

Tech Stack

• Framework: Dash (Plotly)
• Data Processing: Pandas, NumPy
• Visualization: Plotly Express, Plotly Graph Objects
• Styling: Dash Bootstrap Components
• Backend: Flask (built into Dash)
• Data Storage: CSV / SQLite / PostgreSQL

Project Structure

interactive-transit-dashboard/
├── app.py                      # Main dashboard application
├── callbacks.py                # Dash callback functions
├── layouts/
│   ├── __init__.py
│   ├── header.py              # Header component
│   ├── sidebar.py             # Navigation sidebar
│   ├── performance.py         # Performance dashboard layout
│   ├── ridership.py           # Ridership analytics layout
│   └── realtime.py            # Real-time monitoring layout
├── components/
│   ├── __init__.py
│   ├── kpi_card.py            # KPI metric cards
│   ├── charts.py              # Chart components
│   └── filters.py             # Filter components
├── data/
│   ├── sample_delays.csv      # Sample delay data
│   ├── sample_ridership.csv   # Sample ridership data
│   └── routes.geojson         # Route geographic data
├── utils/
│   ├── __init__.py
│   ├── data_loader.py         # Data loading utilities
│   └── calculations.py        # Metric calculations
├── assets/
│   ├── style.css              # Custom CSS
│   └── logo.png               # Dashboard logo
├── requirements.txt
└── README.md

Quick Start

Prerequisites

Python 3.8+
pip

Installation

# Clone the repository
git clone https://github.com/DanielDemoz/interactive-transit-dashboard.git
cd interactive-transit-dashboard

# Create virtual environment
python -m venv venv
source venv/bin/activate  # On Windows: venv\Scripts\activate

# Install dependencies
pip install -r requirements.txt

Run the Dashboard

# Run locally
python app.py

# The dashboard will be available at http://127.0.0.1:8050/

Deployment

# Deploy to Heroku
heroku create your-app-name
git push heroku main

# Deploy to Render, Railway, or other platforms
# See deployment guide in docs/deployment.md

Dashboard Screenshots

Performance Overview

• On-time performance by route
• Delay distribution and trends
• Service reliability metrics

Ridership Analytics

• Daily/weekly ridership trends
• Peak vs off-peak analysis
• Route popularity comparison

Real-Time Monitoring

• Live delay alerts
• Current service status
• Interactive route map

Key Metrics Displayed

Performance Metrics

• On-Time Performance (OTP): % of trips arriving within 5 min of schedule
• Average Delay: Mean delay time in minutes
• Service Reliability: % of scheduled trips completed
• Delay Frequency: Number of delays per 100 trips

Ridership Metrics

• Daily Ridership: Total passengers per day
• Peak Hour Load: Passengers during rush hour
• Capacity Utilization: % of vehicle capacity used
• Growth Rate: Month-over-month change

Financial Metrics

• Revenue per Trip: Average fare revenue
• Cost per Kilometer: Operating cost efficiency
• Farebox Recovery: % of costs covered by fares

Customization

Change Theme/Colors

# In assets/style.css
:root {
    --primary-color: #1f77b4;
    --secondary-color: #ff7f0e;
    --background-color: #f8f9fa;
    --text-color: #212529;
}

Add New Chart

# In components/charts.py
def create_custom_chart(data, filters):
    fig = px.line(
        data, 
        x='date', 
        y='metric',
        color='route',
        title='Custom Analysis'
    )
    return fig

Add New Dashboard Tab

# In layouts/custom_tab.py
def create_layout():
    return dbc.Container([
        dbc.Row([
            dbc.Col([
                # Your components here
            ])
        ])
    ])

Advanced Features

Real-Time Data Integration

# Connect to live data source
from utils.data_loader import fetch_realtime_data

@app.callback(
    Output('live-chart', 'figure'),
    Input('interval-component', 'n_intervals')
)
def update_realtime(n):
    df = fetch_realtime_data()
    return create_chart(df)

Database Connection

# Connect to PostgreSQL
import psycopg2
import pandas as pd

def load_from_db():
    conn = psycopg2.connect(DATABASE_URL)
    df = pd.read_sql_query("SELECT * FROM delays", conn)
    return df

Authentication (Optional)

# Add basic authentication
from dash_auth import BasicAuth

VALID_USERNAME_PASSWORD_PAIRS = {
    'admin': 'password'
}

BasicAuth(app, VALID_USERNAME_PASSWORD_PAIRS)

Sample Data

The dashboard includes synthetic TTC data for demonstration:

• Delays: 10,000+ delay events across all routes
• Ridership: 2 years of daily ridership data
• Routes: Geographic data for TTC subway and streetcar lines
• Schedules: Planned vs actual service times

Learning Outcomes

This project demonstrates:

✅ Data Visualization: Creating effective, interactive charts
✅ Web Development: Building responsive web applications
✅ Business Intelligence: KPI design and dashboard layout
✅ Python: Advanced Pandas and data manipulation
✅ UI/UX: User-centric design principles
✅ Deployment: Hosting production applications

Code Examples

Create KPI Card

from components.kpi_card import create_kpi_card

kpi = create_kpi_card(
    title="On-Time Performance",
    value="87.3%",
    delta="+2.5%",
    trend="up",
    icon="fa-clock"
)

Interactive Callback

@app.callback(
    Output('chart', 'figure'),
    [Input('route-dropdown', 'value'),
     Input('date-picker', 'start_date'),
     Input('date-picker', 'end_date')]
)
def update_chart(route, start_date, end_date):
    filtered_data = filter_data(route, start_date, end_date)
    fig = create_line_chart(filtered_data)
    return fig

Dynamic Filtering

filtered_df = df[
    (df['route'].isin(selected_routes)) &
    (df['date'] >= start_date) &
    (df['date'] <= end_date) &
    (df['delay_minutes'] > min_delay)
]

Performance Optimization

• Caching: Use @cache.memoize() for expensive computations
• Lazy Loading: Load data on-demand rather than upfront
• Aggregation: Pre-aggregate data for faster rendering
• Pagination: Limit data points for large datasets

Browser Support

• Chrome (recommended)
• Firefox
• Safari
• Edge
• Mobile browsers (responsive design)

License

This project is licensed under the MIT License.

Author

Daniel S. Demoz

• LinkedIn: daniel-s-demoz
• Email: brukd.consultant@gmail.com
• GitHub: @DanielDemoz

Acknowledgments

• Plotly Dash community for excellent documentation
• Toronto Open Data for inspiration
• Dash Bootstrap Components for UI elements

Future Enhancements

• Add user authentication and role-based access
• Integrate with real TTC API
• Add email/SMS alerts for service disruptions
• Implement machine learning predictions
• Add data export functionality (PDF, Excel)
• Multi-language support
• Dark mode toggle

---

This dashboard showcases advanced data visualization and business intelligence skills for real-world analytics applications.