Upload 6 files

components/behavioral_calib.py

@@ -0,0 +1,181 @@
+"""
+Behavioral calibration visualization component.
+"""
+
+import pandas as pd
+import plotly.express as px
+import plotly.graph_objects as go
+
+from database import query
+
+
+def get_elasticity_data() -> pd.DataFrame:
+    """Get incentive elasticity curve data."""
+    sql = """
+    SELECT
+        incentive_bucket,
+        n_trips,
+        carpool_rate,
+        avg_incentive
+    FROM main_marts.metrics_elasticity
+    ORDER BY avg_incentive
+    """
+    return query(sql)
+
+
+def create_elasticity_curve(df: pd.DataFrame) -> go.Figure:
+    """Create elasticity curve visualization."""
+    if df.empty:
+        return go.Figure().add_annotation(text="No data available", showarrow=False)
+
+    fig = go.Figure()
+
+    # Main line
+    fig.add_trace(go.Scatter(
+        x=df['avg_incentive'],
+        y=df['carpool_rate'],
+        mode='lines+markers',
+        name='Carpool Rate',
+        line=dict(color='#3498db', width=3),
+        marker=dict(size=10),
+        hovertemplate='Incentive: $%{x:.2f}<br>Rate: %{y:.1%}<extra></extra>'
+    ))
+
+    # Add annotations for buckets
+    for _, row in df.iterrows():
+        fig.add_annotation(
+            x=row['avg_incentive'],
+            y=row['carpool_rate'],
+            text=row['incentive_bucket'],
+            showarrow=True,
+            arrowhead=2,
+            ax=0,
+            ay=-30
+        )
+
+    fig.update_layout(
+        title='Incentive Elasticity Curve',
+        xaxis_title='Average Incentive ($)',
+        yaxis_title='Carpool Participation Rate',
+        yaxis=dict(tickformat='.0%'),
+        height=400
+    )
+
+    return fig
+
+
+def get_model_metrics() -> dict:
+    """Get model performance metrics (placeholder)."""
+    # In production, these would come from the ML models table
+    return {
+        'auc': 0.78,
+        'rmse': 0.15,
+        'accuracy': 0.82,
+        'n_samples': 369831
+    }
+
+
+def create_model_metrics_display(metrics: dict) -> go.Figure:
+    """Create model metrics display."""
+    fig = go.Figure()
+
+    categories = ['AUC', 'Accuracy', '1-RMSE']
+    values = [metrics['auc'], metrics['accuracy'], 1 - metrics['rmse']]
+
+    fig.add_trace(go.Scatterpolar(
+        r=values,
+        theta=categories,
+        fill='toself',
+        name='Model Performance',
+        line_color='#3498db'
+    ))
+
+    fig.update_layout(
+        polar=dict(
+            radialaxis=dict(
+                visible=True,
+                range=[0, 1]
+            )
+        ),
+        title=f"Model Performance (n={metrics['n_samples']:,})",
+        height=400
+    )
+
+    return fig
+
+
+def get_feature_importance() -> pd.DataFrame:
+    """Get feature importance data (placeholder)."""
+    return pd.DataFrame({
+        'feature': ['incentive_amount', 'distance_miles', 'is_peak_hour',
+                    'hour_of_day', 'day_of_week', 'avg_speed'],
+        'importance': [0.35, 0.25, 0.15, 0.10, 0.08, 0.07]
+    })
+
+
+def create_feature_importance_chart(df: pd.DataFrame) -> go.Figure:
+    """Create feature importance bar chart."""
+    if df.empty:
+        return go.Figure().add_annotation(text="No data available", showarrow=False)
+
+    df = df.sort_values('importance', ascending=True)
+
+    fig = go.Figure(go.Bar(
+        x=df['importance'],
+        y=df['feature'],
+        orientation='h',
+        marker_color='#3498db',
+        text=df['importance'].apply(lambda x: f'{x:.1%}'),
+        textposition='auto',
+        hovertemplate='%{y}<br>Importance: %{x:.1%}<extra></extra>'
+    ))
+
+    fig.update_layout(
+        title='Feature Importance',
+        xaxis_title='Importance',
+        yaxis_title='Feature',
+        xaxis=dict(tickformat='.0%'),
+        height=400
+    )
+
+    return fig
+
+
+def create_predicted_vs_actual() -> go.Figure:
+    """Create predicted vs actual scatter plot (placeholder data)."""
+    import numpy as np
+
+    np.random.seed(42)
+    n = 100
+    actual = np.random.uniform(0, 1, n)
+    predicted = actual + np.random.normal(0, 0.1, n)
+    predicted = np.clip(predicted, 0, 1)
+
+    fig = go.Figure()
+
+    fig.add_trace(go.Scatter(
+        x=actual,
+        y=predicted,
+        mode='markers',
+        marker=dict(color='#3498db', size=8, opacity=0.6),
+        hovertemplate='Actual: %{x:.2f}<br>Predicted: %{y:.2f}<extra></extra>'
+    ))
+
+    # Perfect prediction line
+    fig.add_trace(go.Scatter(
+        x=[0, 1],
+        y=[0, 1],
+        mode='lines',
+        line=dict(color='red', dash='dash'),
+        name='Perfect Prediction'
+    ))
+
+    fig.update_layout(
+        title='Predicted vs Actual Carpool Rate',
+        xaxis_title='Actual Rate',
+        yaxis_title='Predicted Rate',
+        height=400,
+        showlegend=False
+    )
+
+    return fig

