made various improvements to the verbosity plot

app/src/content/embeds/verbosity.html

@@ -1,4 +1,4 @@
-<div class="d3-verbosity" style="width:100%;margin:10px 0;aspect-ratio:3/1;min-height:260px;"></div>
+<div class="d3-verbosity" style="width:100%;margin:10px 0;aspect-ratio:2.2/1;min-height:320px;"></div>
 <script>
     (() => {
         const ensureD3 = (cb) => {
@@ -98,6 +98,9 @@
                         outEdu: d.output_edu_score,
                         inEdu: d.input_edu_score,
                         compPerDoc: d.output_token_count_mean,
+                        inputPerDoc: d.input_token_count_mean,
+                        tokenReduction: d.token_reduction_mean,
+                        compressionRatio: d.compression_ratio,
                         phase: Math.random() * Math.PI * 2
                     };
                 });
@@ -106,12 +109,12 @@
                 // MODEL FAMILIES
                 // ═══════════════════════════════════════════════════════════
                 const familyColors = {
-                    'Gemma':   '#4EA5B7',
-                    'Qwen':    '#8B7BE8',
-                    'SmolLM2': '#E8C44A',
-                    'Falcon':  '#E889AB',
-                    'Granite': '#5BC0A4',
-                    'Llama':   '#D09090',
+                    'Gemma':   '#5b9bd5',
+                    'Qwen':    '#e07b54',
+                    'SmolLM2': '#e06b9e',
+                    'Falcon':  '#c9a046',
+                    'Granite': '#9a8ec2',
+                    'Llama':   '#8bc474',
                 };
                 const familyOrder = ['Gemma','Qwen','SmolLM2','Falcon','Granite','Llama'];
 
@@ -145,9 +148,11 @@
                     `<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);">Input/doc</span><span>${Math.round(d.inputPerDoc)} tokens</span>` +
                     `<span style="color:var(--muted-color);">Output/doc</span><span>${Math.round(d.compPerDoc)} tokens</span>` +
+                    `<span style="color:var(--muted-color);">Reduction</span><span>${Math.round(d.tokenReduction)} tokens (${(d.compressionRatio * 100).toFixed(0)}% ratio)</span>` +
                     `<span style="color:var(--muted-color);">Docs</span><span>${d.numDocs.toFixed(1)}M</span>` +
+                    `<span style="color:var(--muted-color);">Total output</span><span>${fmtB(d.compTokens)}</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>` +
@@ -168,38 +173,40 @@
 
                 const render = () => {
                     const width = container.clientWidth || 800;
-                    const height = Math.max(260, Math.round(width / 3));
+                    const height = Math.max(320, Math.round(width / 2.2));
                     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 textColor = isDark ? 'rgba(255,255,255,0.82)' : 'rgba(0,0,0,0.72)';
+                    const mutedText = isDark ? 'rgba(255,255,255,0.40)' : 'rgba(0,0,0,0.35)';
+                    const subtleText = isDark ? 'rgba(255,255,255,0.20)' : 'rgba(0,0,0,0.15)';
                     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));
+                    const fontSize = Math.max(12, Math.min(15, width / 45));
 
                     // ─── 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 labelW = Math.max(70, width * 0.08);
+                    const pl = labelW + 10;
+                    const pr = width - 4;
+                    const pt = fontSize * 2.8;
+                    const pb = height - fontSize * 5;
                     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])
+                    // ─── X SCALE: linear ───
+                    const allVals = filtered.map(d => d.compPerDoc);
+                    const xMin = Math.min(150, d3.min(allVals) - 50);
+                    const xMax = Math.max(1150, d3.max(allVals) + 50);
+                    const xScale = d3.scaleLinear()
+                        .domain([xMin, xMax])
                         .range([pl, pr]);
 
