time slider and country map

app.py

@@ -1,9 +1,8 @@
 # Import packages
 from dash import Dash, html, dcc, callback, Input, Output
 import pandas as pd
-import pickle
 import plotly.express as px
-from graphs.model_market_share import create_plotly_stacked_area_chart
+from graphs.model_market_share import create_plotly_stacked_area_chart, create_plotly_world_map, create_plotly_range_slider
 from graphs.model_characteristics import create_plotly_language_concentration_chart, create_plotly_publication_curves_with_legend
 
 # Incorporate data
@@ -13,21 +12,17 @@ df = pd.read_csv('https://raw.githubusercontent.com/plotly/datasets/master/gapmi
 app = Dash()
 server = app.server
 
-# Load all pickle files in data_frames/ as loop
-with open('data_frames/model_topk_df.pkl', 'rb') as f:
-    model_topk_df = pickle.load(f)
-with open('data_frames/model_gini_df.pkl', 'rb') as f:
-    model_gini_df = pickle.load(f)
-with open('data_frames/model_hhi_df.pkl', 'rb') as f:
-    model_hhi_df = pickle.load(f)
-with open('data_frames/language_concentration_df.pkl', 'rb') as f:
-    language_concentration_df = pickle.load(f)
-with open('data_frames/download_license_cumsum_df.pkl', 'rb') as f:
-    license_concentration_df = pickle.load(f)
-with open('data_frames/download_method_cumsum_df.pkl', 'rb') as f:
-    download_method_cumsum_df = pickle.load(f)
-with open('data_frames/download_arch_cumsum_df.pkl', 'rb') as f:
-    download_arch_cumsum_df = pickle.load(f)
+# Load pre-processed data frames
+filtered_df = pd.read_pickle("data_frames/filtered_df.pkl")
+model_topk_df = pd.read_pickle("data_frames/model_topk_df.pkl")
+model_gini_df = pd.read_pickle("data_frames/model_gini_df.pkl")
+model_hhi_df = pd.read_pickle("data_frames/model_hhi_df.pkl")
+language_concentration_df = pd.read_pickle("data_frames/language_concentration_df.pkl")
+license_concentration_df = pd.read_pickle("data_frames/download_license_cumsum_df.pkl")
+download_method_cumsum_df = pd.read_pickle("data_frames/download_method_cumsum_df.pkl")
+download_arch_cumsum_df = pd.read_pickle("data_frames/download_arch_cumsum_df.pkl")
+nat_topk_df = pd.read_pickle("data_frames/nat_topk_df.pkl")
+country_concentration_df = pd.read_pickle("data_frames/country_concentration_df.pkl")
 
 TEMP_MODEL_EVENTS = {
     # "Yolo World Mirror": "2024-03-01",
@@ -96,12 +91,27 @@ fig5 = create_plotly_publication_curves_with_legend(
     download_arch_cumsum_df, ARCHITECTURE_PLOT_CHOICES, PALETTE_0
 )
 
+fig6 = create_plotly_world_map(
+    country_concentration_df, "time", "metric", "value"
+)
+
+slider = create_plotly_range_slider(
+    model_topk_df
+)
+
+slider2 = create_plotly_range_slider(
+    country_concentration_df
+)
+
 # Make global font family
 fig.update_layout(font_family="Inter")
 fig2.update_layout(font_family="Inter")
 fig3.update_layout(font_family="Inter")
 fig4.update_layout(font_family="Inter")
 fig5.update_layout(font_family="Inter")
+fig6.update_layout(font_family="Inter")
+slider.update_layout(font_family="Inter")
+slider2.update_layout(font_family="Inter")
 
 # App layout
 app.layout = html.Div(
@@ -111,7 +121,14 @@ app.layout = html.Div(
         html.Hr(),
         dcc.Tabs([
             dcc.Tab(label='Model Market Share', children=[
-                dcc.Graph(figure=fig, id='stacked-area-chart'),
+                html.Div([
+                    dcc.Graph(id='stacked-area-chart'),
+                    dcc.Graph(figure=slider, id='time-slider-stacked'),
+                ]),
+                html.Div([
+                    dcc.Graph(id='world-map-with-slider'),
+                    dcc.Graph(figure=slider2, id='time-slider'),
+                ])
             ]),
             dcc.Tab(label='Model Characteristics', children=[
                 dcc.Graph(id='language-concentration-chart'),
@@ -138,6 +155,39 @@ def update_graph(selected_metric):
         return fig4
     elif selected_metric == 'Architecture':
         return fig5
+    
+@app.callback(
+    Output('world-map-with-slider', 'figure'),
+    [Input('time-slider', 'relayoutData')]
+)
+def update_map(relayout_data):
+    if relayout_data and 'xaxis.range[0]' in relayout_data and 'xaxis.range[1]' in relayout_data:
+        start_time = pd.to_datetime(relayout_data['xaxis.range[0]']).strftime('%Y-%m-%d')
+        end_time = pd.to_datetime(relayout_data['xaxis.range[1]']).strftime('%Y-%m-%d')
+        updated_fig = create_plotly_world_map(
+            country_concentration_df, "time", "metric", "value", start_time=start_time, end_time=end_time
+        )
+        updated_fig.update_layout(font_family="Inter")
+        return updated_fig
+    else:
+        return fig6
+    
+@app.callback(
+    Output('stacked-area-chart', 'figure'),
+    [Input('time-slider-stacked', 'relayoutData')]
+)
+def update_stacked_area(relayout_data):
+    if relayout_data and 'xaxis.range[0]' in relayout_data and 'xaxis.range[1]' in relayout_data:
+        start_time = pd.to_datetime(relayout_data['xaxis.range[0]']).strftime('%Y-%m-%d')
+        end_time = pd.to_datetime(relayout_data['xaxis.range[1]']).strftime('%Y-%m-%d')
+        updated_fig = create_plotly_stacked_area_chart(
+            model_topk_df, model_gini_df, model_hhi_df, TEMP_MODEL_EVENTS, PALETTE_0,
+            start_time=start_time, end_time=end_time
+        )
+        updated_fig.update_layout(font_family="Inter")
+        return updated_fig
+    else:
+        return fig
 
 # Run the app
 if __name__ == '__main__':

graphs/model_characteristics.py

@@ -1,4 +1,5 @@
 import plotly.graph_objects as go
+import plotly.express as px
 
 def create_plotly_language_concentration_chart(
     language_concentration_df,

graphs/model_market_share.py

@@ -1,98 +1,114 @@
 import plotly.graph_objects as go
 from plotly.subplots import make_subplots
+import pandas as pd
 
 def create_plotly_stacked_area_chart(
-    model_topk_df,
-    model_gini_df,
-    model_hhi_df,
-    TEMP_MODEL_EVENTS,
-    PALETTE_0
+    model_topk_df, model_gini_df, model_hhi_df, TEMP_MODEL_EVENTS, PALETTE_0, start_time=None, end_time=None
 ):
     """
     Convert the visualization_util stacked area chart to Plotly
     """
-    
+
     # Create subplot with secondary y-axis
     fig = make_subplots(specs=[[{"secondary_y": True}]])
-    
+
     # Define metric order
-    metric_order = ['Top 1', 'Top 1 - 10', 'Top 10 - 100', 'Top 100 - 1000', 'Top 1000 - 10000', 'Rest']
-    
-    # Get unique time periods
-    time_periods = sorted(model_topk_df['time'].unique())
-    
+    metric_order = [
+        "Top 1",
+        "Top 1 - 10",
+        "Top 10 - 100",
+        "Top 100 - 1000",
+        "Top 1000 - 10000",
+        "Rest",
+    ]
+
     # Create stacked area traces
     for i, metric in enumerate(metric_order):
-        metric_data = model_topk_df[model_topk_df['metric'] == metric]
-        
+        metric_data = model_topk_df[model_topk_df["metric"] == metric]
+
         # Sort by time and get values
-        metric_data = metric_data.sort_values('time')
-        x_vals = metric_data['time']
-        y_vals = metric_data['value']
-        
+        metric_data = metric_data.sort_values("time")
+        if start_time:
+            metric_data = metric_data[metric_data["time"] >= start_time]
+        if end_time:
+            metric_data = metric_data[metric_data["time"] <= end_time]
+            
+        x_vals = metric_data["time"]
+        y_vals = metric_data["value"]
+
         # Add area trace
         fig.add_trace(
             go.Scatter(
                 x=x_vals,
                 y=y_vals,
                 name=metric,
-                mode='lines',
+                mode="lines",
                 line=dict(width=0, color=PALETTE_0[i % len(PALETTE_0)]),
-                fill='tonexty' if i > 0 else 'tozeroy',
+                fill="tonexty" if i > 0 else "tozeroy",
                 fillcolor=PALETTE_0[i % len(PALETTE_0)],  # Add opacity
-                stackgroup='one',
-                hovertemplate='<b>%{fullData.name}</b><br>' +
-                             'Time: %{x}<br>' +
-                             'Value: %{y}<extra></extra>'
+                stackgroup="one",
+                hovertemplate="<b>%{fullData.name}</b><br>"
+                + "Time: %{x}<br>"
+                + "Value: %{y}<extra></extra>",
             ),
-            secondary_y=False
+            secondary_y=False,
         )
-    
+
     # Add overlay lines
     # Gini Coefficient
-    gini_data = model_gini_df.sort_values('time')
+    gini_data = model_gini_df.sort_values("time")
+    if start_time:
+        gini_data = gini_data[gini_data["time"] >= start_time]
+    if end_time:
+        gini_data = gini_data[gini_data["time"] <= end_time]
     fig.add_trace(
         go.Scatter(
-            x=gini_data['time'],
-            y=gini_data['value'],
-            name='Gini Coefficient',
-            mode='lines',
-            line=dict(color='#6b46c1', width=3),
-            yaxis='y2',
-            hovertemplate='<b>Gini Coefficient</b><br>' +
-                         'Time: %{x}<br>' +
-                         'Value: %{y:.3f}<extra></extra>'
+            x=gini_data["time"],
+            y=gini_data["value"],
+            name="Gini Coefficient",
+            mode="lines",
+            line=dict(color="#6b46c1", width=3),
+            yaxis="y2",
+            hovertemplate="<b>Gini Coefficient</b><br>"
+            + "Time: %{x}<br>"
+            + "Value: %{y:.3f}<extra></extra>",
         ),
-        secondary_y=True
+        secondary_y=True,
     )
-    
+
     # HHI (×10)
-    hhi_data = model_hhi_df.sort_values('time')
+    hhi_data = model_hhi_df.sort_values("time")
+    if start_time:
+        hhi_data = hhi_data[hhi_data["time"] >= start_time]
+    if end_time:
+        hhi_data = hhi_data[hhi_data["time"] <= end_time]
     fig.add_trace(
         go.Scatter(
-            x=hhi_data['time'],
-            y=hhi_data['value'] * 10,  # Multiply by 10 as indicated
-            name='HHI (×10)',
-            mode='lines',
-            line=dict(color='#ec4899', width=3),
-            yaxis='y2',
-            hovertemplate='<b>HHI (×10)</b><br>' +
-                         'Time: %{x}<br>' +
-                         'Value: %{y:.3f}<extra></extra>'
+            x=hhi_data["time"],
+            y=hhi_data["value"] * 10,  # Multiply by 10 as indicated
+            name="HHI (×10)",
+            mode="lines",
+            line=dict(color="#ec4899", width=3),
+            yaxis="y2",
+            hovertemplate="<b>HHI (×10)</b><br>"
+            + "Time: %{x}<br>"
+            + "Value: %{y:.3f}<extra></extra>",
         ),
-        secondary_y=True
+        secondary_y=True,
     )
-    
+
     # Add vertical lines for events
     for event_name, event_date in TEMP_MODEL_EVENTS.items():
         fig.add_shape(
             type="line",
-            x0=event_date, x1=event_date,
-            y0=0, y1=1,
+            x0=event_date,
+            x1=event_date,
+            y0=0,
+            y1=1,
             yref="paper",
-            line=dict(color='#333333', width=2, dash='dash')
+            line=dict(color="#333333", width=2, dash="dash"),
         )
-        
+
         # Add annotation for the event
         fig.add_annotation(
             x=event_date,
@@ -101,9 +117,9 @@ def create_plotly_stacked_area_chart(
             text=event_name,
             showarrow=False,
             yshift=10,
-            font=dict(size=12)
+            font=dict(size=12),
         )
-    
+
     # Update layout
     fig.update_layout(
         autosize=True,
@@ -111,32 +127,413 @@ def create_plotly_stacked_area_chart(
         font_size=14,
         showlegend=False,  # Set to True if you want to show legend
         margin=dict(l=60, r=60, t=40, b=60),
-        plot_bgcolor='white',
-        hovermode='x unified'
+        plot_bgcolor="white",
+        hovermode="x unified",
     )
-    
-    # Update x-axis
+
+    # Update x-axis to be governed by start_time/end_time
+    xaxis_range = None
+    if start_time is not None and end_time is not None:
+        xaxis_range = [start_time, end_time]
+    elif start_time is not None:
+        xaxis_range = [start_time, None]
+    elif end_time is not None:
+        xaxis_range = [None, end_time]
+
     fig.update_xaxes(
         title_text="",
         showgrid=True,
-        gridcolor='lightgray',
-        gridwidth=1
+        gridcolor="lightgray",
+        gridwidth=1,
+        range=xaxis_range,
     )
-    
+
     # Update primary y-axis (left)
     fig.update_yaxes(
         title_text="Model Market Share",
         showgrid=True,
-        gridcolor='lightgray',
+        gridcolor="lightgray",
         gridwidth=1,
-        secondary_y=False
+        secondary_y=False,
     )
-    
+
     # Update secondary y-axis (right)
     fig.update_yaxes(
-        title_text="Concentration Indices",
-        showgrid=False,
-        secondary_y=True
+        title_text="Concentration Indices", showgrid=False, secondary_y=True
     )
+
+    return fig
+
+
+def create_plotly_world_map(
+    df, time_col="time", metric_col="metric", value_col="value", top_n_labels=10, start_time=None, end_time=None
+):
+    # Get all unique times and sort them
+    times = sorted(df[time_col].unique())
+
+    # Create aggregated data across the full time range initially
+    regions_to_exclude = [
+        "Asia",
+        "Europe",
+        "North America",
+        "South America",
+        "Africa",
+        "Oceania",
+        "Middle East",
+        "Unknown",
+        "Online",
+        "International",
+        "HF",
+    ]
+
+    # Filter out regions
+    country_data = df[~df[metric_col].isin(regions_to_exclude)].copy()
+
+    # Country code mapping
+    country_code_map = {
+        "Germany": "DEU",
+        "United States of America": "USA",
+        "China": "CHN",
+        "France": "FRA",
+        "India": "IND",
+        "Israel": "ISR",
+        "South Korea": "KOR",
+        "United Kingdom": "GBR",
+        "Switzerland": "CHE",
+        "United Arab Emirates": "ARE",
+        "Vietnam": "VNM",
+        "Singapore": "SGP",
+        "Chile": "CHL",
+        "Hong Kong": "HKG",
+        "Japan": "JPN",
+        "Canada": "CAN",
+        "Spain": "ESP",
+        "Finland": "FIN",
+        "Indonesia": "IDN",
+        "Russia": "RUS",
+        "Iran": "IRN",
+        "Belarus": "BLR",
+        "Thailand": "THA",
+        "UAE": "ARE",
+        "Argentina": "ARG",
+        "Iceland": "ISL",
+        "Poland": "POL",
+        "Sweden": "SWE",
+        "Taiwan": "TWN",
+        "Lebanon": "LBN",
+        "Algeria": "DZA",
+        "Bulgaria": "BGR",
+        "Norway": "NOR",
+        "Netherlands": "NLD",
+        "Hungary": "HUN",
+        "Estonia": "EST",
+        "Qatar": "QAT",
+        "Brazil": "BRA",
+        "Morocco": "MAR",
+        "Slovenia": "SVN",
+        "Ghana": "GHA",
+        "Uganda": "UGA",
+        "Turkey": "TUR",
+    }
+
+    country_data["country_code"] = country_data[metric_col].map(country_code_map)
+    mapped_data = country_data.dropna(subset=["country_code"])
+
+    # Create subplot with secondary plot for range slider
+    fig = make_subplots(
+        rows=2,
+        cols=1,
+        row_heights=[0.85, 0.15],
+        vertical_spacing=0.02,
+        specs=[[{"type": "geo"}], [{"type": "scatter"}]],
+    )
+
+    # Function to aggregate data for time range
+    def aggregate_time_range(start_time, end_time):
+        range_data = mapped_data[
+            (mapped_data[time_col] >= start_time) & (mapped_data[time_col] <= end_time)
+        ]
+        # Average values across time range
+        agg_data = (
+            range_data.groupby([metric_col, "country_code"])[value_col]
+            .mean()
+            .reset_index()
+        )
+        agg_data["percentage"] = agg_data[value_col] * 100
+        return agg_data.sort_values("percentage", ascending=False)
+
+    # Initial data (full range)
+    if start_time is None:
+        start_time = times[0]
+    if end_time is None:
+        end_time = times[-1]
+    initial_data = aggregate_time_range(start_time, end_time)
+    top_countries = initial_data.head(top_n_labels)
+
+    # Create hover text
+    hover_text = []
+    for _, row in initial_data.iterrows():
+        hover_text.append(
+            f"<b>{row[metric_col]}</b><br>"
+            f"Avg Downloads: {row['percentage']:.1f}% of total<br>"
+            f"Avg Value: {row[value_col]:.6f}"
+        )
+
+    # Add choropleth to first subplot
+    fig.add_trace(
+        go.Choropleth(
+            locations=initial_data["country_code"],
+            z=initial_data["percentage"],
+            text=hover_text,
+            hovertemplate="%{text}<extra></extra>",
+            colorscale=[
+                "#001219",
+                "#0a9396",
+                "#94d2bd",
+                "#e9d8a6",
+                "#ee9b00",
+                "#ca6702",
+                "#bb3e03",
+                "#9b2226",
+            ],
+            colorbar=dict(
+                title="Avg % of Total Downloads",
+                tickfont=dict(size=12, family="Inter, system-ui, sans-serif"),
+                len=0.6,
+                x=1.02,
+                y=0.7,
+            ),
+            marker_line_color="#219ebc",
+            marker_line_width=0.4,
+            geo="geo",
+        ),
+        row=1,
+        col=1,
+    )
+
+    # Country center coordinates for labels
+    country_centers = {
+        "USA": {"lat": 39.8, "lon": -98.5},
+        "CHN": {"lat": 35.8, "lon": 104.2},
+        "DEU": {"lat": 51.2, "lon": 10.4},
+        "GBR": {"lat": 55.4, "lon": -3.4},
+        "FRA": {"lat": 46.6, "lon": 2.2},
+        "JPN": {"lat": 36.2, "lon": 138.3},
+        "IND": {"lat": 20.6, "lon": 78.9},
+        "CAN": {"lat": 56.1, "lon": -106.3},
+        "RUS": {"lat": 61.5, "lon": 105.3},
+        "BRA": {"lat": -14.2, "lon": -51.9},
+        "AUS": {"lat": -25.3, "lon": 133.8},
+        "KOR": {"lat": 35.9, "lon": 127.8},
+    }
+
+    # Add initial labels using scattergeo instead of annotations
+    label_lons = []
+    label_lats = []
+    label_texts = []
+
+    for _, country in top_countries.iterrows():
+        country_code = country["country_code"]
+        if country_code in country_centers:
+            center = country_centers[country_code]
+            label_lons.append(center["lon"])
+            label_lats.append(center["lat"])
+            label_texts.append(f"{country['percentage']:.1f}%")
+
+    # Add text labels as a scattergeo trace
+    fig.add_trace(
+        go.Scattergeo(
+            lon=label_lons,
+            lat=label_lats,
+            text=label_texts,
+            mode="text",
+            textfont=dict(
+                color="#ffffff", size=13, family="Inter, system-ui, sans-serif"
+            ),
+            textposition="middle center",
+            showlegend=False,
+            hoverinfo="skip",
+            geo="geo",
+        ),
+        row=1,
+        col=1,
+    )
+
+    # Add background circles for better text visibility
+    # fig.add_trace(
+    #     go.Scattergeo(
+    #         lon=label_lons,
+    #         lat=label_lats,
+    #         mode='markers',
+    #         marker=dict(
+    #             size=20,
+    #             color='rgba(2, 48, 71, 0.9)',
+    #             line=dict(color='#8ecae6', width=1.5)
+    #         ),
+    #         showlegend=False,
+    #         hoverinfo='skip',
+    #         geo="geo"
+    #     ),
+    #     row=1, col=1
+    # )
+
+    # Update layout
+    fig.update_layout(
+        title=dict(
+            text=f"Model Downloads by Country - Time Range Analysis<br><sub>Select time range below to update map</sub>",
+            x=0.5,
+            font=dict(size=20, family="Inter, system-ui, sans-serif", color="#212529"),
+        ),
+        width=1200,
+        height=800,
+        font=dict(family="Inter, system-ui, sans-serif"),
+        plot_bgcolor="#ffffff",
+        paper_bgcolor="#ffffff",
+        margin=dict(l=0, r=120, t=100, b=60),
+    )
+
+    # Update geo layout
+    fig.update_geos(
+        showframe=False,
+        showcoastlines=True,
+        showland=True,
+        landcolor="#f8f9fa",
+        coastlinecolor="#023047",
+        oceancolor="#8ecae6",
+        projection_type="equirectangular",
+        bgcolor="#ffffff",
+    )
+
+    return fig
+
+def create_plotly_range_slider(df):
+    """
+    Creates a standalone time range slider using Plotly.
+    
+    Args:
+        df (pd.DataFrame): A DataFrame with a "time" column containing datetime data.
+        
+    Returns:
+        go.Figure: A Plotly Figure object with a functional range slider.
+    """
+    if df.empty or "time" not in df.columns:
+        return go.Figure()
+
+    times = sorted(df["time"].unique())
+
+    fig = go.Figure()
+
+    # Invisible trace just to attach slider to the x-axis
+    fig.add_trace(
+        go.Scatter(
+            x=times,
+            y=[0] * len(times),  # Dummy y-values
+            mode="lines",
+            line=dict(color="rgba(0,0,0,0)"),  # Invisible line
+            hoverinfo="skip",
+            showlegend=False
+        )
+    )
+
+    # Enable range slider
+    fig.update_layout(
+        xaxis=dict(
+            rangeslider=dict(visible=False),
+            type="date"
+        ),
+        yaxis=dict(visible=False),  # Hide y-axis since it's dummy
+        margin=dict(t=20, b=20, l=20, r=20),
+        height=100  # Compact slider-only view
+    )
+
+    return fig
+
+def create_leaderboard(df, start_time, end_time, top_n=10):
+    # Ensure datetime
+    df["time"] = pd.to_datetime(df["time"])
     
+    # Filter time range
+    mask = (df["time"] >= pd.to_datetime(start_time)) & (df["time"] <= pd.to_datetime(end_time))
+    df_filtered = df.loc[mask]
+
+    if df_filtered.empty:
+        return go.Figure()
+
+    # Top N countries
+    top_countries = (
+        df_filtered["country"]
+        .value_counts(normalize=True)
+        .mul(100)
+        .reset_index(name="% of total")
+        .rename(columns={"index": "Country"})
+        .head(top_n)
+    )
+
+    # Top N developers
+    top_developers = (
+        df_filtered["developer"]
+        .value_counts(normalize=True)
+        .mul(100)
+        .reset_index(name="% of total")
+        .rename(columns={"index": "Developer"})
+        .head(top_n)
+    )
+
+    # Top N models
+    top_models = (
+        df_filtered["model"]
+        .value_counts(normalize=True)
+        .mul(100)
+        .reset_index(name="% of total")
+        .rename(columns={"index": "Model"})
+        .head(top_n)
+    )
+
+    # Create subplot grid with 3 columns
+    fig = make_subplots(
+        rows=1, cols=3,
+        subplot_titles=("Top Countries", "Top Developers", "Top Models"),
+        specs=[[{"type": "table"}, {"type": "table"}, {"type": "table"}]]
+    )
+
+    # Add country table
+    fig.add_trace(
+        go.Table(
+            header=dict(values=list(top_countries.columns),
+                        fill_color="lightgrey", align="left"),
+            cells=dict(values=[top_countries[col] for col in top_countries.columns],
+                       fill_color="white", align="left"),
+        ),
+        row=1, col=1
+    )
+
+    # Add developer table
+    fig.add_trace(
+        go.Table(
+            header=dict(values=list(top_developers.columns),
+                        fill_color="lightgrey", align="left"),
+            cells=dict(values=[top_developers[col] for col in top_developers.columns],
+                       fill_color="white", align="left"),
+        ),
+        row=1, col=2
+    )
+
+    # Add model table
+    fig.add_trace(
+        go.Table(
+            header=dict(values=list(top_models.columns),
+                        fill_color="lightgrey", align="left"),
+            cells=dict(values=[top_models[col] for col in top_models.columns],
+                       fill_color="white", align="left"),
+        ),
+        row=1, col=3
+    )
+
+    fig.update_layout(
+        height=400,
+        showlegend=False,
+        title_text=f"Leaderboards ({start_time} → {end_time})"
+    )
+
     return fig
+