components/geo_map.py

@@ -0,0 +1,163 @@
+"""
+Geospatial map visualization component.
+"""
+
+import pandas as pd
+import plotly.express as px
+import plotly.graph_objects as go
+
+from database import query
+
+
+def get_corridor_data() -> pd.DataFrame:
+    """Get corridor location and metrics data."""
+    # Sample I-24 corridor segments
+    return pd.DataFrame({
+        'segment_id': ['seg_1', 'seg_2', 'seg_3', 'seg_4', 'seg_5'],
+        'segment_name': ['I-24 @ Briley Pkwy', 'I-24 @ Harding Pl', 'I-24 @ Downtown',
+                        'I-24 @ Shelby Ave', 'I-24 @ Spring St'],
+        'latitude': [36.08, 36.10, 36.12, 36.14, 36.16],
+        'longitude': [-86.70, -86.72, -86.75, -86.77, -86.79],
+        'avg_speed_mph': [35, 28, 22, 30, 45],
+        'congestion_level': ['Moderate', 'Severe', 'Severe', 'Moderate', 'Light'],
+        'vehicle_count': [450, 520, 580, 490, 380]
+    })
+
+
+def create_corridor_map(df: pd.DataFrame) -> go.Figure:
+    """Create interactive corridor map with Plotly."""
+    if df.empty:
+        return go.Figure().add_annotation(text="No data available", showarrow=False)
+
+    # Color scale based on speed
+    colors = []
+    for speed in df['avg_speed_mph']:
+        if speed < 25:
+            colors.append('#e74c3c')  # Red - congested
+        elif speed < 40:
+            colors.append('#f39c12')  # Orange - slow
+        else:
+            colors.append('#27ae60')  # Green - free flow
+
+    fig = go.Figure()
+
+    # Add corridor line
+    fig.add_trace(go.Scattermapbox(
+        lat=df['latitude'],
+        lon=df['longitude'],
+        mode='lines+markers',
+        line=dict(width=4, color='#3498db'),
+        marker=dict(
+            size=15,
+            color=colors,
+            symbol='circle'
+        ),
+        text=df.apply(
+            lambda r: f"{r['segment_name']}<br>Speed: {r['avg_speed_mph']} mph<br>"
+                      f"Volume: {r['vehicle_count']} veh/hr",
+            axis=1
+        ),
+        hoverinfo='text',
+        name='I-24 Corridor'
+    ))
+
+    fig.update_layout(
+        mapbox=dict(
+            style='carto-positron',
+            center=dict(lat=36.12, lon=-86.75),
+            zoom=11
+        ),
+        margin=dict(l=0, r=0, t=40, b=0),
+        title='I-24 Corridor Traffic Conditions',
+        height=500
+    )
+
+    return fig
+
+
+def create_heatmap_overlay(df: pd.DataFrame) -> go.Figure:
+    """Create density heatmap for traffic."""
+    if df.empty:
+        return go.Figure().add_annotation(text="No data available", showarrow=False)
+
+    fig = go.Figure()
+
+    fig.add_trace(go.Densitymapbox(
+        lat=df['latitude'],
+        lon=df['longitude'],
+        z=df['vehicle_count'],
+        radius=30,
+        colorscale='YlOrRd',
+        showscale=True,
+        colorbar=dict(title='Volume')
+    ))
+
+    fig.update_layout(
+        mapbox=dict(
+            style='carto-positron',
+            center=dict(lat=36.12, lon=-86.75),
+            zoom=11
+        ),
+        margin=dict(l=0, r=0, t=40, b=0),
+        title='Traffic Density Heatmap',
+        height=500
+    )
+
+    return fig
+
+
+def get_zone_stats() -> pd.DataFrame:
+    """Get statistics by zone."""
+    return pd.DataFrame({
+        'zone': ['Downtown', 'Southeast', 'East Nashville', 'Antioch'],
+        'avg_speed': [25, 35, 40, 45],
+        'carpool_rate': [0.25, 0.18, 0.15, 0.12],
+        'incentive_uptake': [0.35, 0.28, 0.22, 0.18]
+    })
+
+
+def create_zone_comparison(df: pd.DataFrame) -> go.Figure:
+    """Create zone comparison chart."""
+    if df.empty:
+        return go.Figure().add_annotation(text="No data available", showarrow=False)
+
+    fig = go.Figure()
+
+    fig.add_trace(go.Bar(
+        x=df['zone'],
+        y=df['avg_speed'],
+        name='Avg Speed (mph)',
+        marker_color='#3498db'
+    ))
+
+    fig.add_trace(go.Scatter(
+        x=df['zone'],
+        y=df['carpool_rate'] * 100,
+        name='Carpool Rate (%)',
+        yaxis='y2',
+        mode='lines+markers',
+        line=dict(color='#e74c3c', width=2),
+        marker=dict(size=10)
+    ))
+
+    fig.update_layout(
+        title='Zone Performance Comparison',
+        xaxis_title='Zone',
+        yaxis=dict(title='Speed (mph)', side='left'),
+        yaxis2=dict(title='Carpool Rate (%)', side='right', overlaying='y'),
+        height=400,
+        legend=dict(x=0.7, y=1.1, orientation='h')
+    )
+
+    return fig
+
+
+def get_legend_data() -> dict:
+    """Get legend information for map."""
+    return {
+        'colors': {
+            'Free Flow (>40 mph)': '#27ae60',
+            'Slow (25-40 mph)': '#f39c12',
+            'Congested (<25 mph)': '#e74c3c'
+        }
+    }

