Adding banner and sequence image

app/src/content/article.mdx

@@ -1,6 +1,6 @@
 ---
-title: "Are LLMs any good at the Science Game?\n Evaluating scientific reasoning using the card game Eleusis"
-subtitle: "Testing LLM calibration and iterative hypothesis formation"
+title: "Are LLMs any good at the Science Game?"
+subtitle: "Evaluating scientific reasoning using the card game Eleusis"
 description: "A benchmark for evaluating LLM scientific reasoning using the card game Eleusis, testing iterative hypothesis formation, calibration, and strategic experimentation."
 authors:
   - name: "David Louapre"

app/src/content/assets/data/overall_performance.json

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:c620d1614704161071e6b3fdf51031228bc35a0aab8f70d6221f024a68e21e32
+size 1413

app/src/content/chapters/eleusis/introduction.mdx

@@ -1,5 +1,7 @@
 import Sidenote from "../../../components/Sidenote.astro";
-import Note from "../../../components/Note.astro";
+import Image from "../../../components/Image.astro";
+
+import exampleSequence from "../../assets/image/example_sequence.png";
 
 Large language models are increasingly being deployed as tools for scientific research—analyzing data, generating hypotheses, and even designing experiments. But how well do they actually embody the scientific method?
 
@@ -25,9 +27,12 @@ Eleusis was designed by Robert Abbott explicitly to simulate the process of scie
 
 It's a microcosm of the scientific method: the rule is a hidden law of nature, each card play is an experiment, and the sequence of accepted and rejected cards is the accumulating evidence.
 
-<Note variant="info">
-  **TODO**: Add figure showing an example Eleusis game sequence with the secret rule "alternating colors" (red, black, red, black...).
-</Note>
+<Image
+  src={exampleSequence}
+  alt="Example Eleusis game sequence with the secret rule 'alternating colors': mainline shows 5♠, K♥, J♠, A♦, 6♣ following the pattern, while the sideline below shows rejected cards 10♠ and 2♦"
+  caption="An example Eleusis game with the secret rule 'alternating colors'. The main line (top) shows accepted cards: 5♠ → K♥ → J♠ → A♦ → 6♣, each alternating between black and red. The sideline (bottom) shows rejected cards that would have violated the pattern."
+  id="fig-example-sequence"
+/>
 
 We built a benchmark around Eleusis to evaluate LLMs on this iterative, hypothesis-driven reasoning. Rather than testing knowledge retrieval or instruction-following, our benchmark asks: can models act like scientists? Can they observe evidence, form hypotheses, design informative experiments, and refine their theories? Can they calibrate their confidence appropriately and know when they've gathered enough evidence to commit to a conclusion?
 

app/src/content/embeds/banner.html

