Only show top languages in bar chart

app.py

@@ -4,6 +4,7 @@ import gradio as gr
 import numpy as np
 import pandas as pd
 import plotly.graph_objects as go
+import plotly.express as px
 import pycountry
 
 with open("results.json") as f:
@@ -127,36 +128,14 @@ def create_leaderboard_df(results):
 
 
 def create_model_comparison_plot(results):
-    # Extract all unique models
-    models = set()
-    for lang in results:
-        for score in lang["scores"]:
-            models.add(score["model"])
-    models = list(models)
-
-    # Create traces for each model
-    traces = []
-    for model in models:
-        x_vals = []  # languages
-        y_vals = []  # BLEU scores
-
-        for lang in results:
-            model_score = next(
-                (s["bleu"] for s in lang["scores"] if s["model"] == model), None
-            )
-            if model_score is not None:
-                x_vals.append(lang["language_name"])
-                y_vals.append(model_score)
-
-        traces.append(
-            go.Bar(
-                name=model.split("/")[-1],
-                x=x_vals,
-                y=y_vals,
-            )
-        )
-
-    fig = go.Figure(data=traces)
+    top_languages = sorted(results, key=lambda x: x["speakers"], reverse=True)[:10]
+    scores_flat = [
+        {"language": lang["language_name"], "model": score["model"], "bleu": score["bleu"]}
+        for lang in top_languages
+        for score in lang["scores"]
+    ]
+    df = pd.DataFrame(scores_flat)
+    fig = px.bar(df, x="language", y="bleu", color="model", barmode="group")
     fig.update_layout(
         title="BLEU Scores by Model and Language",
         xaxis_title=None,
@@ -231,7 +210,9 @@ def create_language_stats_df(results):
 def create_scatter_plot(results):
     fig = go.Figure()
 
-    x_vals = [lang["speakers"] / 1_000_000 for lang in results if lang["speakers"] >= 10_000]  # Convert to millions
+    x_vals = [
+        lang["speakers"] / 1_000_000 for lang in results if lang["speakers"] >= 10_000
+    ]  # Convert to millions
     y_vals = [lang["bleu"] for lang in results]
     labels = [lang["language_name"] for lang in results]
 

language-chart.js

@@ -1,68 +0,0 @@
-import * as Plot from "npm:@observablehq/plot";
-
-export function languageChart(
-  languageData,
-  { width, height, scoreKey, scoreName } = {}
-) {
-  // Format captions
-  const formatScore = (score) =>
-    score > 0 ? score.toFixed(2) : "No benchmark available!";
-  const formatTitle = (d) =>
-    d.language_name +
-    "\n" +
-    parseInt(d.speakers / 1_000_00) / 10 +
-    "M speakers\n" +
-    scoreName +
-    ": " +
-    formatScore(d[scoreKey]);
-
-  return Plot.plot({
-    width: width,
-    height: height,
-    marginBottom: 100,
-    x: { label: "Number of speakers", axis: null },
-    y: { label: `${scoreName} (average across models)` },
-    // color: { scheme: "BrBG" },
-    marks: [
-      Plot.rectY(
-        languageData,
-        Plot.stackX({
-          x: "speakers",
-          order: scoreKey,
-          reverse: true,
-          y2: scoreKey, // y2 to avoid stacking by y
-          title: formatTitle,
-          tip: true,
-          fill: (d) => (d[scoreKey] > 0 ? "black" : "pink"),
-        })
-      ),
-      Plot.rectY(
-        languageData,
-        Plot.pointerX(
-          Plot.stackX({
-            x: "speakers",
-            order: scoreKey,
-            reverse: true,
-            y2: scoreKey, // y2 to avoid stacking by y
-            fill: "grey",
-          })
-        )
-      ),
-      Plot.text(
-        languageData,
-        Plot.stackX({
-          x: "speakers",
-          y2: scoreKey,
-          order: scoreKey,
-          reverse: true,
-          text: "language_name",
-          frameAnchor: "bottom",
-          textAnchor: "end",
-          dy: 10,
-          rotate: 270,
-          opacity: (d) => (d.speakers > 50_000_000 ? 1 : 0),
-        })
-      ),
-    ],
-  });
-}