components/incentive_analytics.py

@@ -0,0 +1,170 @@
+"""
+Incentive analytics visualization component.
+"""
+
+import pandas as pd
+import plotly.express as px
+import plotly.graph_objects as go
+
+from database import query
+
+
+def get_incentive_funnel_data() -> pd.DataFrame:
+    """Get incentive conversion funnel data."""
+    sql = """
+    SELECT
+        incentive_type,
+        count(*) as total_offers,
+        sum(case when was_accepted then 1 else 0 end) as accepts,
+        sum(case when was_completed then 1 else 0 end) as completions
+    FROM main_marts.fct_incentive_events
+    GROUP BY incentive_type
+    """
+    return query(sql)
+
+
+def create_funnel_chart(df: pd.DataFrame) -> go.Figure:
+    """Create incentive conversion funnel."""
+    if df.empty:
+        return go.Figure().add_annotation(text="No data available", showarrow=False)
+
+    # Aggregate across types
+    totals = df[['total_offers', 'accepts', 'completions']].sum()
+
+    fig = go.Figure(go.Funnel(
+        y=['Offers', 'Accepted', 'Completed'],
+        x=[totals['total_offers'], totals['accepts'], totals['completions']],
+        textinfo="value+percent initial",
+        marker=dict(color=['#3498db', '#2ecc71', '#27ae60'])
+    ))
+
+    fig.update_layout(
+        title='Incentive Conversion Funnel',
+        height=400
+    )
+
+    return fig
+
+
+def get_spend_by_type_data() -> pd.DataFrame:
+    """Get spending by incentive type."""
+    sql = """
+    SELECT
+        incentive_type,
+        sum(actual_payout) as total_spend,
+        count(*) as n_events,
+        avg(actual_payout) as avg_payout
+    FROM main_marts.fct_incentive_events
+    WHERE was_completed
+    GROUP BY incentive_type
+    ORDER BY total_spend DESC
+    """
+    return query(sql)
+
+
+def create_spend_chart(df: pd.DataFrame) -> go.Figure:
+    """Create spending breakdown chart."""
+    if df.empty:
+        return go.Figure().add_annotation(text="No data available", showarrow=False)
+
+    fig = px.pie(
+        df,
+        values='total_spend',
+        names='incentive_type',
+        title='Spending by Incentive Type',
+        color_discrete_sequence=px.colors.qualitative.Set2
+    )
+
+    fig.update_traces(
+        textposition='inside',
+        textinfo='percent+label',
+        hovertemplate='%{label}<br>$%{value:,.2f}<br>%{percent}<extra></extra>'
+    )
+
+    fig.update_layout(height=400)
+
+    return fig
+
+
+def get_effectiveness_data() -> pd.DataFrame:
+    """Get incentive effectiveness metrics."""
+    sql = """
+    SELECT
+        incentive_type,
+        count(*) as n_completed,
+        sum(actual_payout) as total_cost,
+        avg(actual_payout) as avg_cost
+    FROM main_marts.fct_incentive_events
+    WHERE was_completed
+    GROUP BY incentive_type
+    """
+    return query(sql)
+
+
+def create_effectiveness_chart(df: pd.DataFrame) -> go.Figure:
+    """Create cost effectiveness chart."""
+    if df.empty:
+        return go.Figure().add_annotation(text="No data available", showarrow=False)
+
+    fig = go.Figure()
+
+    fig.add_trace(go.Bar(
+        x=df['incentive_type'],
+        y=df['avg_cost'],
+        name='Avg Cost per Completion',
+        marker_color='#3498db',
+        text=df['avg_cost'].apply(lambda x: f'${x:.2f}'),
+        textposition='auto',
+        hovertemplate='%{x}<br>Avg Cost: $%{y:.2f}<extra></extra>'
+    ))
+
+    fig.update_layout(
+        title='Average Cost per Completed Incentive',
+        xaxis_title='Incentive Type',
+        yaxis_title='Average Cost ($)',
+        height=400
+    )
+
+    return fig
+
+
+def get_uptake_trend_data() -> pd.DataFrame:
+    """Get incentive uptake trend over time."""
+    sql = """
+    SELECT
+        incentive_type,
+        final_outcome,
+        count(*) as count
+    FROM main_marts.fct_incentive_events
+    GROUP BY incentive_type, final_outcome
+    """
+    return query(sql)
+
+
+def create_uptake_chart(df: pd.DataFrame) -> go.Figure:
+    """Create uptake by outcome chart."""
+    if df.empty:
+        return go.Figure().add_annotation(text="No data available", showarrow=False)
+
+    fig = px.bar(
+        df,
+        x='incentive_type',
+        y='count',
+        color='final_outcome',
+        title='Incentive Outcomes by Type',
+        barmode='stack',
+        color_discrete_map={
+            'COMPLETED': '#27ae60',
+            'ACCEPTED_PENDING': '#f39c12',
+            'REJECTED': '#e74c3c',
+            'OFFERED_PENDING': '#95a5a6'
+        }
+    )
+
+    fig.update_layout(
+        xaxis_title='Incentive Type',
+        yaxis_title='Count',
+        height=400
+    )
+
+    return fig

