move legends

app.py

@@ -23,6 +23,9 @@ nat_topk_df = pd.read_pickle("data_frames/nat_topk_df.pkl")
 country_concentration_df = pd.read_pickle("data_frames/country_concentration_df.pkl")
 author_concentration_df = pd.read_pickle("data_frames/author_concentration_df.pkl")
 model_concentration_df = pd.read_pickle("data_frames/model_concentration_df.pkl")
+derived_country_concentration_df = pd.read_pickle("data_frames/derived_country_concentration_df_rolling.pkl")
+nat_gini_df = pd.read_pickle("data_frames/nat_gini_df.pkl")
+nat_hhi_df = pd.read_pickle("data_frames/nat_hhi_df.pkl")
 
 # Configurations
 TEMP_MODEL_EVENTS = {
@@ -76,10 +79,46 @@ ARCHITECTURE_PLOT_CHOICES = {
     "period": "W",
 }
 
-# Create initial figures
+metric_order = [
+    'USA', 'China', 'Germany', 'France', 'International / Online', 
+    'Asia', 'Middle East', 'Rest of Europe', 'South America', 'UK',
+    'Africa', 'Other', "User",
+]
+
+palette = [
+            "#3870f2",
+            "#e74c3c",  # Green (Top 10-100)  # Red (Top 1%)
+            "#f39c12",  # Orange (Top 1-10%)
+            "#3498db",  # Blue (Top 100-1000)
+            "#7C2A50",
+            "#9467bd", 
+            "#8c564b", 
+            "#e377c2", 
+            "#7f7f7f", 
+            "#27ae60",
+            "#5ce7f6", 
+            "#f0e442", 
+            "#c2cbcc",  # Gray (Rest)
+            "#56b4e9",
+        ]
+
 # Model Market Share Tab
+country_market_share_area = create_stacked_area_chart(
+    derived_country_concentration_df, nat_gini_df, nat_hhi_df, TEMP_MODEL_EVENTS, palette, metric_order
+)
+
+# Define metric order
+metric_order = [
+    "Top 1",
+    "Top 1 - 10",
+    "Top 10 - 100",
+    "Top 100 - 1000",
+    "Top 1000 - 10000",
+    "Rest",
+]
+
 model_market_share_area = create_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, metric_order
 )
 
 world_map = create_world_map(
@@ -107,7 +146,18 @@ time_slider = dmc.RangeSlider(
         {"value": model_topk_df['time'].max().timestamp(), "label": model_topk_df['time'].max().strftime("%b %Y")}
     ],
     style={"width": "70%", "margin": "0 auto"},
-    labelAlwaysOn=False
+    labelAlwaysOn=False,
+)
+
+# Create a dcc slider for time range selection by year
+created_slider = dcc.Slider(
+    id='created-slider',
+    min=filtered_df['time'].min().year,
+    max=filtered_df['time'].max().year,
+    marks={year: str(year) for year in range(filtered_df['time'].min().year, filtered_df['time'].max().year + 1)},
+    step=1,
+    tooltip={"placement": "bottom", "always_visible": True},
+    updatemode='mouseup',
 )
 
 # Model Characteristics Tab
