Highlight model families across both scatterplots on hover and remove planned corpus sentence

assets/site.css

@@ -323,6 +323,15 @@ input[type="search"] { min-width: 250px; }
 .chart .ptlabel.ours { fill: var(--ink); font-weight: 600; }
 .chart .leader { stroke: var(--ink-3); stroke-width: 1; }
 .chart .family { fill: none; stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; opacity: 0.55; }
+.scatter [data-family] { transition: opacity .15s ease, stroke-width .15s ease; }
+.scatter .is-muted { opacity: .16; }
+.scatter .family-line.is-family { opacity: 1; stroke-width: 3; }
+.scatter .pt.is-family .point-dot { stroke: var(--ink); stroke-width: 2.5; }
+.scatter .pt.is-family .ptlabel { fill: var(--ink); }
+.scatter .pt { outline: none; }
+.scatter .point-dot { pointer-events: none; }
+.scatter .point-halo { fill: none; stroke: var(--ink); stroke-width: 1.5; opacity: 0; pointer-events: none; }
+.scatter .pt:hover .point-halo, .scatter .pt:focus-visible .point-halo { opacity: 1; }
 .chart .ann { fill: var(--ink-3); font-size: 11.5px; }
 .chart .lbl { fill: var(--ink); font-size: 12.5px; }
 .chart .lbl-2 { fill: var(--ink-2); font-size: 12px; }

corpus.html

@@ -52,7 +52,7 @@
 </table>
 </div>
 
-<p class="note">The 8 kbp corpus is released as the <a href="https://huggingface.co/datasets/living-models/Botanic1-pretraining">Botanic1-pretraining</a> dataset, with the original sequence case, augmentation margins, train/test separation, source manifests and assembly metadata. The context-extension corpora at 16, 32, 64 and 128 kbp are planned for the same repository.</p>
+<p class="note">The 8 kbp corpus is released as the <a href="https://huggingface.co/datasets/living-models/Botanic1-pretraining">Botanic1-pretraining</a> dataset, with the original sequence case, augmentation margins, train/test separation, source manifests and assembly metadata.</p>
 </main>
 
 <footer class="site-footer">

leaderboard.html

@@ -8,7 +8,7 @@
 <link rel="preconnect" href="https://fonts.googleapis.com">
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Manrope:wght@500;600;700;800&family=Spectral:ital,wght@0,400;0,500;0,600;1,400&family=IBM+Plex+Mono:wght@400;500;600&display=swap">
-<link rel="stylesheet" href="assets/site.css?v=20260908-use-case">
+<link rel="stylesheet" href="assets/site.css?v=20260908-family-hover">
 <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.9.0/d3.min.js"></script>
 </head>
 <body>
@@ -62,8 +62,8 @@
 <h2 id="efficiency">Size and training tokens</h2>
 <p>Plotting the aggregated score against model size highlights the efficiency of this frontier: the Botanic family leads at every scale, and even Botanic1-S (318M parameters) outperforms baselines with more than an order of magnitude larger, including Carbon-8B (8.3B, 0.727) and Evo 2 (7B, 0.695); the most parameter-efficient baseline, GPN (66M, 0.731), still trails on performance. The right panel replots the same models against the total number of genomic base pairs seen during training: the tokens seen, reconstructed for every model from its publication or model card. The Botanic scores are attained after only 314.6B base pairs, where the strongest competitor, PlantCAD2-L, had to process 4.03T base-pairs and NTv3 12.1T. Interestingly, the Evo 2 family does not scale well with capacity: it peaks at 7B (0.695, from 0.670 at 1B) and declines through 20B (0.678) to 40B (0.629).</p>
 <div class="two">
-  <div class="chart" id="scatter-params"></div>
-  <div class="chart" id="scatter-tokens"></div>
+  <div class="chart scatter" id="scatter-params"></div>
+  <div class="chart scatter" id="scatter-tokens"></div>
 </div>
 <p class="chartnote">Tokens are converted to base pairs using approximations for 6-mer models. Models without a documented token count are omitted from the right panel.</p>
 
@@ -231,6 +231,15 @@
   ];
   const modelFamily = m => MODEL_FAMILIES.find(f => m.id.startsWith(f.prefix));
   const scatterColour = m => modelFamily(m) ? css(modelFamily(m).colour) : colour(m);
+  const scatterFamily = m => modelFamily(m)?.name || m.id;
+  let hoveredPoint = null, focusedPoint = null;
+  function highlightScatterFamily() {
+    const family = (hoveredPoint || focusedPoint)?.dataset.family;
+    document.querySelectorAll('.scatter [data-family]').forEach(node => {
+      node.classList.toggle('is-family', Boolean(family) && node.dataset.family === family);
+      node.classList.toggle('is-muted', Boolean(family) && node.dataset.family !== family);
+    });
+  }
   // Every point is labelled. Labels are placed greedily (our models first, then by
   // score) in the first free slot around the point; slots further out get a leader
   // line. A label that fits nowhere is dropped, the tooltip still names the point.
@@ -271,7 +280,7 @@
     const lx = (v) => L + (Math.log10(v) - Math.log10(xdom[0])) / (Math.log10(xdom[1]) - Math.log10(xdom[0])) * (W - L - R);
     const y0 = 0.5, y1 = 0.8;
     const y = (v) => T + (1 - (v - y0) / (y1 - y0)) * (H - T - B);