components/realtime_metrics.py

@@ -0,0 +1,197 @@
+"""
+Real-time metrics KPI component.
+"""
+
+import pandas as pd
+import plotly.graph_objects as go
+
+from database import query
+
+
+def get_kpi_data() -> dict:
+    """Get current KPI values."""
+    # In production, these would be computed from the latest data
+    return {
+        'vmt_reduction_pct': 12.5,
+        'avg_occupancy': 1.85,
+        'peak_shift_pct': 8.3,
+        'incentive_efficiency': 2.15,
+        'carpool_rate': 0.23,
+        'avg_speed_improvement': 15.2
+    }
+
+
+def create_kpi_gauge(value: float, title: str, suffix: str = '%',
+                     min_val: float = 0, max_val: float = 100,
+                     thresholds: list = None) -> go.Figure:
+    """Create a gauge chart for a KPI."""
+    if thresholds is None:
+        thresholds = [max_val * 0.3, max_val * 0.7, max_val]
+
+    fig = go.Figure(go.Indicator(
+        mode="gauge+number",
+        value=value,
+        number={'suffix': suffix},
+        title={'text': title, 'font': {'size': 14}},
+        gauge={
+            'axis': {'range': [min_val, max_val]},
+            'bar': {'color': "#3498db"},
+            'steps': [
+                {'range': [min_val, thresholds[0]], 'color': "#e74c3c"},
+                {'range': [thresholds[0], thresholds[1]], 'color': "#f39c12"},
+                {'range': [thresholds[1], max_val], 'color': "#27ae60"}
+            ],
+            'threshold': {
+                'line': {'color': "black", 'width': 2},
+                'thickness': 0.75,
+                'value': value
+            }
+        }
+    ))
+
+    fig.update_layout(
+        height=200,
+        margin=dict(l=20, r=20, t=40, b=20)
+    )
+
+    return fig
+
+
+def create_sparkline(values: list, title: str) -> go.Figure:
+    """Create a sparkline chart."""
+    fig = go.Figure(go.Scatter(
+        y=values,
+        mode='lines',
+        fill='tozeroy',
+        line=dict(color='#3498db', width=2),
+        fillcolor='rgba(52, 152, 219, 0.2)'
+    ))
+
+    fig.update_layout(
+        title=dict(text=title, font=dict(size=12)),
+        height=100,
+        margin=dict(l=10, r=10, t=30, b=10),
+        xaxis=dict(visible=False),
+        yaxis=dict(visible=False),
+        showlegend=False
+    )
+
+    return fig
+
+
+def create_metric_card(value: float, label: str, delta: float = None,
+                       format_str: str = '.1f', prefix: str = '',
+                       suffix: str = '') -> go.Figure:
+    """Create a metric card with optional delta."""
+    delta_ref = None
+    if delta is not None:
+        delta_ref = {'reference': value - delta, 'relative': True}
+
+    fig = go.Figure(go.Indicator(
+        mode="number+delta" if delta is not None else "number",
+        value=value,
+        number={
+            'prefix': prefix,
+            'suffix': suffix,
+            'valueformat': format_str
+        },
+        delta=delta_ref,
+        title={'text': label, 'font': {'size': 14}}
+    ))
+
+    fig.update_layout(
+        height=150,
+        margin=dict(l=20, r=20, t=40, b=20)
+    )
+
+    return fig
+
+
+def get_trend_data() -> dict:
+    """Get trend data for sparklines."""
+    # Placeholder - would be computed from time series
+    import numpy as np
+    np.random.seed(42)
+
+    return {
+        'vmt': list(np.cumsum(np.random.randn(20)) + 100),
+        'speed': list(45 + np.cumsum(np.random.randn(20) * 0.5)),
+        'carpool': list(0.2 + np.cumsum(np.random.randn(20) * 0.01))
+    }
+
+
+def render_kpi_dashboard():
+    """Render KPI dashboard layout."""
+    import gradio as gr
+
+    kpis = get_kpi_data()
+    trends = get_trend_data()
+
+    with gr.Column():
+        gr.Markdown("## Key Performance Indicators")
+
+        with gr.Row():
+            with gr.Column(scale=1):
+                gr.Plot(
+                    value=create_kpi_gauge(
+                        kpis['vmt_reduction_pct'],
+                        'VMT Reduction',
+                        '%', 0, 25
+                    )
+                )
+            with gr.Column(scale=1):
+                gr.Plot(
+                    value=create_kpi_gauge(
+                        kpis['avg_occupancy'],
+                        'Avg Occupancy',
+                        '', 1, 3,
+                        [1.5, 2.0, 3.0]
+                    )
+                )
+            with gr.Column(scale=1):
+                gr.Plot(
+                    value=create_kpi_gauge(
+                        kpis['peak_shift_pct'],
+                        'Peak Shift',
+                        '%', 0, 20
+                    )
+                )
+
+        with gr.Row():
+            with gr.Column(scale=1):
+                gr.Plot(
+                    value=create_metric_card(
+                        kpis['incentive_efficiency'],
+                        'Cost per VMT Reduced',
+                        prefix='$',
+                        format_str='.2f'
+                    )
+                )
+            with gr.Column(scale=1):
+                gr.Plot(
+                    value=create_metric_card(
+                        kpis['carpool_rate'] * 100,
+                        'Carpool Rate',
+                        suffix='%',
+                        format_str='.1f'
+                    )
+                )
+            with gr.Column(scale=1):
+                gr.Plot(
+                    value=create_metric_card(
+                        kpis['avg_speed_improvement'],
+                        'Speed Improvement',
+                        suffix='%',
+                        format_str='.1f'
+                    )
+                )
+
+        gr.Markdown("### Trends")
+
+        with gr.Row():
+            with gr.Column(scale=1):
+                gr.Plot(value=create_sparkline(trends['vmt'], 'VMT Trend'))
+            with gr.Column(scale=1):
+                gr.Plot(value=create_sparkline(trends['speed'], 'Speed Trend'))
+            with gr.Column(scale=1):
+                gr.Plot(value=create_sparkline(trends['carpool'], 'Carpool Trend'))

