add verbosity analysis plot from Thibaud

app/src/content/chapters/analyses.mdx

@@ -1,3 +1,6 @@
+import HtmlEmbed from "../../components/HtmlEmbed.astro";
+import FigRef from "../../components/FigRef.astro";
+
 ## Analyses
 
 Our final experiment explores an even more counterintuitive finding.
@@ -64,3 +67,13 @@ SmolLM2's quality distribution was actually reasonable:
 | Poor | {'<'}30 tokens | 8% |
 
 For pretraining data, diversity beats consistency. Models that don't follow instructions perfectly can produce better training data than those that do.
+
+### Verbosity Analysis
+
+Different prompt formats produce wildly different output lengths. <FigRef target="verbosity" /> shows the output tokens per document across four prompt types, broken down by model family. Table and Math prompts tend to be concise, while FAQ and Tutorial prompts generate significantly more tokens per document. Notably, the spread within each prompt type varies across model families: some models are consistently verbose regardless of the prompt, while others adapt their output length to the task.
+
+<HtmlEmbed
+  id="verbosity"
+  src="verbosity.html"
+  desc="Output tokens per document across prompt types and model families. Hover over dots to see detailed statistics for each experiment."
+/>

app/src/content/embeds/verbosity.html

@@ -0,0 +1,506 @@
+<div class="d3-synth-banner" style="width:100%;margin:10px 0;aspect-ratio:3/1;min-height:260px;"></div>
+<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 bootstrap = () => {
+            const mount = document.currentScript ? document.currentScript.previousElementSibling : null;
+            const container = (mount && mount.querySelector && mount.querySelector('.d3-synth-banner')) ||
+                Array.from(document.querySelectorAll('.d3-synth-banner')).find(el => el.dataset.mounted !== 'true');
+            if (!container) return;
+            if (container.dataset) {
+                if (container.dataset.mounted === 'true') return;
+                container.dataset.mounted = 'true';
+            }
+
+            // ═══════════════════════════════════════════════════════════════
+            // DATA — 65 rephrasing experiments
+            // [cat, prompt, model, source, compTokensB, promptTokensB,
+            //  numDocsM, dclmDiff, outDclm, inDclm, eduDiff, outEdu, inEdu]
+            // ═══════════════════════════════════════════════════════════════
+            const raw = [
+                ['Format','Article','Gemma-3 1B','FW-Edu HQ',4.00,5.66,19.7,-0.018,0.080,0.098,-0.432,1.484,1.679],
+                ['Format','Commentary','Qwen3 1.7B','FW-Edu HQ',1.64,5.94,20.1,0.630,0.847,0.217,-0.229,3.533,3.762],
+                ['Format','Commentary','Gemma-3 1B','DCLM',1.46,5.52,29.5,0.202,0.344,0.142,0.359,1.943,1.584],
+                ['Format','Commentary','Gemma-3 1B','FW-Edu HQ',0.64,2.42,20.1,0.055,0.109,0.054,-0.517,0.793,0.921],
+                ['Format','Discussion','Qwen3 1.7B','FW-Edu HQ',2.90,7.20,20.1,0.715,0.932,0.217,-0.122,3.640,3.762],
+                ['Format','Discussion','Gemma-3 1B','FW-Edu HQ',3.96,6.25,20.1,0.036,0.161,0.125,-0.574,1.862,2.197],
+                ['Format','FAQ','Gemma-3 12B','FW-Edu HQ',3.22,4.06,20.1,0.712,0.930,0.217,-0.295,3.467,3.762],
+                ['Format','FAQ','Gemma-3 12B','FW-Edu LQ',1.91,1.90,32.9,0.799,0.828,0.029,0.357,1.263,0.906],
+                ['Format','FAQ','Gemma-3 1B','Cosmopedia',1.33,1.31,31.1,0.329,0.906,0.578,-0.264,2.226,2.490],
+                ['Format','FAQ','Gemma-3 1B','DCLM',1.52,2.08,29.5,0.709,0.851,0.142,0.346,1.930,1.585],
+                ['Format','FAQ','Gemma-3 1B','FW-Edu HQ',17.67,22.21,20.1,0.711,0.929,0.218,-0.346,3.416,3.762],
+                ['Format','FAQ','Gemma-3 1B','FW-Edu LQ',1.84,1.75,32.9,0.690,0.719,0.029,0.369,1.275,0.905],
+                ['Format','FAQ','Falcon3 1B','FW-Edu HQ',3.41,4.84,20.1,0.691,0.909,0.217,-0.249,3.512,3.762],
+                ['Format','FAQ','Granite3 1B','FW-Edu HQ',2.55,4.17,20.1,0.680,0.898,0.218,-0.166,3.596,3.762],
+                ['Format','FAQ','Llama-3.2 1B','FW-Edu HQ',6.29,11.62,20.1,0.735,0.952,0.217,-0.375,3.387,3.762],
+                ['Format','FAQ','Qwen3 1.7B','FW-Edu HQ',2.88,4.77,20.1,0.632,0.850,0.218,-0.219,3.543,3.762],
+                ['Format','FAQ','SmolLM2 1.7B','FW-Edu HQ',0.89,2.00,20.1,0.648,0.867,0.219,-0.406,3.355,3.762],
+                ['Format','Math','Gemma-3 12B','FW-Edu HQ',2.51,5.93,20.1,0.755,0.972,0.217,-0.370,3.392,3.762],
+                ['Format','Math','Gemma-3 1B','FW-Edu HQ',2.46,5.08,20.1,0.620,0.838,0.218,-0.174,3.587,3.762],
+                ['Format','Math','Gemma-3 270M','FW-Edu HQ',1.21,1.33,20.1,0.600,0.818,0.218,-0.406,3.357,3.762],
+                ['Format','Math','Gemma-3 27B','FW-Edu HQ',1.05,2.62,20.1,0.754,0.971,0.217,-0.429,3.333,3.762],
+                ['Format','Math','Gemma-3 4B','FW-Edu HQ',0.68,1.75,20.1,0.743,0.960,0.217,-0.335,3.427,3.762],
+                ['Format','Math','Falcon3 1B','FW-Edu HQ',1.42,2.17,20.1,0.704,0.921,0.217,-0.156,3.606,3.762],
+                ['Format','Math','Granite3 1B','FW-Edu HQ',1.57,3.35,20.1,0.698,0.916,0.218,-0.324,3.438,3.762],
+                ['Format','Math','Llama-3.2 1B','FW-Edu HQ',0.86,2.17,20.1,0.737,0.955,0.218,-0.384,3.378,3.762],
+                ['Format','Math','Qwen3 1.7B','FW-Edu HQ',0.56,2.00,20.1,0.742,0.959,0.218,-0.310,3.452,3.762],
+                ['Format','Math','SmolLM2 1.7B','FW-Edu HQ',0.64,2.28,20.1,0.657,0.875,0.218,-0.669,3.093,3.762],
+                ['Format','Table','Gemma-3 12B','FW-Edu HQ',0.76,2.49,20.1,0.719,0.937,0.217,-0.774,2.988,3.762],
+                ['Format','Table','Gemma-3 1B','FW-Edu HQ',1.68,5.62,20.1,0.715,0.932,0.217,-0.776,2.985,3.762],
+                ['Format','Table','Falcon3 1B','FW-Edu HQ',0.65,2.00,20.1,0.722,0.940,0.218,-0.748,3.015,3.763],
+                ['Format','Table','Granite3 1B','FW-Edu HQ',1.44,3.90,20.1,0.726,0.944,0.218,-0.597,3.165,3.762],
+                ['Format','Table','Llama-3.2 1B','FW-Edu HQ',0.88,2.73,20.1,0.772,0.989,0.217,-0.815,2.947,3.762],
+                ['Format','Table','Qwen3 1.7B','FW-Edu HQ',0.80,2.69,20.1,0.751,0.969,0.218,-0.638,3.123,3.762],
+                ['Format','Table','SmolLM2 1.7B','FW-Edu HQ',0.41,1.52,20.1,0.668,0.885,0.218,-0.943,2.818,3.762],
+                ['Format','Tutorial','Gemma-3 12B','FW-Edu HQ',5.33,6.57,20.1,0.398,0.553,0.155,-0.077,2.612,2.667],
+                ['Format','Tutorial','Gemma-3 12B','FW-Edu LQ',2.35,2.57,32.9,0.189,0.210,0.020,0.379,0.869,0.613],
+                ['Format','Tutorial','Gemma-3 1B','Cosmopedia',1.02,1.47,31.1,-0.049,0.529,0.578,-0.080,2.415,2.495],
+                ['Format','Tutorial','Gemma-3 1B','DCLM',1.67,3.30,29.5,0.371,0.514,0.142,0.528,2.113,1.585],
+                ['Format','Tutorial','Gemma-3 1B','FW-Edu HQ',1.51,2.70,19.4,0.074,0.112,0.038,-0.077,0.632,0.646],
+                ['Format','Tutorial','Gemma-3 1B','FW-Edu LQ',1.90,2.51,32.9,0.172,0.193,0.021,0.413,0.917,0.630],
+                ['Format','Tutorial','Gemma-3 270M','FW-Edu HQ',1.64,1.71,20.1,0.514,0.731,0.217,-0.337,3.425,3.762],
+                ['Format','Tutorial','Gemma-3 27B','FW-Edu HQ',2.55,3.29,20.1,0.485,0.702,0.218,-0.057,3.705,3.762],
+                ['Format','Tutorial','Gemma-3 4B','FW-Edu HQ',1.50,2.02,20.1,0.404,0.621,0.217,-0.049,3.713,3.762],
+                ['Format','Tutorial','Falcon3 1B','FW-Edu HQ',4.97,7.58,20.1,0.447,0.665,0.218,-0.145,3.617,3.762],
+                ['Format','Tutorial','Granite3 1B','FW-Edu HQ',3.51,6.42,20.1,0.449,0.666,0.218,-0.072,3.690,3.762],
+                ['Format','Tutorial','Llama-3.2 1B','FW-Edu HQ',2.36,4.88,20.1,0.557,0.774,0.217,-0.031,3.731,3.762],
+                ['Format','Tutorial','Qwen1.5 1.8B','FW-Edu HQ',2.22,2.40,20.1,0.647,0.864,0.218,0.072,3.834,3.762],
+                ['Format','Tutorial','Qwen2 1.5B','FW-Edu HQ',3.09,8.00,20.1,0.527,0.746,0.218,-0.010,3.751,3.762],
+                ['Format','Tutorial','Qwen2.5 1.5B','FW-Edu HQ',2.27,4.87,20.1,0.576,0.794,0.218,-0.083,3.678,3.762],
+                ['Format','Tutorial','Qwen3 1.7B','FW-Edu HQ',3.56,5.69,20.1,0.281,0.497,0.217,0.056,3.818,3.762],
+                ['Format','Tutorial','SmolLM2 1.7B','FW-Edu HQ',1.52,3.38,20.1,0.439,0.658,0.219,-0.244,3.518,3.762],
+                ['Nemotron','Distill','Gemma-3 1B','FW-Edu HQ',2.12,5.37,20.1,0.331,0.549,0.217,-0.132,3.629,3.762],
+                ['Nemotron','Diverse QA','Gemma-3 1B','FW-Edu HQ',1.97,7.01,20.1,0.779,0.996,0.217,-0.208,3.554,3.762],
+                ['Nemotron','Extract Knowledge','Gemma-3 1B','FW-Edu HQ',2.41,6.59,20.1,0.254,0.472,0.218,0.025,3.787,3.762],
+                ['Nemotron','Knowledge List','Gemma-3 1B','FW-Edu HQ',2.90,9.15,20.1,0.589,0.806,0.217,-0.193,3.569,3.762],
+                ['Nemotron','Wikipedia Style','Gemma-3 1B','FW-Edu HQ',3.43,8.37,20.1,0.297,0.515,0.217,-0.193,3.568,3.762],
+                ['REWIRE','Guided Rewrite+','Gemma-3 12B','FW-Edu HQ',1.45,2.14,20.1,0.222,0.439,0.217,-0.102,3.660,3.762],
+                ['REWIRE','Guided Rewrite+','Gemma-3 1B','FW-Edu HQ',1.63,3.42,20.1,0.097,0.315,0.217,-0.428,3.334,3.762],
+                ['REWIRE','Guided Rewrite','Gemma-3 12B','FW-Edu HQ',1.78,1.72,20.1,0.607,0.824,0.217,-1.214,2.547,3.762],
+                ['REWIRE','Guided Rewrite','Gemma-3 1B','FW-Edu HQ',8.69,10.30,20.1,0.278,0.495,0.217,-1.012,2.750,3.762],
+                ['REWIRE','Guided Rewrite','Gemma-3 270M','FW-Edu HQ',0.78,1.71,20.1,0.755,0.972,0.217,-2.407,1.355,3.762],
+                ['REWIRE','Guided Rewrite','Gemma-3 4B','FW-Edu HQ',0.91,1.10,20.1,0.436,0.654,0.218,-0.919,2.843,3.762],
+                ['REWIRE','Guided Rewrite','Gemma-3 27B','FW-Edu HQ',8.43,8.64,19.95,0.546,0.763,0.217,-1.228,2.533,3.762],
+                ['Format','Tutorial','SmolLM2 135M','FW-Edu HQ',4.51,6.99,20.1,0.423,0.641,0.218,-0.572,3.190,3.762],
+                ['Format','Tutorial','SmolLM2 360M','FW-Edu HQ',3.14,6.52,20.1,0.441,0.659,0.218,-0.565,3.197,3.762]
+            ];
+
+            const experiments = raw.map((r, i) => ({
+                idx: i, cat: r[0], prompt: r[1], model: r[2], source: r[3],
+                compTokens: r[4], promptTokens: r[5], numDocs: r[6],
+                dclmDiff: r[7], outDclm: r[8], inDclm: r[9],
+                eduDiff: r[10], outEdu: r[11], inEdu: r[12],
+                compPerDoc: r[4] * 1000 / r[6],
+                phase: Math.random() * Math.PI * 2
+            }));
+
+            // ══════════════════════════════════════════��════════════════
+            // MODEL FAMILIES
+            // ═══════════════════════════════════════════════════════════
+            const getFamily = (m) => {
+                if (m.includes('SmolLM')) return 'SmolLM2';
+                if (m.includes('Gemma'))  return 'Gemma';
+                if (m.includes('Qwen'))   return 'Qwen';
+                if (m.includes('Falcon')) return 'Falcon';
+                if (m.includes('Granite')) return 'Granite';
+                if (m.includes('Llama'))  return 'Llama';
+                return 'Other';
+            };
+            const familyColors = {
+                'Gemma':   '#4EA5B7',
+                'Qwen':    '#8B7BE8',
+                'SmolLM2': '#E8C44A',
+                'Falcon':  '#E889AB',
+                'Granite': '#5BC0A4',
+                'Llama':   '#D09090',
+            };
+            const familyOrder = ['Gemma','Qwen','SmolLM2','Falcon','Granite','Llama'];
+            experiments.forEach(d => { d.family = getFamily(d.model); });
+
+            // ═══════════════════════════════════════════════════════════
+            // FILTER: Only prompts tested across 6 model families
+            // (keep multi-source Gemma variants for Tutorial/FAQ)
+            // ═══════════════════════════════════════════════════════════
+            const focusPrompts = ['Math', 'Table', 'FAQ', 'Tutorial'];
+            const filtered = experiments.filter(d => focusPrompts.includes(d.prompt));
+
+            // Sort rows by median compPerDoc (most verbose on top)
+            const promptStats = {};
+            focusPrompts.forEach(p => {
+                const vals = filtered.filter(d => d.prompt === p).map(d => d.compPerDoc).sort((a,b) => a - b);
+                const mid = Math.floor(vals.length / 2);
+                promptStats[p] = {
+                    median: vals.length % 2 ? vals[mid] : (vals[mid-1] + vals[mid]) / 2,
+                    count: vals.length
+                };
+            });
+            const sortedPrompts = [...focusPrompts].sort((a, b) => promptStats[b].median - promptStats[a].median);
+
+            // ═══════════════════════════════════════════════════════════
+            // TOOLTIP
+            // ═══════════════════════════════════════════════════════════
+            const fmtB = (v) => v >= 10 ? v.toFixed(0) + 'B' : v.toFixed(1) + 'B';
+            const fmtSign = (v, p) => (v >= 0 ? '+' : '') + v.toFixed(p || 3);
+            const dCol = (v) => v >= 0 ? '#5BC0A4' : '#E889AB';
+            const buildTip = (d) =>
+                `<div style="font-weight:800;font-size:13px;">${d.prompt}</div>` +
+                `<div style="font-size:11px;color:var(--muted-color);margin-top:-2px;margin-bottom:4px;">` +
+                `<span style="display:inline-block;width:8px;height:8px;border-radius:50%;background:${familyColors[d.family]};margin-right:4px;vertical-align:middle;"></span>` +
+                `${d.model} \u00b7 ${d.source}</div>` +
+                `<div style="padding-top:5px;border-top:1px solid var(--border-color);display:grid;grid-template-columns:auto 1fr;gap:2px 8px;font-size:11.5px;">` +
+                `<span style="color:var(--muted-color);">Total output</span><span>${fmtB(d.compTokens)}</span>` +
+                `<span style="color:var(--muted-color);">Output/doc</span><span>${Math.round(d.compPerDoc)} tokens</span>` +
+                `<span style="color:var(--muted-color);">Docs</span><span>${d.numDocs.toFixed(1)}M</span>` +
+                `</div>` +
+                `<div style="margin-top:5px;padding-top:5px;border-top:1px solid var(--border-color);display:grid;grid-template-columns:auto 1fr;gap:2px 8px;font-size:11.5px;">` +
+                `<span style="color:var(--muted-color);">DCLM</span>` +
+                `<span>${d.inDclm.toFixed(3)} \u2192 ${d.outDclm.toFixed(3)} <b style="color:${dCol(d.dclmDiff)};">${fmtSign(d.dclmDiff)}</b></span>` +
+                `<span style="color:var(--muted-color);">Edu</span>` +
+                `<span>${d.inEdu.toFixed(2)} \u2192 ${d.outEdu.toFixed(2)} <b style="color:${dCol(d.eduDiff)};">${fmtSign(d.eduDiff, 2)}</b></span>` +
+                `</div>`;
+
+            // ═══════════════════════════════════════════════════════════
+            // SVG
+            // ═══════════════════════════════════════════════════════════
+            const svg = d3.select(container).append('svg')
+                .attr('width', '100%')
+                .style('display', 'block')
+                .style('cursor', 'crosshair');
+
+            let animFrame = null;
+
+            const render = () => {
+                const width = container.clientWidth || 800;
+                const height = Math.max(260, Math.round(width / 3));
+                svg.attr('width', width).attr('height', height);
+
+                const isDark = document.documentElement.getAttribute('data-theme') === 'dark';
+                const textColor = isDark ? 'rgba(255,255,255,0.72)' : 'rgba(0,0,0,0.62)';
+                const mutedText = isDark ? 'rgba(255,255,255,0.22)' : 'rgba(0,0,0,0.18)';
+                const subtleText = isDark ? 'rgba(255,255,255,0.12)' : 'rgba(0,0,0,0.08)';
+                const refLine = isDark ? 'rgba(255,255,255,0.10)' : 'rgba(0,0,0,0.07)';
+                const bandEven = isDark ? 'rgba(255,255,255,0.022)' : 'rgba(0,0,0,0.018)';
+                const glowColor = isDark ? 'rgba(255,255,255,0.35)' : 'rgba(0,0,0,0.25)';
+                const smolHighlight = isDark ? 'rgba(232,196,74,0.18)' : 'rgba(232,196,74,0.12)';
+
+                const fontSize = Math.max(8, Math.min(12, width / 80));
+
+                // ─── LAYOUT ───
+                const labelW = Math.max(68, width * 0.085);
+                const pl = labelW + 12;
+                const pr = width * 0.965;
+                const pt = height * 0.20;
+                const pb = height * 0.86;
+                const plotH = pb - pt;
+                const rowH = plotH / sortedPrompts.length;
+
+                const rowCenter = {};
+                sortedPrompts.forEach((p, i) => { rowCenter[p] = pt + (i + 0.5) * rowH; });
+
+                // ─── X SCALE: completion tokens per document (log) ───
+                const xScale = d3.scaleLog().base(10)
+                    .domain([15, 1000])
+                    .range([pl, pr]);
+
+                const rBase = Math.max(3.5, Math.min(8, width * 0.007));
+
+                // ─── FORCE SIMULATION ───
+                filtered.forEach(d => {
+                    d.tx = xScale(Math.max(15, d.compPerDoc));
+                    d.ty = rowCenter[d.prompt];
+                    d.x = d.tx + (Math.random() - 0.5) * 6;
+                    d.y = d.ty + (Math.random() - 0.5) * rowH * 0.3;
+                });
+
+                const sim = d3.forceSimulation(filtered)
+                    .force('x', d3.forceX(d => d.tx).strength(0.72))
+                    .force('y', d3.forceY(d => d.ty).strength(0.55))
+                    .force('collide', d3.forceCollide(rBase + 1.5).iterations(5))
+                    .stop();
+                for (let i = 0; i < 250; i++) sim.tick();
+
+                filtered.forEach(d => {
+                    d.x = Math.max(pl + rBase, Math.min(pr - rBase, d.x));
+                    const yMin = rowCenter[d.prompt] - rowH * 0.46;
+                    const yMax = rowCenter[d.prompt] + rowH * 0.46;
+                    d.y = Math.max(yMin, Math.min(yMax, d.y));
+                });
+
+                // ─── BG STARS ───
+                const bgCol = (() => {
+                    const i01 = d3.interpolateRgb(d3.rgb(78,165,183), d3.rgb(206,192,250));
+                    const i12 = d3.interpolateRgb(d3.rgb(206,192,250), d3.rgb(232,137,171));
+                    return (v) => { const t = Math.max(0, Math.min(1, v)); return t <= 0.5 ? i01(t / 0.5) : i12((t - 0.5) / 0.5); };
+                })();
+                const gBg = svg.selectAll('g.bg').data([0]).join('g').attr('class', 'bg');
+                if (!gBg.selectAll('circle').size()) {
+                    const stars = d3.range(50).map(() => ({
+                        x: Math.random() * width, y: Math.random() * height,
+                        z: Math.random(), r: 0.3 + Math.random() * 0.6
+                    }));
+                    gBg.selectAll('circle').data(stars).join('circle')
+                        .attr('cx', d => d.x).attr('cy', d => d.y).attr('r', d => d.r)
+                        .attr('fill', d => bgCol(d.z)).attr('fill-opacity', d => 0.03 + d.z * 0.04);
+                }
+
+                // ─── ROW BANDS & LABELS ───
+                const gRows = svg.selectAll('g.rows').data([0]).join('g').attr('class', 'rows');
+                gRows.selectAll('*').remove();
+
+                sortedPrompts.forEach((p, i) => {
+                    const y = rowCenter[p];
+
+                    if (i % 2 === 0) {
+                        gRows.append('rect')
+                            .attr('x', pl - 6).attr('y', y - rowH / 2)
+                            .attr('width', pr - pl + 12).attr('height', rowH)
+                            .attr('fill', bandEven).attr('rx', 4);
+                    }
+                    if (i > 0) {
+                        gRows.append('line')
+                            .attr('x1', pl - 2).attr('x2', pr + 2)
+                            .attr('y1', y - rowH / 2).attr('y2', y - rowH / 2)
+                            .attr('stroke', refLine).attr('stroke-width', 0.5);
+                    }
+
+                    // SmolLM2 highlight zone — show where SmolLM2 dots land
+                    const smolExp = filtered.filter(d => d.prompt === p && d.family === 'SmolLM2');
+                    if (smolExp.length) {
+                        const smolX = smolExp[0].x;
+                        gRows.append('rect')
+                            .attr('x', smolX - rBase * 2.5).attr('y', y - rowH * 0.42)
+                            .attr('width', rBase * 5).attr('height', rowH * 0.84)
+                            .attr('fill', smolHighlight).attr('rx', rBase * 2);
+                    }
+
+                    // Label
+                    gRows.append('text')
+                        .attr('x', pl - 10).attr('y', y)
+                        .attr('text-anchor', 'end')
+                        .attr('dominant-baseline', 'central')
+                        .attr('fill', textColor)
+                        .attr('font-size', fontSize + 'px')
+                        .attr('font-weight', '700')
+                        .attr('font-family', 'system-ui, -apple-system, sans-serif')
+                        .attr('letter-spacing', '-0.2px')
+                        .text(p);
+                });
+
+                // ─── X AXIS TICKS ───
+                const gRef = svg.selectAll('g.ref').data([0]).join('g').attr('class', 'ref');
+                gRef.selectAll('*').remove();
+
+                [20, 50, 100, 200, 500].forEach(v => {
+                    const x = xScale(v);
+                    if (x > pl && x < pr) {
+                        gRef.append('line')
+                            .attr('x1', x).attr('x2', x)
+                            .attr('y1', pb).attr('y2', pb + 3)
+                            .attr('stroke', mutedText).attr('stroke-width', 0.7);
+                        gRef.append('text')
+                            .attr('x', x).attr('y', pb + 5)
+                            .attr('text-anchor', 'middle')
+                            .attr('dominant-baseline', 'hanging')
+                            .attr('fill', mutedText)
+                            .attr('font-size', (fontSize * 0.65) + 'px')
+                            .attr('font-family', 'system-ui, -apple-system, sans-serif')
+                            .text(v);
+                        // Subtle grid line
+                        gRef.append('line')
+                            .attr('x1', x).attr('x2', x)
+                            .attr('y1', pt).attr('y2', pb)
+                            .attr('stroke', subtleText).attr('stroke-width', 0.4)
+                            .attr('stroke-dasharray', '2,6');
+                    }
+                });
+
+                // Axis label
+                gRef.append('text')
+                    .attr('x', pr).attr('y', pb + 16)
+                    .attr('text-anchor', 'end')
+                    .attr('fill', mutedText)
+                    .attr('font-size', (fontSize * 0.72) + 'px')
+                    .attr('font-weight', '600')
+                    .attr('font-family', 'system-ui, -apple-system, sans-serif')
+                    .text('Output tokens / document \u2192');
+
+                // "Less verbose" / "More verbose" labels
+                gRef.append('text')
+                    .attr('x', pl + 6).attr('y', pt - 5)
+                    .attr('text-anchor', 'start')
+                    .attr('fill', subtleText)
+                    .attr('font-size', (fontSize * 0.62) + 'px')
+                    .attr('font-style', 'italic')
+                    .attr('font-family', 'system-ui, -apple-system, sans-serif')
+                    .text('\u2190 concise');
+
+                gRef.append('text')
+                    .attr('x', pr - 6).attr('y', pt - 5)
+                    .attr('text-anchor', 'end')
+                    .attr('fill', subtleText)
+                    .attr('font-size', (fontSize * 0.62) + 'px')
+                    .attr('font-style', 'italic')
+                    .attr('font-family', 'system-ui, -apple-system, sans-serif')
+                    .text('verbose \u2192');
+
+                // ─── MODEL FAMILY LEGEND ───
+                const gLeg = svg.selectAll('g.legend').data([0]).join('g').attr('class', 'legend');
+                gLeg.selectAll('*').remove();
+                const legDotR = Math.max(3, fontSize * 0.35);
+                const legGap = Math.max(68, width * 0.082);
+                const totalLegW = familyOrder.length * legGap;
+                const legStartX = Math.max(pl, (width - totalLegW) / 2);
+                const legY = height * 0.055;
+
+                familyOrder.forEach((fam, i) => {
+                    const lx = legStartX + i * legGap;
+                    gLeg.append('circle')
+                        .attr('cx', lx).attr('cy', legY)
+                        .attr('r', legDotR)
+                        .attr('fill', familyColors[fam]).attr('fill-opacity', 0.85);
+                    gLeg.append('text')
+                        .attr('x', lx + legDotR + 4).attr('y', legY)
+                        .attr('dominant-baseline', 'central')
+                        .attr('fill', isDark ? 'rgba(255,255,255,0.48)' : 'rgba(0,0,0,0.42)')
+                        .attr('font-size', (fontSize * 0.72) + 'px')
+                        .attr('font-weight', fam === 'SmolLM2' ? '700' : '500')
+                        .attr('font-family', 'system-ui, -apple-system, sans-serif')
+                        .text(fam);
+                });
+
+                // ─── 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 14px', borderRadius: '12px',
+                        fontSize: '12px', lineHeight: '1.4',
+                        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', maxWidth: '320px'
+                    });
+                    tipInner = document.createElement('div');
+                    tipInner.className = 'd3-tooltip__inner';
+                    Object.assign(tipInner.style, {
+                        textAlign: 'left', display: 'flex', flexDirection: 'column',
+                        gap: '4px', minWidth: '220px'
+                    });
+                    tip.appendChild(tipInner);
+                    container.appendChild(tip);
+                } else {
+                    tipInner = tip.querySelector('.d3-tooltip__inner') || tip;
+                }
+
+                // ─── DOTS ───
+                const gDots = svg.selectAll('g.dots').data([0]).join('g').attr('class', 'dots');
+
+                const handleEnter = function (ev, d) {
+                    gDots.selectAll('circle').attr('fill-opacity', 0.12).attr('stroke-opacity', 0.05);
+                    // Highlight same family across all prompts
+                    gDots.selectAll('circle')
+                        .filter(c => c.family === d.family)
+                        .attr('fill-opacity', 0.60).attr('stroke-opacity', 0.4);
+                    d3.select(this)
+                        .raise()
+                        .attr('fill-opacity', 1)
+                        .attr('stroke-opacity', 1)
+                        .style('filter', `drop-shadow(0 0 8px ${glowColor})`)
+                        .transition().duration(90).ease(d3.easeCubicOut)
+                        .attr('r', rBase * 1.5);
+                    tipInner.innerHTML = buildTip(d);
+                    tip.style.opacity = '1';
+                };
+                const handleMove = (ev) => {
+                    const [mx, my] = d3.pointer(ev, container);
+                    const bw = tip.offsetWidth || 260;
+                    const bh = tip.offsetHeight || 180;
+                    const ox = (mx + bw + 20 > width) ? -(bw + 12) : 12;
+                    const oy = (my + bh + 20 > height) ? -(bh + 12) : 14;
+                    tip.style.transform = `translate(${Math.round(mx + ox)}px, ${Math.round(my + oy)}px)`;
+                };
+                const handleLeave = function (ev, d) {
+                    gDots.selectAll('circle')
+                        .attr('fill-opacity', 0.82)
+                        .attr('stroke-opacity', 0.30);
+                    d3.select(this)
+                        .style('filter', null)
+                        .transition().duration(90).ease(d3.easeCubicOut)
+                        .attr('r', rBase);
+                    tip.style.opacity = '0';
+                    tip.style.transform = 'translate(-9999px, -9999px)';
+                };
+
+                gDots.selectAll('circle').data(filtered, d => d.idx)
+                    .join(
+                        enter => enter.append('circle')
+                            .attr('cx', d => d.x).attr('cy', d => d.y)
+                            .attr('r', rBase)
+                            .attr('fill', d => familyColors[d.family] || '#aaa')
+                            .attr('fill-opacity', 0.82)
+                            .attr('stroke', d => d.family === 'SmolLM2' ? '#fff' : (familyColors[d.family] || '#aaa'))
+                            .attr('stroke-width', d => d.family === 'SmolLM2' ? 1.5 : 0.9)
+                            .attr('stroke-opacity', d => d.family === 'SmolLM2' ? 0.5 : 0.30)
+                            .on('mouseenter', handleEnter)
+                            .on('mousemove', handleMove)
+                            .on('mouseleave', handleLeave),
+                        update => update
+                            .attr('cx', d => d.x).attr('cy', d => d.y)
+                            .attr('r', rBase)
+                            .attr('fill', d => familyColors[d.family] || '#aaa')
+                            .attr('fill-opacity', 0.82)
+                            .attr('stroke', d => d.family === 'SmolLM2' ? '#fff' : (familyColors[d.family] || '#aaa'))
+                            .attr('stroke-width', d => d.family === 'SmolLM2' ? 1.5 : 0.9)
+                            .attr('stroke-opacity', d => d.family === 'SmolLM2' ? 0.5 : 0.30)
+                            .on('mouseenter', handleEnter)
+                            .on('mousemove', handleMove)
+                            .on('mouseleave', handleLeave)
+                    );
+
+                // ─── BREATHING ───
+                if (animFrame) cancelAnimationFrame(animFrame);
+                const breathe = () => {
+                    const now = Date.now() * 0.001;
+                    gDots.selectAll('circle').each(function (d) {
+                        d3.select(this).attr('r', rBase + Math.sin(now * 0.5 + d.phase) * rBase * 0.03);
+                    });
+                    animFrame = requestAnimationFrame(breathe);
+                };
+                breathe();
+            };
+
+            if (window.ResizeObserver) {
+                new ResizeObserver(() => render()).observe(container);
+            } else {
+                window.addEventListener('resize', render);
+            }
+            render();
+        };
+
+        if (document.readyState === 'loading') {
+            document.addEventListener('DOMContentLoaded', () => ensureD3(bootstrap), { once: true });
+        } else { ensureD3(bootstrap); }
+    })();
+</script>