Improve Observable setup

observablehq.config.js

@@ -17,7 +17,7 @@ export default {
   // ],
 
   // Content to add to the head of the page, e.g. for a favicon:
-  head: '<link rel="icon" href="observable.png" type="image/png" sizes="32x32">',
+  head: '<link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22 fill=%22black%22>🌍</text></svg>">',
 
   // The path to the source root.
   root: "src",

src/chart.md

@@ -1,85 +0,0 @@
----
-theme: dashboard
-title: AI Language Monitor
-toc: false
-head: <link rel="icon"
-  href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22 fill=%22black%22>🌍</text></svg>">
-  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap" rel="stylesheet">
-  <!--<link rel="stylesheet" href="styles.css">-->
-  <script src="https://cdn.tailwindcss.com"></script>
----
-
-# AI Language Monitor
-
-```js
-const data = FileAttachment("data/languagebench.json").json();
-```
-
-```js
-const scoreKey = "bleu"
-const scoreName = "BLEU Score"
-
-// 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]))
-
-// Create summary plot
-const chart = Plot.plot({
-    width: 600,
-    height: 400,
-    marginBottom: 100,
-    x: { label: "Number of speakers", axis: null },
-    y: { label: `${scoreName} (average across models)` },
-    // color: { scheme: "BrBG" },
-    marks: [
-        Plot.rectY(data, 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(data, Plot.pointerX(Plot.stackX({
-            x: "speakers",
-            order: scoreKey,
-            reverse: true,
-            y2: scoreKey, // y2 to avoid stacking by y
-            fill: "grey",
-        }))),
-        Plot.text(data, 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,
-        }))
-    ]
-});
-display(chart);
-```
-
-<style>
-    body {
-        margin: 0 auto;
-        padding: 20px;
-        font-family: sans-serif;
-    }
-
-    .language-header {
-        margin-bottom: 10px;
-    }
-
-    .speaker-count {
-        font-size: 0.8em;
-        color: #666;
-        font-weight: normal;
-        margin: 0;
-    }
-</style>

src/{list.md → compare-ais.md}

@@ -1,15 +1,9 @@
 ---
 theme: dashboard
-title: List
-toc: false
-head: <link rel="icon"
-  href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22 fill=%22black%22>🌍</text></svg>">
-  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap" rel="stylesheet">
-  <!--<link rel="stylesheet" href="styles.css">-->
-  <script src="https://cdn.tailwindcss.com"></script>
+title: Compare AI models
 ---
 
-# AI Language Monitor
+# Compare AI models
 
 ```js
 const data = FileAttachment("data/languagebench.json").json();

src/compare-languages.md

@@ -0,0 +1,20 @@
+---
+theme: dashboard
+title: Compare languages
+---
+
+# Compare languages
+
+```js
+import { languageChart } from "./components/language-chart.js";
+
+const data = FileAttachment("data/languagebench.json").json();
+```
+
+```js
+const scoreKey = "bleu"
+const scoreName = "BLEU Score"
+
+// Create summary plot
+display(languageChart(data, {width: 1000, height: 400, scoreKey: scoreKey, scoreName: scoreName}))
+```

src/components/language-chart.js

@@ -0,0 +1,68 @@
+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),
+        })
+      ),
+    ],
+  });
+}

src/components/timeline.js

@@ -1,16 +0,0 @@
-import * as Plot from "npm:@observablehq/plot";
-
-export function timeline(events, {width, height} = {}) {
-  return Plot.plot({
-    width,
-    height,
-    marginTop: 30,
-    x: {nice: true, label: null, tickFormat: ""},
-    y: {axis: null},
-    marks: [
-      Plot.ruleX(events, {x: "year", y: "y", markerEnd: "dot", strokeWidth: 2.5}),
-      Plot.ruleY([0]),
-      Plot.text(events, {x: "year", y: "y", text: "name", lineAnchor: "bottom", dy: -10, lineWidth: 10, fontSize: 12})
-    ]
-  });
-}

src/index.md

@@ -4,66 +4,24 @@ toc: false
 
 <div class="hero">
   <h1>AI Language Monitor</h1>
-  <h2>Welcome to your new app! Edit&nbsp;<code style="font-size: 90%;">src/index.md</code> to change this page.</h2>
-  <a href="https://observablehq.com/framework/getting-started">Get started<span style="display: inline-block; margin-left: 0.25rem;">↗︎</span></a>
+  <h2>Benchmarking all big AI models on all benchmarkable languages.</h2>
 </div>
 
-<div class="grid grid-cols-2" style="grid-auto-rows: 504px;">
-  <div class="card">${
-    resize((width) => Plot.plot({
-      title: "Your awesomeness over time 🚀",
-      subtitle: "Up and to the right!",
-      width,
-      y: {grid: true, label: "Awesomeness"},
-      marks: [
-        Plot.ruleY([0]),
-        Plot.lineY(aapl, {x: "Date", y: "Close", tip: true})
-      ]
-    }))
-  }</div>
-  <div class="card">${
-    resize((width) => Plot.plot({
-      title: "How big are penguins, anyway? 🐧",
-      width,
-      grid: true,
-      x: {label: "Body mass (g)"},
-      y: {label: "Flipper length (mm)"},
-      color: {legend: true},
-      marks: [
-        Plot.linearRegressionY(penguins, {x: "body_mass_g", y: "flipper_length_mm", stroke: "species"}),
-        Plot.dot(penguins, {x: "body_mass_g", y: "flipper_length_mm", stroke: "species", tip: true})
-      ]
-    }))
-  }</div>
-</div>
+```js
+import { languageChart } from "./components/language-chart.js";
 
----
+const data = FileAttachment("data/languagebench.json").json();
+```
 
-## Next steps
 
-Here are some ideas of things you could try…
-
-<div class="grid grid-cols-4">
-  <div class="card">
-    Chart your own data using <a href="https://observablehq.com/framework/lib/plot"><code>Plot</code></a> and <a href="https://observablehq.com/framework/files"><code>FileAttachment</code></a>. Make it responsive using <a href="https://observablehq.com/framework/javascript#resize(render)"><code>resize</code></a>.
-  </div>
-  <div class="card">
-    Create a <a href="https://observablehq.com/framework/project-structure">new page</a> by adding a Markdown file (<code>whatever.md</code>) to the <code>src</code> folder.
-  </div>
-  <div class="card">
-    Add a drop-down menu using <a href="https://observablehq.com/framework/inputs/select"><code>Inputs.select</code></a> and use it to filter the data shown in a chart.
-  </div>
-  <div class="card">
-    Write a <a href="https://observablehq.com/framework/loaders">data loader</a> that queries a local database or API, generating a data snapshot on build.
-  </div>
-  <div class="card">
-    Import a <a href="https://observablehq.com/framework/imports">recommended library</a> from npm, such as <a href="https://observablehq.com/framework/lib/leaflet">Leaflet</a>, <a href="https://observablehq.com/framework/lib/dot">GraphViz</a>, <a href="https://observablehq.com/framework/lib/tex">TeX</a>, or <a href="https://observablehq.com/framework/lib/duckdb">DuckDB</a>.
-  </div>
+<div class="grid grid-cols-2" style="grid-auto-rows: 504px;">
   <div class="card">
-    Ask for help, or share your work or ideas, on our <a href="https://github.com/observablehq/framework/discussions">GitHub discussions</a>.
+    <h2 class="hero">Compare languages</h2>
+    ${resize((width) => languageChart(data, {width: 1000, height: 400, scoreKey: "bleu", scoreName: "BLEU Score"}))}
   </div>
   <div class="card">
-    Visit <a href="https://github.com/observablehq/framework">Framework on GitHub</a> and give us a star. Or file an issue if you’ve found a bug!
+    <h2 class="hero">Compare AI models</h2>
+    ...
   </div>
 </div>
 
@@ -83,7 +41,7 @@ Here are some ideas of things you could try…
   margin: 1rem 0;
   padding: 1rem 0;
   max-width: none;
-  font-size: 14vw;
+  font-size: 90px;
   font-weight: 900;
   line-height: 1;
   background: linear-gradient(30deg, var(--theme-foreground-focus), currentColor);
@@ -92,20 +50,4 @@ Here are some ideas of things you could try…
   background-clip: text;
 }
 
-.hero h2 {
-  margin: 0;
-  max-width: 34em;
-  font-size: 20px;
-  font-style: initial;
-  font-weight: 500;
-  line-height: 1.5;
-  color: var(--theme-foreground-muted);
-}
-
-@media (min-width: 640px) {
-  .hero h1 {
-    font-size: 90px;
-  }
-}
-
 </style>

src/methodology.md

@@ -0,0 +1,12 @@
+---
+title: Methodology
+---
+
+# Methodology
+
+Sources:
+
+1. For AI models: [OpenRouter](https://openrouter.ai/)
+2. For language benchmarks: [FLORES+](https://github.com/openlanguagedata/flores)
+3. For language statistics: [Wikidata](https://gist.github.com/unhammer/3e8f2e0f79972bf5008a4c970081502d), [Ethnologue](https://www.ethnologue.com/browse/names/)
+