components/simulation_compare.py

@@ -0,0 +1,168 @@
+"""
+Simulation comparison visualization component.
+"""
+
+import pandas as pd
+import plotly.express as px
+import plotly.graph_objects as go
+
+from database import query
+
+
+def get_scenario_list() -> list[str]:
+    """Get list of available scenarios."""
+    sql = """
+    SELECT DISTINCT scenario_name
+    FROM main_marts.fct_simulation_runs
+    ORDER BY scenario_name
+    """
+    df = query(sql)
+    return df['scenario_name'].tolist() if not df.empty else []
+
+
+def get_scenario_comparison_data() -> pd.DataFrame:
+    """Get scenario comparison metrics."""
+    sql = """
+    SELECT
+        scenario_name,
+        n_agents,
+        treatment_avg_speed,
+        baseline_avg_speed,
+        speed_improvement_pct,
+        vmt_reduction_pct,
+        peak_reduction_pct,
+        treatment_spend
+    FROM main_marts.fct_simulation_runs
+    """
+    return query(sql)
+
+
+def create_scenario_comparison_chart(df: pd.DataFrame) -> go.Figure:
+    """Create scenario comparison bar chart."""
+    if df.empty:
+        return go.Figure().add_annotation(text="No data available", showarrow=False)
+
+    fig = go.Figure()
+
+    metrics = ['speed_improvement_pct', 'vmt_reduction_pct', 'peak_reduction_pct']
+    colors = ['#3498db', '#2ecc71', '#e74c3c']
+    names = ['Speed Improvement', 'VMT Reduction', 'Peak Reduction']
+
+    for metric, color, name in zip(metrics, colors, names):
+        fig.add_trace(go.Bar(
+            x=df['scenario_name'],
+            y=df[metric],
+            name=name,
+            marker_color=color,
+            text=df[metric].apply(lambda x: f'{x:.1f}%'),
+            textposition='auto',
+            hovertemplate='%{x}<br>%{y:.1f}%<extra></extra>'
+        ))
+
+    fig.update_layout(
+        title='Scenario Performance Comparison',
+        xaxis_title='Scenario',
+        yaxis_title='Improvement (%)',
+        barmode='group',
+        height=400
+    )
+
+    return fig
+
+
+def create_cost_effectiveness_chart(df: pd.DataFrame) -> go.Figure:
+    """Create cost effectiveness comparison."""
+    if df.empty:
+        return go.Figure().add_annotation(text="No data available", showarrow=False)
+
+    # Calculate cost per % improvement
+    df = df.copy()
+    df['cost_per_vmt_pct'] = df['treatment_spend'] / df['vmt_reduction_pct'].clip(lower=0.1)
+
+    fig = go.Figure()
+
+    fig.add_trace(go.Scatter(
+        x=df['treatment_spend'],
+        y=df['vmt_reduction_pct'],
+        mode='markers+text',
+        marker=dict(
+            size=20,
+            color=df['speed_improvement_pct'],
+            colorscale='Viridis',
+            showscale=True,
+            colorbar=dict(title='Speed Imp. %')
+        ),
+        text=df['scenario_name'],
+        textposition='top center',
+        hovertemplate='%{text}<br>Spend: $%{x:,.0f}<br>VMT Reduction: %{y:.1f}%<extra></extra>'
+    ))
+
+    fig.update_layout(
+        title='Cost vs. VMT Reduction by Scenario',
+        xaxis_title='Total Spend ($)',
+        yaxis_title='VMT Reduction (%)',
+        height=400
+    )
+
+    return fig
+
+
+def create_baseline_treatment_comparison(df: pd.DataFrame, scenario: str = None) -> go.Figure:
+    """Create baseline vs treatment comparison for a scenario."""
+    if df.empty:
+        return go.Figure().add_annotation(text="No data available", showarrow=False)
+
+    if scenario:
+        df = df[df['scenario_name'] == scenario]
+
+    if df.empty:
+        return go.Figure().add_annotation(text="Scenario not found", showarrow=False)
+
+    row = df.iloc[0]
+
+    fig = go.Figure()
+
+    categories = ['Avg Speed (mph)', 'VMT (scaled)', 'Peak Demand (scaled)']
+    baseline = [row['baseline_avg_speed'], 100, 100]  # Normalized
+    treatment = [
+        row['treatment_avg_speed'],
+        100 - row['vmt_reduction_pct'],
+        100 - row['peak_reduction_pct']
+    ]
+
+    fig.add_trace(go.Bar(
+        name='Baseline',
+        x=categories,
+        y=baseline,
+        marker_color='#95a5a6'
+    ))
+
+    fig.add_trace(go.Bar(
+        name='Treatment',
+        x=categories,
+        y=treatment,
+        marker_color='#3498db'
+    ))
+
+    fig.update_layout(
+        title=f'Baseline vs Treatment: {scenario or "All Scenarios"}',
+        yaxis_title='Value',
+        barmode='group',
+        height=400
+    )
+
+    return fig
+
+
+def get_metrics_summary(df: pd.DataFrame) -> dict:
+    """Get summary metrics across all scenarios."""
+    if df.empty:
+        return {}
+
+    return {
+        'avg_speed_improvement': df['speed_improvement_pct'].mean(),
+        'avg_vmt_reduction': df['vmt_reduction_pct'].mean(),
+        'avg_peak_reduction': df['peak_reduction_pct'].mean(),
+        'total_spend': df['treatment_spend'].sum(),
+        'n_scenarios': len(df)
+    }