@@ -1,258 +1,449 @@
-<div class="d3-galaxy" style="width:100%;margin:10px 0;aspect-ratio:3/1;min-height:260px;"></div>
+<div class="d3-overall-performance"></div>
+<style>
+  .d3-overall-performance {
+    width: 100%;
+    margin: 10px 0;
+    position: relative;
+    font-family: system-ui, -apple-system, sans-serif;
+  }
+
+  .d3-overall-performance svg {
+    display: block;
+    width: 100%;
+    height: auto;
+  }
+
+  .d3-overall-performance .axes path,
+  .d3-overall-performance .axes line {
+    stroke: var(--axis-color, var(--text-color));
+  }
+
+  .d3-overall-performance .axes text {
+    fill: var(--tick-color, var(--muted-color));
+    font-size: 11px;
+  }
+
+  .d3-overall-performance .grid line {
+    stroke: var(--grid-color, rgba(0,0,0,.08));
+  }
+
+  .d3-overall-performance .axis-label {
+    font-size: 12px;
+    font-weight: 500;
+    fill: var(--text-color);
+  }
+
+  .d3-overall-performance .chart-title {
+    font-size: 16px;
+    font-weight: 600;
+    fill: var(--text-color);
+  }
+
+  .d3-overall-performance .point {
+    cursor: pointer;
+    transition: opacity 0.15s ease;
+  }
+
+  .d3-overall-performance .point:hover {
+    opacity: 0.8;
+  }
+
+  .d3-overall-performance .point-label {
+    font-size: 11px;
+    fill: var(--text-color);
+    pointer-events: none;
+  }
+
+  .d3-overall-performance .header {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 16px;
+    justify-content: space-between;
+    align-items: flex-start;
+    margin-top: 12px;
+    padding: 0 8px;
+  }
+
+  .d3-overall-performance .legend {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 6px;
+  }
+
+  .d3-overall-performance .legend-title {
+    font-size: 12px;
+    font-weight: 700;
+    color: var(--text-color);
+  }
+
+  .d3-overall-performance .legend .items {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px 14px;
+  }
+
+  .d3-overall-performance .legend .item {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    white-space: nowrap;
+    font-size: 12px;
+    color: var(--text-color);
+  }
+
+  .d3-overall-performance .legend .swatch {
+    width: 14px;
+    height: 14px;
+    border-radius: 50%;
+    border: 2px solid var(--border-color);
+  }
+
+  .d3-overall-performance .legend .swatch.filled {
+    border: none;
+  }
+
+  .d3-overall-performance .d3-tooltip {
+    position: absolute;
+    top: 0;
+    left: 0;
+    transform: translate(-9999px, -9999px);
+    pointer-events: none;
+    padding: 10px 12px;
+    border-radius: 8px;
+    font-size: 12px;
+    line-height: 1.4;
+    border: 1px solid var(--border-color);
+    background: var(--surface-bg);
+    color: var(--text-color);
+    box-shadow: 0 4px 24px rgba(0,0,0,.18);
+    opacity: 0;
+    transition: opacity 0.12s ease;
+    z-index: 10;
+  }
+
+  .d3-overall-performance .d3-tooltip .model-name {
+    font-weight: 600;
+    margin-bottom: 4px;
+  }
+
+  .d3-overall-performance .d3-tooltip .metric {
+    display: flex;
+    justify-content: space-between;
+    gap: 16px;
+  }
+
+  .d3-overall-performance .d3-tooltip .metric-label {
+    color: var(--muted-color);
+  }
+
+  .d3-overall-performance .d3-tooltip .metric-value {
+    font-weight: 500;
+  }
+</style>
 <script>