-    let s = `<svg viewBox="0 0 ${W} ${H}" role="img" aria-label="${title}">`;
+    let s = `<svg viewBox="0 0 ${W} ${H}" role="group" aria-label="${title}">`;
     s += `<text x="${L}" y="16" style="fill:var(--ink);font-size:13.5px;font-weight:600">${title}</text>`;
     s += '<g class="grid axis">';
     for (let v = y0; v <= y1 + 1e-9; v += 0.05) { s += `<line x1="${L}" x2="${W - R}" y1="${y(v)}" y2="${y(v)}"/><text x="${L - 8}" y="${y(v) + 4}" text-anchor="end">${v.toFixed(2)}</text>`; }
@@ -284,6 +293,9 @@
       cx: lx(Math.min(Math.max(m[xkey], xdom[0]), xdom[1])), cy: y(Math.max(m.s_bal, y0)),
     }));
     const labels = placeLabels(pts, { x0: L + 2, x1: W - 2, y0: T - 12, y1: H - B - 2 });
+    // Keep generous hover targets without covering neighbouring model dots.
+    const cells = d3.Delaunay.from(pts, pt => pt.cx, pt => pt.cy).voronoi([0, 0, W, H]);
+    s += '<defs>' + pts.map((pt, i) => `<clipPath id="${id}-hit-${i}"><path d="${cells.renderCell(i) || ''}"/></clipPath>`).join('') + '</defs>';
     // Connect measured checkpoints in each family in increasing model size.
     MODEL_FAMILIES.forEach(family => {
       const members = pts.filter(pt => modelFamily(pt.m) === family).sort((a,b) => a.m.params-b.m.params);
@@ -296,26 +308,34 @@
       const pt = pts[l.i];
       const tx = l.dx > 0 ? l.box.x0 - 2 : l.dx < 0 ? l.box.x1 + 2 : pt.cx;
       const ty = l.dx === 0 ? (l.dy > 0 ? l.box.y0 - 1 : l.box.y1 + 1) : (l.box.y0 + l.box.y1) / 2;
-      s += `<line class="leader" x1="${pt.cx + l.dx * pt.r}" y1="${pt.cy + l.dy * pt.r * 0.8}" x2="${tx}" y2="${ty}"/>`;
+      s += `<line class="leader" data-family="${esc(scatterFamily(pt.m))}" x1="${pt.cx + l.dx * pt.r}" y1="${pt.cy + l.dy * pt.r * 0.8}" x2="${tx}" y2="${ty}"/>`;
     });
     s += '</g>';
     pts.forEach((pt, i) => {
       const m = pt.m;
-      s += `<g data-id="${esc(m.id)}" class="pt"><circle cx="${pt.cx}" cy="${pt.cy}" r="${pt.r}" fill="${scatterColour(m)}" stroke="var(--paper)" stroke-width="2"/>`;
+      s += `<g data-id="${esc(m.id)}" data-family="${esc(scatterFamily(m))}" class="pt" tabindex="0" role="img" aria-label="${esc(m.name)}, ${esc(m.params_str)} parameters, aggregate score ${fmt(m.s_bal, 4)}"><circle class="point-dot" cx="${pt.cx}" cy="${pt.cy}" r="${pt.r}" fill="${scatterColour(m)}" stroke="var(--paper)" stroke-width="2"/><circle class="point-halo" cx="${pt.cx}" cy="${pt.cy}" r="${pt.r + 4}"/>`;
       const l = labels.find(x => x.i === i);
       if (l) {
         const anchor = l.dx > 0 ? 'start' : l.dx < 0 ? 'end' : 'middle';
         const x = l.dx > 0 ? l.box.x0 : l.dx < 0 ? l.box.x1 : (l.box.x0 + l.box.x1) / 2;
         s += `<text class="ptlabel${m.ours ? ' ours' : ''}" x="${x}" y="${l.box.y1 - 3}" text-anchor="${anchor}">${esc(m.name)}</text>`;
       }
-      s += `<circle class="hit" cx="${pt.cx}" cy="${pt.cy}" r="12"/></g>`;
+      s += `<circle class="hit" cx="${pt.cx}" cy="${pt.cy}" r="12" clip-path="url(#${id}-hit-${i})"/></g>`;
     });
     s += '</svg>';
     const el = document.getElementById(id); el.innerHTML = s;
     el.querySelectorAll('g.pt').forEach(g => {
       const m = M.find(mm => mm.id === g.dataset.id);
-      g.addEventListener('mousemove', (ev) => showTip(`<b>${esc(m.name)}</b> · ${esc(m.org)}<br>${m.params_str} parameters${m.bp_equivalent ? ' · ' + esc(m.bp_equivalent) + ' bp seen' : ''}<br>S<sub>bal</sub><sup>test</sup> = <b>${fmt(m.s_bal, 4)}</b>`, ev));
-      g.addEventListener('mouseleave', hideTip);
+      const showPointTip = ev => showTip(`<b>${esc(m.name)}</b> · ${esc(m.org)}<br>${m.params_str} parameters${m.bp_equivalent ? ' · ' + esc(m.bp_equivalent) + ' bp seen' : ''}<br>S<sub>bal</sub><sup>test</sup> = <b>${fmt(m.s_bal, 4)}</b>`, ev);
+      g.addEventListener('mouseenter', ev => { hoveredPoint = g; highlightScatterFamily(); showPointTip(ev); });
+      g.addEventListener('mousemove', showPointTip);
+      g.addEventListener('mouseleave', () => { hoveredPoint = null; highlightScatterFamily(); hideTip(); });
+      g.addEventListener('focus', () => {
+        focusedPoint = g; highlightScatterFamily();
+        const rect = g.querySelector('.point-dot').getBoundingClientRect();
+        showPointTip({ clientX: rect.x + rect.width / 2, clientY: rect.y + rect.height / 2 });
+      });
+      g.addEventListener('blur', () => { focusedPoint = null; highlightScatterFamily(); hideTip(); });
     });
   }