components/traffic_flow.py

@@ -0,0 +1,183 @@
+"""
+Traffic flow visualization component.
+"""
+
+import pandas as pd
+import plotly.express as px
+import plotly.graph_objects as go
+
+from database import query
+
+
+def get_speed_heatmap_data() -> pd.DataFrame:
+    """Get data for speed heatmap."""
+    sql = """
+    SELECT
+        extract(hour from hour_bucket) as hour,
+        extract(dow from hour_bucket) as day_of_week,
+        avg(avg_speed_mph) as avg_speed
+    FROM main_marts.fct_corridor_flows
+    GROUP BY 1, 2
+    ORDER BY 2, 1
+    """
+    return query(sql)
+
+
+def create_speed_heatmap(df: pd.DataFrame) -> go.Figure:
+    """Create speed heatmap visualization."""
+    if df.empty:
+        return go.Figure().add_annotation(text="No data available", showarrow=False)
+
+    # Pivot for heatmap
+    pivot = df.pivot(index='day_of_week', columns='hour', values='avg_speed')
+
+    day_names = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
+
+    fig = go.Figure(data=go.Heatmap(
+        z=pivot.values,
+        x=[f"{h}:00" for h in range(24)],
+        y=[day_names[int(d)] for d in pivot.index],
+        colorscale='RdYlGn',
+        colorbar=dict(title='Speed (mph)'),
+        hovertemplate='%{y} %{x}<br>Speed: %{z:.1f} mph<extra></extra>'
+    ))
+
+    fig.update_layout(
+        title='Average Speed by Hour and Day',
+        xaxis_title='Hour of Day',
+        yaxis_title='Day of Week',
+        height=400
+    )
+
+    return fig
+
+
+def get_hourly_volume_data() -> pd.DataFrame:
+    """Get hourly traffic volume data."""
+    sql = """
+    SELECT
+        extract(hour from hour_bucket) as hour,
+        time_period,
+        sum(vehicle_count) as total_vehicles,
+        avg(avg_speed_mph) as avg_speed
+    FROM main_marts.fct_corridor_flows
+    GROUP BY 1, 2
+    ORDER BY 1
+    """
+    return query(sql)
+
+
+def create_hourly_volume_chart(df: pd.DataFrame) -> go.Figure:
+    """Create hourly volume bar chart."""
+    if df.empty:
+        return go.Figure().add_annotation(text="No data available", showarrow=False)
+
+    fig = go.Figure()
+
+    # Add bars for each time period
+    colors = {'AM_PEAK': '#e74c3c', 'PM_PEAK': '#e67e22', 'OFF_PEAK': '#27ae60'}
+
+    for period in df['time_period'].unique():
+        period_df = df[df['time_period'] == period]
+        fig.add_trace(go.Bar(
+            x=period_df['hour'],
+            y=period_df['total_vehicles'],
+            name=period.replace('_', ' ').title(),
+            marker_color=colors.get(period, '#3498db'),
+            hovertemplate='Hour: %{x}<br>Vehicles: %{y:,}<extra></extra>'
+        ))
+
+    fig.update_layout(
+        title='Traffic Volume by Hour',
+        xaxis_title='Hour of Day',
+        yaxis_title='Total Vehicles',
+        barmode='stack',
+        height=400,
+        showlegend=True
+    )
+
+    return fig
+
+
+def get_congestion_timeline_data() -> pd.DataFrame:
+    """Get congestion timeline data."""
+    sql = """
+    SELECT
+        hour_bucket,
+        corridor_id,
+        avg_speed_mph,
+        level_of_service
+    FROM main_marts.fct_corridor_flows
+    ORDER BY hour_bucket
+    """
+    return query(sql)
+
+
+def create_congestion_timeline(df: pd.DataFrame) -> go.Figure:
+    """Create congestion timeline chart."""
+    if df.empty:
+        return go.Figure().add_annotation(text="No data available", showarrow=False)
+
+    fig = go.Figure()
+
+    fig.add_trace(go.Scatter(
+        x=df['hour_bucket'],
+        y=df['avg_speed_mph'],
+        mode='lines',
+        name='Speed',
+        line=dict(color='#3498db', width=2),
+        fill='tozeroy',
+        fillcolor='rgba(52, 152, 219, 0.2)',
+        hovertemplate='%{x}<br>Speed: %{y:.1f} mph<extra></extra>'
+    ))
+
+    # Add threshold lines
+    fig.add_hline(y=55, line_dash="dash", line_color="green",
+                  annotation_text="Free Flow (55 mph)")
+    fig.add_hline(y=30, line_dash="dash", line_color="orange",
+                  annotation_text="Congested (30 mph)")
+    fig.add_hline(y=15, line_dash="dash", line_color="red",
+                  annotation_text="Severe (15 mph)")
+
+    fig.update_layout(
+        title='Speed Over Time',
+        xaxis_title='Time',
+        yaxis_title='Average Speed (mph)',
+        height=400,
+        yaxis=dict(range=[0, 80])
+    )
+
+    return fig
+
+
+def render_traffic_flow_tab():
+    """Render the traffic flow tab content."""
+    import gradio as gr
+
+    with gr.Column():
+        gr.Markdown("## Traffic Flow Analysis")
+        gr.Markdown("Real-time and historical traffic patterns on I-24 corridor")
+
+        with gr.Row():
+            with gr.Column(scale=2):
+                heatmap_data = get_speed_heatmap_data()
+                heatmap_plot = gr.Plot(
+                    value=create_speed_heatmap(heatmap_data),
+                    label="Speed Heatmap"
+                )
+
+        with gr.Row():
+            with gr.Column():
+                volume_data = get_hourly_volume_data()
+                volume_plot = gr.Plot(
+                    value=create_hourly_volume_chart(volume_data),
+                    label="Hourly Volume"
+                )
+            with gr.Column():
+                timeline_data = get_congestion_timeline_data()
+                timeline_plot = gr.Plot(
+                    value=create_congestion_timeline(timeline_data),
+                    label="Congestion Timeline"
+                )
+
+    return heatmap_plot, volume_plot, timeline_plot