@@ -196,14 +246,15 @@ app.layout = dmc.MantineProvider(
                             ),
                         ], style={'marginBottom': 12, 'justifyContent': 'center', 'textAlign': 'center'}),
                         html.Div([
-                            dcc.Graph(id='stacked-area-chart'),
+                            # dcc.Graph(id='stacked-area-chart'),
+                            dcc.Graph(figure=country_market_share_area),
                         ], style={'marginBottom': 12}),
                         html.Div([
                             html.Div(
                                 dcc.Graph(id='world-map-with-slider'),
-                                style={'display': 'flex', 'justifyContent': 'center'}
+                                style={'display': 'flex', 'justifyContent': 'center', 'marginBottom': 0}
                             ),
-                            # dcc.Graph(id='leaderboard'),
+                            created_slider,
                         ], style={'marginBottom': 12})
                     ]),
                     dcc.Tab(label='Leaderboard', children=[
@@ -259,18 +310,19 @@ def update_output(value):
 # On slider change, update world map
 @app.callback(
     Output('world-map-with-slider', 'figure'),
-    Input('time-slider', 'value')
+    Input('created-slider', 'value')
 )
 def update_world_map(value):
-    if value and len(value) == 2:
-        start_time = pd.to_datetime(value[0], unit='s').strftime('%Y-%m-%d')
-        end_time = pd.to_datetime(value[1], unit='s').strftime('%Y-%m-%d')
-        updated_fig = create_world_map(
-            filtered_df
-        )
-        updated_fig.update_layout(font_family="Inter")
-        return updated_fig
-    return world_map
+    # Filter by created year
+    if value is None:
+        return world_map
+    
+    created_after = f"{int(value)}-01-01"
+    updated_fig = create_world_map(
+        filtered_df,
+        created_after=created_after
+    )
+    return updated_fig
 
 
 # On slider change, update leaderboard
@@ -291,22 +343,22 @@ def update_world_map(value):
 #         return leaderboard
 
 # On slider change, update stacked area chart
-@app.callback(
-    Output('stacked-area-chart', 'figure'),
-    Input('time-slider', 'value')
-)
-def update_stacked_area(value):
-    if value and len(value) == 2:
-        start_time = pd.to_datetime(value[0], unit='s').strftime('%Y-%m-%d')
-        end_time = pd.to_datetime(value[1], unit='s').strftime('%Y-%m-%d')
-        updated_fig = create_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
-    return model_market_share_area
+# @app.callback(
+#     Output('stacked-area-chart', 'figure'),
+#     Input('time-slider', 'value')
+# )
+# def update_stacked_area(value):
+#     if value and len(value) == 2:
+#         start_time = pd.to_datetime(value[0], unit='s').strftime('%Y-%m-%d')
+#         end_time = pd.to_datetime(value[1], unit='s').strftime('%Y-%m-%d')
+#         updated_fig = create_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
+#     return model_market_share_area
 
 @app.callback(
     Output("top_countries-table", "children"),

graphs/leaderboard.py

@@ -32,6 +32,17 @@ country_icon_map = {
         "Unknown": "❓",
         "Finland": "🇫🇮",
         "Lebanon": "🇱🇧",
+        "Iceland": "🇮🇸",
+        "Singapore": "🇸🇬",
+        "Israel": "🇮🇱",
+        "Iran": "🇮🇷",
+        "Hong Kong": "🇭🇰",
+        "Netherlands": "🇳🇱",
+        "Chile": "🇨🇱",
+        "Vietnam": "🇻🇳",
+        "Russia": "🇷🇺",
+        "Qatar": "🇶🇦",
+        "Switzerland": "🇨🇭",
         "User": "👤",
         "International/Online": "🌐",
     }

graphs/model_characteristics.py

@@ -41,17 +41,16 @@ def create_concentration_chart(
         autosize=True,
         font_size=14,
         showlegend=True,
+        margin=dict(l=60, r=60, t=40, b=80),  # Increased bottom margin
+        plot_bgcolor="white",
+        hovermode="x unified",
         legend=dict(
-            title="Language Concentration",
-            orientation="v",
-            yanchor="top",
-            y=1,
-            xanchor="left",
-            x=1.02
-        ),
-        margin=dict(l=60, r=150, t=40, b=60),  # Extra right margin for legend
-        plot_bgcolor='white',
-        hovermode='x unified'
+            orientation="h",     # Horizontal legend
+            yanchor="top",       # Anchor the top of the legend box
+            y=-0.25,             # Place it below the plot
+            xanchor="center",    
+            x=0.5
+        )
     )
     
     fig.update_xaxes(
@@ -111,19 +110,19 @@ def create_line_plot(
         )
     
     fig.update_layout(
-        width=1125,
-        height=225,
+        autosize=True,
+        font_size=14,
         showlegend=True,
+        margin=dict(l=60, r=60, t=40, b=80),  # Increased bottom margin
+        plot_bgcolor="white",
+        hovermode="x unified",
         legend=dict(
-            orientation="h",
-            yanchor="bottom",
-            y=1.02,
-            xanchor="right",
-            x=1
-        ),
-        margin=dict(l=60, r=60, t=60, b=60),
-        plot_bgcolor='white',
-        hovermode='x unified'
+            orientation="h",     # Horizontal legend
+            yanchor="top",       # Anchor the top of the legend box
+            y=-0.25,             # Place it below the plot
+            xanchor="center",    
+            x=0.5
+        )
     )
     
     fig.update_xaxes(

graphs/model_market_share.py

@@ -4,22 +4,12 @@ import plotly.graph_objects as go
 from plotly.subplots import make_subplots
 
 def create_stacked_area_chart(
-    topk_df, gini_df, hhi_df, events, palette, start_time=None, end_time=None
+    topk_df, gini_df, hhi_df, events, palette, metric_order, start_time=None, end_time=None
 ):
 
     # 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",
-    ]
-
     # Create stacked area traces
     for i, metric in enumerate(metric_order):
         metric_data = topk_df[topk_df["metric"] == metric]
@@ -54,46 +44,46 @@ def create_stacked_area_chart(
 
     # Add overlay lines
     # Gini Coefficient
-    gini_data = 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>",
-        ),
-        secondary_y=True,
-    )
-
-    # HHI (×10)
-    hhi_data = 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,
-            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,
-    )
+    # gini_data = 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>",
+    #     ),
+    #     secondary_y=True,
+    # )
+
+    # # HHI (×10)
+    # hhi_data = 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,
+    #         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,
+    # )
 
     # Add vertical lines for events
     for event_name, event_date in events.items():