-    (() => {
-        const ensureD3 = (cb) => {
-            if (window.d3 && typeof window.d3.select === 'function') return cb();
-            let s = document.getElementById('d3-cdn-script');
-            if (!s) {
-                s = document.createElement('script');
-                s.id = 'd3-cdn-script';
-                s.src = 'https://cdn.jsdelivr.net/npm/d3@7/dist/d3.min.js';
-                document.head.appendChild(s);
-            }
-            const onReady = () => { if (window.d3 && typeof window.d3.select === 'function') cb(); };
-            s.addEventListener('load', onReady, { once: true });
-            if (window.d3) onReady();
-        };
+  (() => {
+    const ensureD3 = (cb) => {
+      if (window.d3 && typeof window.d3.select === 'function') return cb();
+      let s = document.getElementById('d3-cdn-script');
+      if (!s) {
+        s = document.createElement('script');
+        s.id = 'd3-cdn-script';
+        s.src = 'https://cdn.jsdelivr.net/npm/d3@7/dist/d3.min.js';
+        document.head.appendChild(s);
+      }
+      const onReady = () => { if (window.d3 && typeof window.d3.select === 'function') cb(); };
+      s.addEventListener('load', onReady, { once: true });
+      if (window.d3) onReady();
+    };
+
+    const bootstrap = () => {
+      const scriptEl = document.currentScript;
+      let container = scriptEl ? scriptEl.previousElementSibling : null;
+      if (!(container && container.classList && container.classList.contains('d3-overall-performance'))) {
+        const candidates = Array.from(document.querySelectorAll('.d3-overall-performance'))
+          .filter((el) => !(el.dataset && el.dataset.mounted === 'true'));
+        container = candidates[candidates.length - 1] || null;
+      }
+      if (!container) return;
+      if (container.dataset) {
+        if (container.dataset.mounted === 'true') return;
+        container.dataset.mounted = 'true';
+      }
+
+      // Tooltip setup
+      container.style.position = container.style.position || 'relative';
+      const tip = document.createElement('div');
+      tip.className = 'd3-tooltip';
+      container.appendChild(tip);
+
+      // SVG setup
+      const svg = d3.select(container).append('svg');
+      const gRoot = svg.append('g');
+
+      // Chart groups
+      const gGrid = gRoot.append('g').attr('class', 'grid');
+      const gAxes = gRoot.append('g').attr('class', 'axes');
+      const gPoints = gRoot.append('g').attr('class', 'points');
+      const gLabels = gRoot.append('g').attr('class', 'labels');
+
+      // State
+      let data = null;
+      let width = 800;
+      let height = 450;
+      const margin = { top: 40, right: 120, bottom: 56, left: 72 };
+
+      // Scales
+      const xScale = d3.scaleLinear();
+      const yScale = d3.scaleLinear();
+
+      // Data loading
+      const JSON_PATHS = [
+        '/data/overall_performance.json',
+        './assets/figures/overall_performance.json',
+        '../assets/figures/overall_performance.json',
+        '../../assets/figures/overall_performance.json'
+      ];
 
-        const bootstrap = () => {
-            const mount = document.currentScript ? document.currentScript.previousElementSibling : null;
-            const container = (mount && mount.querySelector && mount.querySelector('.d3-galaxy')) || document.querySelector('.d3-galaxy');
-            if (!container) return;
-            if (container.dataset) {
-                if (container.dataset.mounted === 'true') return;
-                container.dataset.mounted = 'true';
-            }
-            // Scene params (match previous Plotly ranges)
-            const cx = 1.5, cy = 0.5;
-            const a = 1.3, b = 0.45;
-            const numPoints = 3000;
-            const numArms = 3;
-            const numTurns = 2.1;
-            const angleJitter = 0.12;
-            const posNoise = 0.015;
-
-            // Circle size settings
-            const minCircleSize = 4;  // minimum diameter in pixels
-            const maxCircleSize = 12; // maximum diameter in pixels
-
-            // Generate spiral + bulge
-            const twoPi = Math.PI * 2;
-            const t = Float64Array.from({ length: numPoints }, () => Math.random() * (twoPi * numTurns));
-            const armIndices = Int16Array.from({ length: numPoints }, () => Math.floor(Math.random() * numArms));
-            const armOffsets = Float64Array.from(armIndices, (k) => k * (twoPi / numArms));
-            const theta = Float64Array.from(t, (tv, i) => tv + armOffsets[i] + d3.randomNormal.source(Math.random)(0, angleJitter)());
-            const rNorm = Float64Array.from(t, (tv) => Math.pow(tv / (twoPi * numTurns), 0.9));
-            const noiseScale = (rn) => posNoise * (0.8 + 0.6 * rn);
-            const noiseX = Float64Array.from(rNorm, (rn) => d3.randomNormal.source(Math.random)(0, noiseScale(rn))());
-            const noiseY = Float64Array.from(rNorm, (rn) => d3.randomNormal.source(Math.random)(0, noiseScale(rn))());
-
-            const xSpiral = Float64Array.from(theta, (th, i) => cx + a * rNorm[i] * Math.cos(th) + noiseX[i]);
-            const ySpiral = Float64Array.from(theta, (th, i) => cy + b * rNorm[i] * Math.sin(th) + noiseY[i]);
-
-            const bulgePoints = Math.floor(0.18 * numPoints);
-            const phiB = Float64Array.from({ length: bulgePoints }, () => twoPi * Math.random());
-            const rB = Float64Array.from({ length: bulgePoints }, () => Math.pow(Math.random(), 2.2) * 0.22);
-            const noiseXB = Float64Array.from({ length: bulgePoints }, () => d3.randomNormal.source(Math.random)(0, posNoise * 0.6)());
-            const noiseYB = Float64Array.from({ length: bulgePoints }, () => d3.randomNormal.source(Math.random)(0, posNoise * 0.6)());
-            const xBulge = Float64Array.from(phiB, (ph, i) => cx + a * rB[i] * Math.cos(ph) + noiseXB[i]);
-            const yBulge = Float64Array.from(phiB, (ph, i) => cy + b * rB[i] * Math.sin(ph) + noiseYB[i]);
-
-            // Concatenate
-            const X = Array.from(xSpiral).concat(Array.from(xBulge));
-            const Y = Array.from(ySpiral).concat(Array.from(yBulge));
-            const lenSpiral = xSpiral.length;
-
-            const zSpiral = Array.from(rNorm, (rn) => 1 - rn);
-            const maxRB = rB && rB.length ? (window.d3 && d3.max ? d3.max(rB) : Math.max.apply(null, Array.from(rB))) : 1;
-            const zBulge = Array.from(rB, (rb) => 1 - (maxRB ? rb / maxRB : 0));
-            const Zraw = zSpiral.concat(zBulge);
-            const sizesPx = Zraw.map((z) => minCircleSize + z * (maxCircleSize - minCircleSize)); // diameter in pixels
-
-            // Labels (same categories as Python version)
-            const labelOf = (i) => {
-                const z = Zraw[i];
-                if (z < 0.25) return 'tiny star';
-                if (z < 0.5) return 'small star';
-                if (z < 0.75) return 'medium star';
-                return 'large star';
-            };
-
-            // Sort by size ascending for z-index: small first, big last
-            const idx = d3.range(X.length).sort((i, j) => sizesPx[i] - sizesPx[j]);
-
-            // Colors: piecewise gradient [0 -> 0.5 -> 1]
-            const c0 = d3.rgb(78, 165, 183);    // rgb(78, 165, 183)
-            const c1 = d3.rgb(206, 192, 250);   // rgb(206, 192, 250)
-            const c2 = d3.rgb(232, 137, 171);   // rgb(232, 137, 171)
-            const interp01 = d3.interpolateRgb(c0, c1);
-            const interp12 = d3.interpolateRgb(c1, c2);
-            const colorFor = (v) => {
-                const t = Math.max(0, Math.min(1, v));
-                return t <= 0.5 ? interp01(t / 0.5) : interp12((t - 0.5) / 0.5);
-            };
-
-            // Create SVG
-            const svg = d3.select(container).append('svg')
-                .attr('width', '100%')
-                .style('display', 'block')
-                .style('cursor', 'crosshair');
-
-            const render = () => {
-                const width = container.clientWidth || 800;
-                const height = Math.max(260, Math.round(width / 3)); // keep ~3:1, min height
-                svg.attr('width', width).attr('height', height);
-
-                const xScale = d3.scaleLinear().domain([0, 3]).range([0, width]);
-                const yScale = d3.scaleLinear().domain([0, 1]).range([height, 0]);
-
-                // Subtle stroke color depending on theme
-                const isDark = document.documentElement.getAttribute('data-theme') === 'dark';
-                const strokeColor = isDark ? 'rgba(255,255,255,0.18)' : 'rgba(0,0,0,0.12)';
-                const glowColor = isDark ? 'rgba(255,255,255,0.35)' : 'rgba(0,0,0,0.25)';
-
-
-                // Group for points (no blend mode for better print/PDF visibility)
-                const g = svg.selectAll('g.points').data([0]).join('g').attr('class', 'points');
-
-                // Ensure container can host an absolute tooltip
-                container.style.position = container.style.position || 'relative';
-                let tip = container.querySelector('.d3-tooltip');
-                let tipInner;
-                if (!tip) {
-                    tip = document.createElement('div');
-                    tip.className = 'd3-tooltip';
-                    Object.assign(tip.style, {
-                        position: 'absolute',
-                        top: '0px',
-                        left: '0px',
-                        transform: 'translate(-9999px, -9999px)',
-                        pointerEvents: 'none',
-                        padding: '10px 12px',
-                        borderRadius: '12px',
-                        fontSize: '12px',
-                        lineHeight: '1.35',
-                        border: '1px solid var(--border-color)',
-                        background: 'var(--surface-bg)',
-                        color: 'var(--text-color)',
-                        boxShadow: '0 8px 32px rgba(0,0,0,.28), 0 2px 8px rgba(0,0,0,.12)',
-                        opacity: '0',
-                        transition: 'opacity .12s ease',
-                        backdropFilter: 'saturate(1.12) blur(8px)',
-                        zIndex: '20'
-                    });
-                    tipInner = document.createElement('div');
-                    tipInner.className = 'd3-tooltip__inner';
-                    Object.assign(tipInner.style, {
-                        textAlign: 'left',
-                        display: 'flex',
-                        flexDirection: 'column',
-                        gap: '6px',
-                        minWidth: '220px'
-                    });
-                    tip.appendChild(tipInner);
-                    container.appendChild(tip);
-                } else {
-                    tipInner = tip.querySelector('.d3-tooltip__inner') || tip;
-                }
-
-                // Final filter: remove small dots very close to the galaxy center (after placement)
-                const centerHoleRadius = 0.48; // elliptical radius threshold
-                const smallSizeThreshold = 7.5; // same notion as Python size cut
-                const rTotal = idx.map((i) => Math.sqrt(((X[i] - cx) / a) ** 2 + ((Y[i] - cy) / b) ** 2));
-                const idxFiltered = idx.filter((i, k) => !(rTotal[k] <= centerHoleRadius && sizesPx[i] < smallSizeThreshold));
-
-                const sel = g.selectAll('circle').data(idxFiltered, (i) => i);
-                sel.join(
-                    (enter) => enter.append('circle')
-                        .attr('cx', (i) => xScale(X[i]))
-                        .attr('cy', (i) => yScale(Y[i]))
-                        .attr('r', (i) => sizesPx[i] / 2)
-                        .attr('fill', (i) => colorFor(Zraw[i]))
-                        .attr('fill-opacity', 0.9)
-                        .on('mouseenter', function (ev, i) {
-                            d3.select(this).raise()
-                                .style('filter', `drop-shadow(0 0 8px ${glowColor})`)
-                                .transition().duration(120).ease(d3.easeCubicOut)
-                                .attr('r', (sizesPx[i] / 2) * 1.25)
-                                .attr('fill-opacity', 1);
-                            const r = Math.sqrt(((X[i] - cx) / a) ** 2 + ((Y[i] - cy) / b) ** 2);
-                            const type = i < lenSpiral ? 'spiral' : 'bulge';
-                            const arm = i < lenSpiral ? (armIndices[i] + 1) : null;
-                            tipInner.innerHTML =
-                                `<div style="font-weight:800;letter-spacing:.1px;"><strong>${labelOf(i)}</strong></div>` +
-                                `<div style="font-size:11px;color:var(--muted-color);margin-top:-4px;margin-bottom:2px;letter-spacing:.1px;"><strong>Type</strong> ${type}${arm ? ` (Arm ${arm})` : ''}</div>` +
-                                `<div style="padding-top:6px;border-top:1px solid var(--border-color);"><strong>Position</strong> X ${X[i].toFixed(2)} · <strong>Y</strong> ${Y[i].toFixed(2)}</div>` +
-                                `<div><strong>Distance</strong> Radius ${r.toFixed(3)} · <strong>Z</strong> ${Zraw[i].toFixed(3)}</div>` +
-                                `<div><strong>Size</strong> ${sizesPx[i].toFixed(1)} px</div>`;
-                            tip.style.opacity = '1';
-                        })
-                        .on('mousemove', (ev, i) => {
-                            const [mx, my] = d3.pointer(ev, container);
-                            const offsetX = 10, offsetY = 12;
-                            tip.style.transform = `translate(${Math.round(mx + offsetX)}px, ${Math.round(my + offsetY)}px)`;
-                        })
-                        .on('mouseleave', function () {
-                            tip.style.opacity = '0';
-                            tip.style.transform = 'translate(-9999px, -9999px)';
-                            d3.select(this)
-                                .style('filter', null)
-                                .transition().duration(120).ease(d3.easeCubicOut)
-                                .attr('r', (i2) => sizesPx[i2] / 2)
-                                .attr('fill-opacity', 0.9);
-                        }),
-                    (update) => update
-                        .attr('cx', (i) => xScale(X[i]))
-                        .attr('cy', (i) => yScale(Y[i]))
-                        .attr('r', (i) => sizesPx[i] / 2)
-                        .attr('fill', (i) => colorFor(Zraw[i]))
-                        .attr('fill-opacity', 0.9)
-                        .on('mouseenter', function (ev, i) {
-                            d3.select(this).raise()
-                                .style('filter', `drop-shadow(0 0 8px ${glowColor})`)
-                                .transition().duration(120).ease(d3.easeCubicOut)
-                                .attr('r', (sizesPx[i] / 2) * 1.25)
-                                .attr('fill-opacity', 1);
-                            const r = Math.sqrt(((X[i] - cx) / a) ** 2 + ((Y[i] - cy) / b) ** 2);
-                            const type = i < lenSpiral ? 'spiral' : 'bulge';
-                            const arm = i < lenSpiral ? (armIndices[i] + 1) : null;
-                            tipInner.innerHTML =
-                                `<div style="font-weight:800;letter-spacing:.1px;"><strong>${labelOf(i)}</strong></div>` +
-                                `<div style="font-size:11px;color:var(--muted-color);margin-top:-4px;margin-bottom:2px;letter-spacing:.1px;"><strong>Type</strong> ${type}${arm ? ` (Arm ${arm})` : ''}</div>` +
-                                `<div style="padding-top:6px;border-top:1px solid var(--border-color);"><strong>Position</strong> X ${X[i].toFixed(2)} · <strong>Y</strong> ${Y[i].toFixed(2)}</div>` +
-                                `<div><strong>Distance</strong> Radius ${r.toFixed(3)} · <strong>Z</strong> ${Zraw[i].toFixed(3)}</div>` +
-                                `<div><strong>Size</strong> ${sizesPx[i].toFixed(1)} px</div>`;
-                            tip.style.opacity = '1';
-                        })
-                        .on('mousemove', (ev, i) => {
-                            const [mx, my] = d3.pointer(ev, container);
-                            const offsetX = 10, offsetY = 12;
-                            tip.style.transform = `translate(${Math.round(mx + offsetX)}px, ${Math.round(my + offsetY)}px)`;
-                        })
-                        .on('mouseleave', function () {
-                            tip.style.opacity = '0';
-                            tip.style.transform = 'translate(-9999px, -9999px)';
-                            d3.select(this)
-                                .style('filter', null)
-                                .transition().duration(120).ease(d3.easeCubicOut)
-                                .attr('r', (i2) => sizesPx[i2] / 2)
-                                .attr('fill-opacity', 0.9);
-                        })
-                );
-            };
-
-            // First render + resize
-            if (window.ResizeObserver) {
-                const ro = new ResizeObserver(() => render());
-                ro.observe(container);
-            } else {
-                window.addEventListener('resize', render);
-            }
-            render();
+      const fetchFirstAvailable = async (paths) => {
+        for (const p of paths) {
+          try {
+            const r = await fetch(p, { cache: 'no-cache' });
+            if (r.ok) return await r.json();
+          } catch (_) {}
+        }
+        throw new Error('Data not found');
+      };
+
+      function updateSize() {
+        width = container.clientWidth || 800;
+        height = Math.max(300, Math.round(width / 1.78)); // 16:9 aspect ratio
+        svg.attr('width', width).attr('height', height).attr('viewBox', `0 0 ${width} ${height}`);
+        gRoot.attr('transform', `translate(${margin.left},${margin.top})`);
+        return {
+          innerWidth: width - margin.left - margin.right,
+          innerHeight: height - margin.top - margin.bottom
         };
+      }
+
+      function showTooltip(event, d) {
+        const rect = container.getBoundingClientRect();
+        const x = event.clientX - rect.left;
+        const y = event.clientY - rect.top;
+
+        tip.innerHTML = `
+          <div class="model-name" style="color: ${d.color}">${d.name}</div>
+          <div class="metric">
+            <span class="metric-label">Score:</span>
+            <span class="metric-value">${d.avg_score.toFixed(2)}</span>
+          </div>
+          <div class="metric">
+            <span class="metric-label">Tokens/Turn:</span>
+            <span class="metric-value">${Math.round(d.avg_output_tokens_per_turn).toLocaleString()}</span>
+          </div>
+          <div class="metric">
+            <span class="metric-label">Type:</span>
+            <span class="metric-value">${d.is_open ? 'Open' : 'Closed'}</span>
+          </div>
+        `;
+
+        const tipWidth = tip.offsetWidth || 150;
+        const tipHeight = tip.offsetHeight || 80;
+        let tipX = x + 12;
+        let tipY = y - tipHeight / 2;
+
+        if (tipX + tipWidth > width) tipX = x - tipWidth - 12;
+        if (tipY < 0) tipY = 8;
+        if (tipY + tipHeight > height) tipY = height - tipHeight - 8;
+
+        tip.style.transform = `translate(${tipX}px, ${tipY}px)`;
+        tip.style.opacity = '1';
+      }
+
+      function hideTooltip() {
+        tip.style.opacity = '0';
+        tip.style.transform = 'translate(-9999px, -9999px)';
+      }
+
+      function render() {
+        if (!data) return;
+
+        const { innerWidth, innerHeight } = updateSize();
+        const models = data.models;
+
+        // Update scales
+        const xExtent = d3.extent(models, d => d.avg_output_tokens_per_turn);
+        const yExtent = d3.extent(models, d => d.avg_score);
+        const xPadding = (xExtent[1] - xExtent[0]) * 0.1;
+        const yPadding = (yExtent[1] - yExtent[0]) * 0.1;
+
+        xScale
+          .domain([xExtent[0] - xPadding, xExtent[1] + xPadding])
+          .range([0, innerWidth])
+          .nice();
+
+        yScale
+          .domain([yExtent[0] - yPadding, yExtent[1] + yPadding])
+          .range([innerHeight, 0])
+          .nice();
+
+        // Grid lines
+        const xTicks = xScale.ticks(6);
+        const yTicks = yScale.ticks(6);
+
+        gGrid.selectAll('.grid-x')
+          .data(xTicks)
+          .join('line')
+          .attr('class', 'grid-x')
+          .attr('x1', d => xScale(d))
+          .attr('x2', d => xScale(d))
+          .attr('y1', 0)
+          .attr('y2', innerHeight);
+
+        gGrid.selectAll('.grid-y')
+          .data(yTicks)
+          .join('line')
+          .attr('class', 'grid-y')
+          .attr('x1', 0)
+          .attr('x2', innerWidth)
+          .attr('y1', d => yScale(d))
+          .attr('y2', d => yScale(d));
+
+        // Axes
+        gAxes.selectAll('.x-axis')
+          .data([0])
+          .join('g')
+          .attr('class', 'x-axis')
+          .attr('transform', `translate(0,${innerHeight})`)
+          .call(d3.axisBottom(xScale).ticks(6).tickFormat(d => d.toLocaleString()));
+
+        gAxes.selectAll('.y-axis')
+          .data([0])
+          .join('g')
+          .attr('class', 'y-axis')
+          .call(d3.axisLeft(yScale).ticks(6));
+
+        // Axis labels
+        gAxes.selectAll('.x-label')
+          .data([0])
+          .join('text')
+          .attr('class', 'x-label axis-label')
+          .attr('x', innerWidth / 2)
+          .attr('y', innerHeight + 44)
+          .attr('text-anchor', 'middle')
+          .text('Average Output Tokens per Turn');
+
+        gAxes.selectAll('.y-label')
+          .data([0])
+          .join('text')
+          .attr('class', 'y-label axis-label')
+          .attr('x', -innerHeight / 2)
+          .attr('y', -52)
+          .attr('text-anchor', 'middle')
+          .attr('transform', 'rotate(-90)')
+          .text('Average Score');
+
+        // Chart title
+        gAxes.selectAll('.title')
+          .data([0])
+          .join('text')
+          .attr('class', 'title chart-title')
+          .attr('x', innerWidth / 2)
+          .attr('y', -16)
+          .attr('text-anchor', 'middle')
+          .text('Overall Performance: Score vs Token Usage');
+
+        // Points
+        const pointRadius = Math.max(8, Math.min(16, innerWidth / 60));
+
+        gPoints.selectAll('.point')
+          .data(models)
+          .join('circle')
+          .attr('class', 'point')
+          .attr('cx', d => xScale(d.avg_output_tokens_per_turn))
+          .attr('cy', d => yScale(d.avg_score))
+          .attr('r', pointRadius)
+          .attr('fill', d => d.is_open ? 'transparent' : d.color)
+          .attr('stroke', d => d.color)
+          .attr('stroke-width', d => d.is_open ? 3 : 0)
+          .on('mouseenter', showTooltip)
+          .on('mousemove', showTooltip)
+          .on('mouseleave', hideTooltip);
+
+        // Point labels
+        gLabels.selectAll('.point-label')
+          .data(models)
+          .join('text')
+          .attr('class', 'point-label')
+          .attr('x', d => xScale(d.avg_output_tokens_per_turn) + pointRadius + 6)
+          .attr('y', d => yScale(d.avg_score) + 4)
+          .text(d => d.name);
+      }
+
+      function buildLegend() {
+        let header = container.querySelector('.header');
+        if (!header) {
+          header = document.createElement('div');
+          header.className = 'header';
+          container.appendChild(header);
+        }
+
+        let legend = header.querySelector('.legend');
+        if (!legend) {
+          legend = document.createElement('div');
+          legend.className = 'legend';
+          header.appendChild(legend);
+        }
+
+        legend.innerHTML = `
+          <div class="legend-title">Legend</div>
+          <div class="items">
+            <span class="item">
+              <span class="swatch filled" style="background: #666"></span>
+              <span>Closed model</span>
+            </span>
+            <span class="item">
+              <span class="swatch" style="border-color: #666"></span>
+              <span>Open model</span>
+            </span>
+          </div>
+        `;
+      }
+
+      // Initialize
+      fetchFirstAvailable(JSON_PATHS)
+        .then(json => {
+          data = json;
+          buildLegend();
+          render();
+        })
+        .catch(err => {
+          const pre = document.createElement('pre');
+          pre.style.color = 'red';
+          pre.style.padding = '16px';
+          pre.textContent = `Error loading data: ${err.message}`;
+          container.appendChild(pre);
+        });
+
+      // Resize handling
+      if (window.ResizeObserver) {
+        new ResizeObserver(() => render()).observe(container);
+      } else {
+        window.addEventListener('resize', render);
+      }
+
+      // Theme change handling
+      const observer = new MutationObserver(() => render());
+      observer.observe(document.documentElement, {
+        attributes: true,
+        attributeFilter: ['data-theme']
+      });
+    };
 
-        if (document.readyState === 'loading') {
-            document.addEventListener('DOMContentLoaded', () => ensureD3(bootstrap), { once: true });
-        } else { ensureD3(bootstrap); }
-    })();
-</script>
+    if (document.readyState === 'loading') {
+      document.addEventListener('DOMContentLoaded', () => ensureD3(bootstrap), { once: true });
+    } else {
+      ensureD3(bootstrap);
+    }
+  })();
+</script>