Add release-date plots to HF leaderboard Space.

Replicate the FreshStack release-date visualizations with monthly date axes, baseline reference lines, and improved plot spacing while keeping BM25/Fusion as dashed lines only.

Made-with: Cursor

index.html

@@ -93,6 +93,14 @@
       <div id="plot-avg-r50" class="plot-box"></div>
     </section>
 
+    <section class="plots">
+      <h3>FreshStack Metrics vs. Model Release Date</h3>
+      <p class="plot-sub">Average scores across 5 domains vs model release date; points are colored by model family.</p>
+      <div id="plot-date-avg-alpha10" class="plot-box"></div>
+      <div id="plot-date-avg-c20" class="plot-box"></div>
+      <div id="plot-date-avg-r50" class="plot-box"></div>
+    </section>
+
     <section class="citation">
       <div class="citation-head">
         <h3>Cite FreshStack</h3>

leaderboard_data.json

@@ -46,7 +46,7 @@
                 "name": "BGE (Gemma-2)",
                 "size": "9B",
                 "type": "open_source",
-                "date": "2024-11-01",
+                "date": "2024-07-30",
                 "link": "https://huggingface.co/BAAI/bge-multilingual-gemma2"
             },
             "datasets": {
@@ -87,7 +87,7 @@
                 "name": "E5 (Mistral-7B)",
                 "size": "7B",
                 "type": "open_source",
-                "date": "2024-11-01",
+                "date": "2024-01-01",
                 "link": "https://huggingface.co/intfloat/e5-mistral-7b-instruct"
             },
             "datasets": {
@@ -128,7 +128,7 @@
                 "name": "Voyage Large 2",
                 "size": "-",
                 "type": "proprietary",
-                "date": "2024-11-01",
+                "date": "2024-05-05",
                 "link": "https://docs.voyageai.com/docs/embeddings"
             },
             "datasets": {

main.js

@@ -29,6 +29,11 @@ const PLOT_METRICS = [
   { id: 'coverage_20', key: 'avg_c20', plotId: 'plot-avg-c20', title: 'Coverage@20', yLabel: 'C@20 (Avg. 5)', yMin: 0.25, yMax: 0.868 },
   { id: 'recall_50', key: 'avg_r50', plotId: 'plot-avg-r50', title: 'Recall@50', yLabel: 'R@50 (Avg. 5)', yMin: 0.15, yMax: 0.755 }
 ];
+const DATE_PLOT_METRICS = [
+  { id: 'alpha_ndcg_10', key: 'avg_a10', plotId: 'plot-date-avg-alpha10', title: 'alpha-nDCG@10', yLabel: 'α@10 (Avg. 5)', yMin: 0.1, yMax: 0.541 },
+  { id: 'coverage_20', key: 'avg_c20', plotId: 'plot-date-avg-c20', title: 'Coverage@20', yLabel: 'C@20 (Avg. 5)', yMin: 0.25, yMax: 0.868 },
+  { id: 'recall_50', key: 'avg_r50', plotId: 'plot-date-avg-r50', title: 'Recall@50', yLabel: 'R@50 (Avg. 5)', yMin: 0.15, yMax: 0.755 }
+];
 
 function num(v) {
   return typeof v === 'number' ? v.toFixed(3) : '-';
@@ -84,6 +89,21 @@ function inferFamily(name) {
   return 'Other';
 }
 
+function normalizeModelName(rawName) {
+  return String(rawName || '').toLowerCase().replace(/^oracle:\s*/i, '').trim();
+}
+
+function isReferenceBaselineModel(rawName) {
+  const name = normalizeModelName(rawName);
+  return name === 'bm25' || name === 'fusion (bm25, bge, e5, voyage)';
+}
+
+function parseReleaseDate(dateStr) {
+  if (!dateStr) return null;
+  const d = new Date(dateStr);
+  return Number.isNaN(d.getTime()) ? null : d;
+}
+
 const FAMILY_COLORS = {
   'Stella': '#1f77b4', 'Harrier OSS': '#ff7f0e', 'Voyage': '#009688', 'Jina': '#d62728',
   'Qwen3': '#9467bd', 'IBM Granite': '#8c564b', 'Arctic Embed': '#e377c2', 'Perplexity Embed': '#17becf',
@@ -193,10 +213,11 @@ function renderPlots() {
   if (typeof Plotly === 'undefined') return;
   const active = activeTypes();
   const filtered = rows.filter(r => active.includes(r.type));
+  const filteredNoBaselines = filtered.filter(r => !isReferenceBaselineModel(r.name));
 
   PLOT_METRICS.forEach(metric => {
     const grouped = {};
-    filtered.forEach(r => {
+    filteredNoBaselines.forEach(r => {
       const x = parseSizeToBillions(r.size);
       const y = r[metric.key];
       if (x === null || typeof y !== 'number') return;
@@ -233,10 +254,79 @@ function renderPlots() {
 
     Plotly.newPlot(metric.plotId, traces, {
       title: { text: metric.title, x: 0.01, xanchor: 'left', font: { size: 16 } },
-      margin: { t: 46, r: 12, b: 76, l: 56 },
-      xaxis: { title: { text: 'Model Parameters (Billions)', standoff: 18 }, type: 'log', showgrid: true },
-      yaxis: { title: metric.yLabel, range: [metric.yMin, metric.yMax], tickformat: '.2f', showgrid: true },
-      legend: { orientation: 'h', y: -0.26, x: 0.5, xanchor: 'center' },
+      height: 430,
+      margin: { t: 46, r: 12, b: 130, l: 56 },
+      xaxis: { title: { text: 'Model Parameters (Billions)', standoff: 26 }, type: 'log', automargin: true, showgrid: true },
+      yaxis: { title: metric.yLabel, range: [metric.yMin, metric.yMax], tickformat: '.2f', automargin: true, showgrid: true },
+      legend: { orientation: 'h', y: -0.36, x: 0.5, xanchor: 'center' },
+      hovermode: 'closest'
+    }, { responsive: true, displaylogo: false });
+  });
+
+  DATE_PLOT_METRICS.forEach(metric => {
+    const grouped = {};
+    filteredNoBaselines.forEach(r => {
+      const x = parseReleaseDate(r.date);
+      const y = r[metric.key];
+      if (x === null || typeof y !== 'number') return;
+      const fam = inferFamily(r.name);
+      if (!grouped[fam]) grouped[fam] = { x: [], y: [], text: [] };
+      grouped[fam].x.push(x);
+      grouped[fam].y.push(y);
+      grouped[fam].text.push(r.name);
+    });
+
+    const traces = Object.keys(grouped).sort().map(fam => ({
+      type: 'scatter',
+      mode: 'markers',
+      name: fam,
+      x: grouped[fam].x,
+      y: grouped[fam].y,
+      text: grouped[fam].text,
+      marker: { color: FAMILY_COLORS[fam] || '#9e9e9e', size: 11, line: { width: 1, color: '#fff' } },
+      hovertemplate: '<b>%{text}</b><br>Release date: %{x|%Y-%m-%d}<br>Score: %{y:.3f}<extra></extra>'
+    }));
+
+    const bm25 = filtered.find(r => normalizeModelName(r.name) === 'bm25');
+    const fusion = filtered.find(r => normalizeModelName(r.name) === 'fusion (bm25, bge, e5, voyage)');
+    const xs = traces.flatMap(t => t.x || []);
+    const xMin = xs.length ? new Date(Math.min(...xs.map(d => d.getTime()))) : null;
+    const xMax = xs.length ? new Date(Math.max(...xs.map(d => d.getTime()))) : null;
+    const xMinMonthStart = xMin ? new Date(xMin.getFullYear(), xMin.getMonth(), 1) : null;
+    if (xMin && xMax) {
+      if (bm25 && typeof bm25[metric.key] === 'number') {
+        traces.push({ type: 'scatter', mode: 'lines', name: 'BM25', x: [xMin, xMax], y: [bm25[metric.key], bm25[metric.key]], line: { color: 'rgba(97,97,97,0.55)', width: 1.1, dash: 'dash' } });
+      }
+      if (fusion && typeof fusion[metric.key] === 'number') {
+        traces.push({ type: 'scatter', mode: 'lines', name: 'Fusion', x: [xMin, xMax], y: [fusion[metric.key], fusion[metric.key]], line: { color: 'rgba(106,27,154,0.55)', width: 1.1, dash: 'dot' } });
+      }
+    }
+
+    Plotly.newPlot(metric.plotId, traces, {
+      title: { text: metric.title, x: 0.01, xanchor: 'left', font: { size: 16 } },
+      height: 430,
+      margin: { t: 46, r: 12, b: 160, l: 56 },
+      xaxis: {
+        title: { text: 'Model Release Date', standoff: 34 },
+        type: 'date',
+        tickmode: 'linear',
+        tick0: xMinMonthStart ? xMinMonthStart.toISOString().slice(0, 10) : undefined,
+        dtick: 'M1',
+        tickformat: '%b %Y',
+        tickangle: -45,
+        automargin: true,
+        showgrid: true
+      },
+      yaxis: { title: metric.yLabel, range: [metric.yMin, metric.yMax], tickformat: '.2f', automargin: true, showgrid: true },
+      legend: {
+        orientation: 'h',
+        y: -0.44,
+        x: 0.5,
+        xanchor: 'center',
+        entrywidthmode: 'pixels',
+        entrywidth: 155,
+        itemsizing: 'constant'
+      },
       hovermode: 'closest'
     }, { responsive: true, displaylogo: false });
   });