@@ -124,11 +114,19 @@ def create_stacked_area_chart(
         autosize=True,
         font_size=14,
         showlegend=True,
-        margin=dict(l=60, r=60, t=40, b=60),
+        margin=dict(l=60, r=60, t=40, b=80),  # Increased bottom margin
         plot_bgcolor="white",
         hovermode="x unified",
+        legend=dict(
+            orientation="h",     # Horizontal legend
+            yanchor="top",       # Anchor the top of the legend box
+            y=-0.25,             # Place it below the plot
+            xanchor="center",    
+            x=0.5
+        )
     )
 
+
     # 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:
@@ -148,7 +146,7 @@ def create_stacked_area_chart(
 
     # Update primary y-axis (left)
     fig.update_yaxes(
-        title_text="Model Market Share",
+        title_text="National Concentration (%)",
         showgrid=True,
         gridcolor="lightgray",
         gridwidth=1,
@@ -164,7 +162,7 @@ def create_stacked_area_chart(
 
 
 def create_world_map(
-    df, top_n_labels=20
+    df, top_n_labels=20, created_after=None
 ):
     # Create a filtered_df with only countries
     df = df[df['org_country_single'] != 'HF']
@@ -173,8 +171,9 @@ def create_world_map(
     df = df[df['org_country_single'] != 'user']
 
     # Filter out models created after 2024-01-01 and downloads after 2024-01-01
-    # df = df[df['created'] > '2024-01-01']
-    # df = df[df['time'] > '2024-01-01']
+    if created_after:
+        df = df[df['created'] > created_after]
+        df = df[df['time'] > created_after]
 
     # Country code mapping
     country_code_map = {
@@ -239,8 +238,6 @@ def create_world_map(
         .sum()
         .reset_index()
     )
-
-    print(downloads_by_country.columns)
     
     # Prepare top countries for annotation
     total_downloads = float(downloads_by_country['downloads'].sum())
@@ -297,12 +294,12 @@ def create_world_map(
             text="Model Downloads by Country",
             x=0.5,
             font=dict(size=20),
+            pad=dict(t=10),
         ),
         width=1200,
-        height=800,
+        height=700,  # Increased height for a larger map
         plot_bgcolor="#ffffff",
         paper_bgcolor="#ffffff",
-        margin=dict(l=0, r=120, t=100, b=60),
     )
 
     # Update geo layout

requirements.txt

@@ -3,3 +3,4 @@ dash
 plotly
 gunicorn
 dash-mantine-components
+dash-bootstrap-components