-                    const rBase = Math.max(3.5, Math.min(8, width * 0.007));
+                    const rBase = Math.max(4.5, Math.min(10, width * 0.009));
 
                     // ─── FORCE SIMULATION ───
                     filtered.forEach(d => {
@@ -260,23 +267,13 @@
                                 .attr('stroke', refLine).attr('stroke-width', 0.5);
                         }
 
-                        // SmolLM2 highlight zone
-                        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-size', (fontSize * 1.05) + 'px')
                             .attr('font-weight', '700')
                             .attr('font-family', 'system-ui, -apple-system, sans-serif')
                             .attr('letter-spacing', '-0.2px')
@@ -287,19 +284,19 @@
                     const gRef = svg.selectAll('g.ref').data([0]).join('g').attr('class', 'ref');
                     gRef.selectAll('*').remove();
 
-                    [20, 50, 100, 200, 500].forEach(v => {
+                    [200, 500, 800, 1100].forEach(v => {
                         const x = xScale(v);
-                        if (x > pl && x < pr) {
+                        if (x > pl + 10 && x < pr - 10) {
                             gRef.append('line')
                                 .attr('x1', x).attr('x2', x)
-                                .attr('y1', pb).attr('y2', pb + 3)
+                                .attr('y1', pb).attr('y2', pb + 4)
                                 .attr('stroke', mutedText).attr('stroke-width', 0.7);
                             gRef.append('text')
-                                .attr('x', x).attr('y', pb + 5)
+                                .attr('x', x).attr('y', pb + 8)
                                 .attr('text-anchor', 'middle')
                                 .attr('dominant-baseline', 'hanging')
                                 .attr('fill', mutedText)
-                                .attr('font-size', (fontSize * 0.65) + 'px')
+                                .attr('font-size', (fontSize * 0.9) + 'px')
                                 .attr('font-family', 'system-ui, -apple-system, sans-serif')
                                 .text(v);
                             gRef.append('line')
@@ -310,58 +307,90 @@
                         }
                     });
 
-                    // Axis label
+                    // Axis label (centered below tick numbers)
+                    const axisLabelY = pb + 8 + fontSize * 1.6;
                     gRef.append('text')
-                        .attr('x', pr).attr('y', pb + 16)
-                        .attr('text-anchor', 'end')
+                        .attr('x', (pl + pr) / 2).attr('y', axisLabelY)
+                        .attr('text-anchor', 'middle')
                         .attr('fill', mutedText)
-                        .attr('font-size', (fontSize * 0.72) + 'px')
+                        .attr('font-size', (fontSize * 0.9) + 'px')
                         .attr('font-weight', '600')
                         .attr('font-family', 'system-ui, -apple-system, sans-serif')
-                        .text('Output tokens / document \u2192');
+                        .text('Output tokens / document');
 
-                    // "concise" / "verbose" labels
+                    // "concise" / "verbose" arrows (aligned below first/last tick)
                     gRef.append('text')
-                        .attr('x', pl + 6).attr('y', pt - 5)
-                        .attr('text-anchor', 'start')
+                        .attr('x', xScale(200)).attr('y', axisLabelY)
+                        .attr('text-anchor', 'middle')
                         .attr('fill', subtleText)
-                        .attr('font-size', (fontSize * 0.62) + 'px')
+                        .attr('font-size', (fontSize * 0.82) + '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('x', xScale(1100)).attr('y', axisLabelY)
+                        .attr('text-anchor', 'middle')
                         .attr('fill', subtleText)
-                        .attr('font-size', (fontSize * 0.62) + 'px')
+                        .attr('font-size', (fontSize * 0.82) + '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;
+                    const legDotR = Math.max(4, fontSize * 0.38);
+                    const legFontSize = fontSize * 0.9;
+                    const legY = fontSize * 1.1;
+                    const legItemSpacing = legDotR * 2 + 6;
+
+                    // Measure text widths to compute equal center-to-center gaps
+                    const tempTexts = familyOrder.map(fam => {
+                        const t = gLeg.append('text').attr('font-size', legFontSize + 'px')
+                            .attr('font-weight', '500')
+                            .attr('font-family', 'system-ui, -apple-system, sans-serif')
+                            .text(fam);
+                        const w = t.node().getComputedTextLength();
+                        t.remove();
+                        return w;
+                    });
+                    const itemWidths = tempTexts.map(tw => legItemSpacing + tw);
+                    const totalLegW = itemWidths.reduce((a, b) => a + b, 0);
+                    const legPadding = Math.max(12, (width - totalLegW) / (familyOrder.length + 1));
+                    const totalWithPad = totalLegW + legPadding * (familyOrder.length - 1);
+                    const legStartX = (width - totalWithPad) / 2;
 
+                    let lx = legStartX;
                     familyOrder.forEach((fam, i) => {
-                        const lx = legStartX + i * legGap;
-                        gLeg.append('circle')
+                        const ig = gLeg.append('g').style('cursor', 'pointer');
+                        ig.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)
+                        ig.append('text')
+                            .attr('x', lx + legDotR + 5).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('fill', isDark ? 'rgba(255,255,255,0.65)' : 'rgba(0,0,0,0.60)')
+                            .attr('font-size', legFontSize + 'px')
+                            .attr('font-weight', '500')
                             .attr('font-family', 'system-ui, -apple-system, sans-serif')
                             .text(fam);
+                        // Hit area for easier hovering
+                        ig.append('rect')
+                            .attr('x', lx - legDotR - 4).attr('y', legY - legFontSize * 0.7)
+                            .attr('width', itemWidths[i] + 8).attr('height', legFontSize * 1.4)
+                            .attr('fill', 'transparent');
+                        ig.on('mouseenter', () => {
+                            gDots.selectAll('circle').transition().duration(80)
+                                .attr('fill-opacity', d => d.family === fam ? 0.55 : 0.06)
+                                .attr('stroke-opacity', d => d.family === fam ? 0.5 : 0.03);
+                        }).on('mouseleave', () => {
+                            gDots.selectAll('circle').transition().duration(160)
+                                .attr('fill-opacity', 0.82).attr('stroke-opacity', 0.12);
+                        });
+                        lx += itemWidths[i] + legPadding;
                     });
 
                     // ─── TOOLTIP ───
@@ -401,10 +430,10 @@
                     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);
+                        gDots.selectAll('circle').attr('fill-opacity', 0.1).attr('stroke-opacity', 0.08);
                         gDots.selectAll('circle')
                             .filter(c => c.family === d.family)
-                            .attr('fill-opacity', 0.60).attr('stroke-opacity', 0.4);
+                            .attr('fill-opacity', 0.55).attr('stroke-opacity', 0.5);
                         d3.select(this)
                             .raise()
                             .attr('fill-opacity', 1)
@@ -426,7 +455,7 @@
                     const handleLeave = function () {
                         gDots.selectAll('circle')
                             .attr('fill-opacity', 0.82)
-                            .attr('stroke-opacity', 0.30);
+                            .attr('stroke-opacity', 0.12);
                         d3.select(this)
                             .style('filter', null)
                             .transition().duration(90).ease(d3.easeCubicOut)
@@ -442,9 +471,9 @@
                                 .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)
+                                .attr('stroke', d => familyColors[d.family] || '#aaa')
+                                .attr('stroke-width', 0.7)
+                                .attr('stroke-opacity', 0.12)
                                 .on('mouseenter', handleEnter)
                                 .on('mousemove', handleMove)
                                 .on('mouseleave', handleLeave),
@@ -453,9 +482,9 @@
                                 .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)
+                                .attr('stroke', d => familyColors[d.family] || '#aaa')
+                                .attr('stroke-width', 0.7)
+                                .attr('stroke-opacity', 0.12)
                                 .on('mouseenter', handleEnter)
                                 .on('mousemove', handleMove)
                                 .on('mouseleave', handleLeave)