refactored the throughput optimization visualization

app/src/content/embeds/d3-optimization-sweep.html

@@ -141,28 +141,31 @@
 
       // ── Data ──
       const DATA = [
-        { model: 'Qwen3-0.6B', family: 'Qwen3', baseTp: 1, baseTps: 13527, t0Tps: 14069, t0Speedup: 1.04, t0Params: 'mns=512', t1Tps: 12330, t1Speedup: 0.91, t1Params: 'mns=512, gmu=95', bestTps: 14069, bestSpeedup: 1.04, bestParams: 'mns=512' },
-        { model: 'Qwen3-1.7B', family: 'Qwen3', baseTp: 1, baseTps: 11710, t0Tps: 12313, t0Speedup: 1.05, t0Params: 'mnbt=32768', t1Tps: 11262, t1Speedup: 0.96, t1Params: 'mnbt=32768, gmu=95', bestTps: 12313, bestSpeedup: 1.05, bestParams: 'mnbt=32768' },
-        { model: 'Qwen3-14B', family: 'Qwen3', baseTp: 1, baseTps: 4414, t0Tps: 4549, t0Speedup: 1.03, t0Params: 'tp=2', t1Tps: 4158, t1Speedup: 0.94, t1Params: 'tp=2', bestTps: 4549, bestSpeedup: 1.03, bestParams: 'tp=2' },
-        { model: 'Qwen3-30B-A3B', family: 'Qwen3', baseTp: 1, baseTps: 2977, t0Tps: 5310, t0Speedup: 1.78, t0Params: 'tp=2, mns=512, mnbt=32768', t1Tps: 5064, t1Speedup: 1.70, t1Params: 'tp=2, mns=512, mnbt=32768, gmu=95', bestTps: 5310, bestSpeedup: 1.78, bestParams: 'tp=2, mns=512, mnbt=32768' },
-        { model: 'Qwen3-32B', family: 'Qwen3', baseTp: 4, baseTps: 1987, t0Tps: 2072, t0Speedup: 1.04, t0Params: 'mns=512, mnbt=16384', t1Tps: 2078, t1Speedup: 1.05, t1Params: 'mns=512, mnbt=16384, gmu=95', bestTps: 2078, bestSpeedup: 1.05, bestParams: 'mns=512, mnbt=16384, gmu=95' },
-        { model: 'Qwen3-4B', family: 'Qwen3', baseTp: 1, baseTps: 7919, t0Tps: 8086, t0Speedup: 1.02, t0Params: 'mnbt=32768', t1Tps: 7751, t1Speedup: 0.98, t1Params: 'mnbt=32768, gmu=95', bestTps: 8086, bestSpeedup: 1.02, bestParams: 'mnbt=32768' },
-        { model: 'Qwen3-8B', family: 'Qwen3', baseTp: 1, baseTps: 6338, t0Tps: 6338, t0Speedup: 1.00, t0Params: '(baseline)', t1Tps: 6443, t1Speedup: 1.02, t1Params: 'gmu=95', bestTps: 6443, bestSpeedup: 1.02, bestParams: 'gmu=95' },
-        { model: 'Qwen3-Next-80B-A3B', family: 'Qwen3', baseTp: 4, baseTps: 2034, t0Tps: 2678, t0Speedup: 1.32, t0Params: 'mns=512', t1Tps: 2481, t1Speedup: 1.22, t1Params: 'mns=512', bestTps: 2678, bestSpeedup: 1.32, bestParams: 'mns=512' },
-        { model: 'SmolLM2-1.7B', family: 'SmolLM2', baseTp: 1, baseTps: 5255, t0Tps: 5437, t0Speedup: 1.03, t0Params: 'mns=2048, mnbt=32768', t1Tps: 9220, t1Speedup: 1.75, t1Params: 'mns=2048, mnbt=32768, gmu=95, spec=suffix_32', bestTps: 9220, bestSpeedup: 1.75, bestParams: 'mns=2048, mnbt=32768, gmu=95, spec=suffix_32' },
-        { model: 'SmolLM2-135M', family: 'SmolLM2', baseTp: 1, baseTps: 28391, t0Tps: 31186, t0Speedup: 1.10, t0Params: 'mns=512, mnbt=32768', t1Tps: 45540, t1Speedup: 1.60, t1Params: 'mns=512, mnbt=32768, spec=ngram_6', bestTps: 45540, bestSpeedup: 1.60, bestParams: 'mns=512, mnbt=32768, spec=ngram_6' },
-        { model: 'SmolLM2-360M', family: 'SmolLM2', baseTp: 1, baseTps: 17887, t0Tps: 18844, t0Speedup: 1.05, t0Params: 'mns=512', t1Tps: 23996, t1Speedup: 1.34, t1Params: 'mns=512, spec=ngram_6', bestTps: 23996, bestSpeedup: 1.34, bestParams: 'mns=512, spec=ngram_6' },
-        { model: 'Gemma-3-12B', family: 'Gemma3', baseTp: 1, baseTps: 2999, t0Tps: 2999, t0Speedup: 1.00, t0Params: '(baseline)', t1Tps: 3046, t1Speedup: 1.02, t1Params: 'gmu=95', bestTps: 3046, bestSpeedup: 1.02, bestParams: 'gmu=95' },
-        { model: 'Gemma-3-1B', family: 'Gemma3', baseTp: 1, baseTps: 14838, t0Tps: 16762, t0Speedup: 1.13, t0Params: 'mns=4096, mnbt=32768', t1Tps: 13832, t1Speedup: 0.93, t1Params: 'mns=4096, mnbt=32768, gmu=95', bestTps: 16762, bestSpeedup: 1.13, bestParams: 'mns=4096, mnbt=32768' },
-        { model: 'Gemma-3-270M', family: 'Gemma3', baseTp: 1, baseTps: 22996, t0Tps: 23585, t0Speedup: 1.03, t0Params: 'mnbt=32768', t1Tps: 21030, t1Speedup: 0.91, t1Params: 'mnbt=32768', bestTps: 23585, bestSpeedup: 1.03, bestParams: 'mnbt=32768' },
-        { model: 'Gemma-3-27B', family: 'Gemma3', baseTp: 2, baseTps: 1724, t0Tps: 1724, t0Speedup: 1.00, t0Params: '(baseline)', t1Tps: 1671, t1Speedup: 0.97, t1Params: 'gmu=95', bestTps: 1724, bestSpeedup: 1.00, bestParams: '(baseline)' },
-        { model: 'Gemma-3-4B', family: 'Gemma3', baseTp: 1, baseTps: 8501, t0Tps: 9253, t0Speedup: 1.09, t0Params: 'mns=1024, mnbt=32768', t1Tps: 8361, t1Speedup: 0.98, t1Params: 'mns=1024, mnbt=32768', bestTps: 9253, bestSpeedup: 1.09, bestParams: 'mns=1024, mnbt=32768' },
-        { model: 'GPT-OSS-120B', family: 'GPT-OSS', baseTp: 1, baseTps: 3138, t0Tps: 6117, t0Speedup: 1.95, t0Params: 'tp=2, mns=1024, mnbt=32768', t1Tps: 5450, t1Speedup: 1.74, t1Params: 'tp=2, mns=1024, mnbt=32768', bestTps: 6117, bestSpeedup: 1.95, bestParams: 'tp=2, mns=1024, mnbt=32768' },
-        { model: 'GPT-OSS-20B', family: 'GPT-OSS', baseTp: 1, baseTps: 12432, t0Tps: 14671, t0Speedup: 1.18, t0Params: 'mns=512, mnbt=16384', t1Tps: 13004, t1Speedup: 1.05, t1Params: 'mns=512, mnbt=16384', bestTps: 14671, bestSpeedup: 1.18, bestParams: 'mns=512, mnbt=16384' },
+        { model: 'Qwen3-0.6B', family: 'Qwen3', baseTp: 1, baseTps: 13527, t0Tps: 14069, t0Speedup: 1.04, t0Params: 'mns=512', t1Tps: 12330, t1Speedup: 0.91, t1Params: 'mns=512, gmu=95', bestSpeedup: 1.04 },
+        { model: 'Qwen3-1.7B', family: 'Qwen3', baseTp: 1, baseTps: 11710, t0Tps: 12313, t0Speedup: 1.05, t0Params: 'mnbt=32768', t1Tps: 11262, t1Speedup: 0.96, t1Params: 'mnbt=32768, gmu=95', bestSpeedup: 1.05 },
+        { model: 'Qwen3-14B', family: 'Qwen3', baseTp: 1, baseTps: 4414, t0Tps: 4549, t0Speedup: 1.03, t0Params: 'tp=2', t1Tps: 4158, t1Speedup: 0.94, t1Params: 'tp=2', bestSpeedup: 1.03 },
+        { model: 'Qwen3-30B-A3B', family: 'Qwen3', baseTp: 1, baseTps: 2977, t0Tps: 5310, t0Speedup: 1.78, t0Params: 'tp=2, mns=512, mnbt=32768', t1Tps: 5064, t1Speedup: 1.70, t1Params: 'tp=2, mns=512, mnbt=32768, gmu=95', bestSpeedup: 1.78 },
+        { model: 'Qwen3-32B', family: 'Qwen3', baseTp: 4, baseTps: 1987, t0Tps: 2072, t0Speedup: 1.04, t0Params: 'mns=512, mnbt=16384', t1Tps: 2078, t1Speedup: 1.05, t1Params: 'mns=512, mnbt=16384, gmu=95', bestSpeedup: 1.05 },
+        { model: 'Qwen3-4B', family: 'Qwen3', baseTp: 1, baseTps: 7919, t0Tps: 8086, t0Speedup: 1.02, t0Params: 'mnbt=32768', t1Tps: 7751, t1Speedup: 0.98, t1Params: 'mnbt=32768, gmu=95', bestSpeedup: 1.02 },
+        { model: 'Qwen3-8B', family: 'Qwen3', baseTp: 1, baseTps: 6338, t0Tps: 6338, t0Speedup: 1.00, t0Params: '(baseline)', t1Tps: 6443, t1Speedup: 1.02, t1Params: 'gmu=95', bestSpeedup: 1.02 },
+        { model: 'Qwen3-Next-80B-A3B', family: 'Qwen3', baseTp: 4, baseTps: 2034, t0Tps: 2678, t0Speedup: 1.32, t0Params: 'mns=512', t1Tps: 2481, t1Speedup: 1.22, t1Params: 'mns=512', bestSpeedup: 1.32 },
+        { model: 'SmolLM2-1.7B', family: 'SmolLM2', baseTp: 1, baseTps: 5255, t0Tps: 5437, t0Speedup: 1.03, t0Params: 'mns=2048, mnbt=32768', t1Tps: 9220, t1Speedup: 1.75, t1Params: 'mns=2048, mnbt=32768, gmu=95, spec=suffix_32', bestSpeedup: 1.75 },
+        { model: 'SmolLM2-135M', family: 'SmolLM2', baseTp: 1, baseTps: 28391, t0Tps: 31186, t0Speedup: 1.10, t0Params: 'mns=512, mnbt=32768', t1Tps: 45540, t1Speedup: 1.60, t1Params: 'mns=512, mnbt=32768, spec=ngram_6', bestSpeedup: 1.60 },
+        { model: 'SmolLM2-360M', family: 'SmolLM2', baseTp: 1, baseTps: 17887, t0Tps: 18844, t0Speedup: 1.05, t0Params: 'mns=512', t1Tps: 23996, t1Speedup: 1.34, t1Params: 'mns=512, spec=ngram_6', bestSpeedup: 1.34 },
+        { model: 'Gemma-3-12B', family: 'Gemma3', baseTp: 1, baseTps: 2999, t0Tps: 2999, t0Speedup: 1.00, t0Params: '(baseline)', t1Tps: 3046, t1Speedup: 1.02, t1Params: 'gmu=95', bestSpeedup: 1.02 },
+        { model: 'Gemma-3-1B', family: 'Gemma3', baseTp: 1, baseTps: 14838, t0Tps: 16762, t0Speedup: 1.13, t0Params: 'mns=4096, mnbt=32768', t1Tps: 13832, t1Speedup: 0.93, t1Params: 'mns=4096, mnbt=32768, gmu=95', bestSpeedup: 1.13 },
+        { model: 'Gemma-3-270M', family: 'Gemma3', baseTp: 1, baseTps: 22996, t0Tps: 23585, t0Speedup: 1.03, t0Params: 'mnbt=32768', t1Tps: 21030, t1Speedup: 0.91, t1Params: 'mnbt=32768', bestSpeedup: 1.03 },
+        { model: 'Gemma-3-27B', family: 'Gemma3', baseTp: 2, baseTps: 1724, t0Tps: 1724, t0Speedup: 1.00, t0Params: '(baseline)', t1Tps: 1671, t1Speedup: 0.97, t1Params: 'gmu=95', bestSpeedup: 1.00 },
+        { model: 'Gemma-3-4B', family: 'Gemma3', baseTp: 1, baseTps: 8501, t0Tps: 9253, t0Speedup: 1.09, t0Params: 'mns=1024, mnbt=32768', t1Tps: 8361, t1Speedup: 0.98, t1Params: 'mns=1024, mnbt=32768', bestSpeedup: 1.09 },
+        { model: 'GPT-OSS-120B', family: 'GPT-OSS', baseTp: 1, baseTps: 3138, t0Tps: 6117, t0Speedup: 1.95, t0Params: 'tp=2, mns=1024, mnbt=32768', t1Tps: 5450, t1Speedup: 1.74, t1Params: 'tp=2, mns=1024, mnbt=32768', bestSpeedup: 1.95 },
+        { model: 'GPT-OSS-20B', family: 'GPT-OSS', baseTp: 1, baseTps: 12432, t0Tps: 14671, t0Speedup: 1.18, t0Params: 'mns=512, mnbt=16384', t1Tps: 13004, t1Speedup: 1.05, t1Params: 'mns=512, mnbt=16384', bestSpeedup: 1.18 },
       ];
 
       const FAMILIES = ['Qwen3', 'SmolLM2', 'Gemma3', 'GPT-OSS'];
       const TIERS = ['Baseline', 'Tier 0', 'Tier 1'];
+      const SHAPE_SIZE = 42;
+      const TIER_Y_OFFSET = { 'Baseline': -0.38, 'Tier 0': 0, 'Tier 1': 0.38 };
+      const margin = { top: 24, right: 62, bottom: 42, left: 148 };
 
       // ── Colors & shapes ──
       function getFamilyColors() {
@@ -177,17 +180,12 @@
       const familyPalette = getFamilyColors();
       const familyColor = (family) => familyPalette[FAMILIES.indexOf(family)] || 'var(--primary-color)';
 
-      // D3 symbol generators for each tier
-      const SHAPE_SIZE = 42;
       const shapeGenerators = {
         'Baseline': d3.symbol().type(d3.symbolCircle),
         'Tier 0': d3.symbol().type(d3.symbolSquare),
         'Tier 1': d3.symbol().type(d3.symbolTriangle),
       };
 
-      // Vertical offsets within each band: spread tiers apart
-      const TIER_Y_OFFSET = { 'Baseline': -0.5, 'Tier 0': 0, 'Tier 1': 0.5 };
-
       // ── Tooltip ──
       let tip = container.querySelector('.d3-tooltip');
       let tipInner;
@@ -199,12 +197,10 @@
 
       function showTip(html, mx, my) {
         tipInner.innerHTML = html;
-        const tipW = tip.offsetWidth || 200;
-        const tipH = tip.offsetHeight || 100;
         const cw = container.clientWidth;
         let tx = mx + 14, ty = my - 10;
-        if (tx + tipW > cw - 8) tx = mx - tipW - 14;
-        if (ty + tipH > container.clientHeight) ty = container.clientHeight - tipH - 4;
+        if (tx + (tip.offsetWidth || 200) > cw - 8) tx = mx - (tip.offsetWidth || 200) - 14;
+        if (ty + (tip.offsetHeight || 100) > container.clientHeight) ty = container.clientHeight - (tip.offsetHeight || 100) - 4;
         if (ty < 0) ty = 4;
         tip.style.transform = `translate(${tx}px, ${ty}px)`;
         tip.style.opacity = '1';
@@ -214,6 +210,31 @@
         tip.style.transform = 'translate(-9999px, -9999px)';
       }
 
+      // ── Shared tooltip event handlers ──
+      function attachTipEvents(sel, opacityFn) {
+        sel
+          .attr('cursor', 'pointer')
+          .on('mouseenter', function (event, d) {
+            d3.select(this).attr('opacity', 1);
+            const [mx, my] = d3.pointer(event, container);
+            showTip(buildTooltip(d), mx, my);
+          })
+          .on('mousemove', function (event) {
+            const [mx, my] = d3.pointer(event, container);
+            tip.style.transform = `translate(${mx + 14}px, ${my - 10}px)`;
+          })
+          .on('mouseleave', function (event, d) {
+            d3.select(this).attr('opacity', opacityFn(d));
+            hideTip();
+          });
+      }
+
+      // ── Shared axis styling ──
+      function styleAxis(g) {
+        g.selectAll('path, line').attr('stroke', 'var(--axis-color)');
+        g.selectAll('text').attr('fill', 'var(--tick-color)').style('font-size', '11px');
+      }
+
       // ── SVG ──
       const svg = d3.select(container).append('svg').attr('width', '100%').style('display', 'block');
       const gRoot = svg.append('g');
@@ -234,28 +255,25 @@
         return d;
       }
 
-      // ── Layout ──
-      const margin = { top: 24, right: 62, bottom: 42, left: 148 };
-      let width = 800, height = 500;
-
-      function updateSize() {
-        width = container.clientWidth || 800;
-        height = Math.max(400, DATA.length * 36 + margin.top + margin.bottom);
-        svg.attr('width', width).attr('height', height);
-        gRoot.attr('transform', `translate(${margin.left},${margin.top})`);
-        return { iw: width - margin.left - margin.right, ih: height - margin.top - margin.bottom };
+      // ── X axis tick format helper ──
+      function xTickFormat() {
+        return state.metric === 'throughput'
+          ? (d => d >= 1000 ? (d / 1000) + 'k' : d)
+          : (d => d.toFixed(1) + 'x');
       }
 
       // ── Render ──
       function render() {
-        const { iw, ih } = updateSize();
-        const data = sortedData();
-        const modelNames = data.map(d => d.model);
+        const iw = (container.clientWidth || 800) - margin.left - margin.right;
+        const ih = Math.max(400, DATA.length * 36 + margin.top + margin.bottom) - margin.top - margin.bottom;
+        svg.attr('width', container.clientWidth || 800).attr('height', ih + margin.top + margin.bottom);
+        gRoot.attr('transform', `translate(${margin.left},${margin.top})`);
 
-        const yScale = d3.scaleBand().domain(modelNames).range([0, ih]).padding(0.35);
+        const data = sortedData();
+        const yScale = d3.scaleBand().domain(data.map(d => d.model)).range([0, ih]).padding(0.35);
         const bandH = yScale.bandwidth();
 
-        // X scale depends on metric
+        // X scale
         let xScale;
         if (state.metric === 'throughput') {
           const maxTps = d3.max(data, d => Math.max(d.baseTps, d.t0Tps, d.t1Tps));
@@ -266,55 +284,36 @@
           xScale = d3.scaleLinear().domain([Math.min(0.85, minSpd - 0.05), Math.max(2.05, maxSpd + 0.1)]).range([0, iw]).nice();
         }
 
-        // ── Grid ──
-        const gridTicks = xScale.ticks(8);
+        // Grid
         gRoot.selectAll('.grid').data([0]).join('g').attr('class', 'grid')
           .call(g => {
-            const lines = g.selectAll('line').data(gridTicks, d => d);
-            lines.join('line')
+            g.selectAll('line').data(xScale.ticks(8), d => d).join('line')
               .attr('x1', d => xScale(d)).attr('x2', d => xScale(d))
               .attr('y1', 0).attr('y2', ih)
               .attr('stroke', 'var(--grid-color)').attr('stroke-width', 1);
           });
 
-        // ── X axis ──
-        const xAxisGen = state.metric === 'throughput'
-          ? d3.axisBottom(xScale).ticks(8).tickFormat(d => d >= 1000 ? (d / 1000) + 'k' : d)
-          : d3.axisBottom(xScale).ticks(8).tickFormat(d => d.toFixed(1) + 'x');
+        // X axes (bottom + top)
+        const fmt = xTickFormat();
         gRoot.selectAll('.axis-x').data([0]).join('g').attr('class', 'axis-x')
           .attr('transform', `translate(0,${ih})`)
-          .call(xAxisGen)
-          .call(g => {
-            g.selectAll('path, line').attr('stroke', 'var(--axis-color)');
-            g.selectAll('text').attr('fill', 'var(--tick-color)').style('font-size', '11px');
-          });
-
-        // ── X axis top (mirrored ticks) ──
-        const xAxisTopGen = state.metric === 'throughput'
-          ? d3.axisTop(xScale).ticks(8).tickFormat(d => d >= 1000 ? (d / 1000) + 'k' : d)
-          : d3.axisTop(xScale).ticks(8).tickFormat(d => d.toFixed(1) + 'x');
+          .call(d3.axisBottom(xScale).ticks(8).tickFormat(fmt)).call(styleAxis);
         gRoot.selectAll('.axis-x-top').data([0]).join('g').attr('class', 'axis-x-top')
-          .call(xAxisTopGen)
-          .call(g => {
-            g.selectAll('path, line').attr('stroke', 'var(--axis-color)');
-            g.selectAll('text').attr('fill', 'var(--tick-color)').style('font-size', '11px');
-          });
+          .call(d3.axisTop(xScale).ticks(8).tickFormat(fmt)).call(styleAxis);
 
-        // ── X axis label ──
+        // X axis label
         const xLabel = state.metric === 'throughput' ? 'Tokens per second per GPU' : 'Speedup vs baseline';
         gRoot.selectAll('.x-label').data([0]).join('text').attr('class', 'x-label')
           .attr('x', iw / 2).attr('y', ih + margin.bottom - 4)
           .attr('text-anchor', 'middle').attr('fill', 'var(--muted-color)')
           .attr('font-size', 11).text(xLabel);
 
-        // ── Y axis (model names) ──
+        // Y axis (model names)
         gRoot.selectAll('.axis-y').data([0]).join('g').attr('class', 'axis-y')
           .call(g => {
-            const labels = g.selectAll('text.y-label-text').data(data, d => d.model);
-            labels.join(
+            g.selectAll('text.y-label-text').data(data, d => d.model).join(
               enter => enter.append('text').attr('class', 'y-label-text')
-                .attr('x', -8).attr('dy', '0.35em')
-                .attr('text-anchor', 'end'),
+                .attr('x', -8).attr('dy', '0.35em').attr('text-anchor', 'end'),
               update => update,
               exit => exit.remove()
             )
@@ -323,7 +322,7 @@
               .text(d => d.model);
           });
 
-        // ── Reference line at 1.0x in speedup mode ──
+        // Reference line at 1.0x in speedup mode
         gRoot.selectAll('.ref-line').data(state.metric === 'speedup' ? [1.0] : []).join('line')
           .attr('class', 'ref-line')
           .attr('x1', d => xScale(d)).attr('x2', d => xScale(d))
@@ -331,30 +330,39 @@
           .attr('stroke', 'var(--text-color)').attr('stroke-width', 1.5)
           .attr('stroke-dasharray', '4,3').attr('opacity', 0.5);
 
-        // ── Dumbbell rows ──
+        // View-specific elements
         if (state.metric === 'throughput') {
-          renderThroughput(data, xScale, yScale, bandH, iw);
+          gRoot.selectAll('.speedup-bar').remove();
+          renderThroughput(data, xScale, yScale, bandH);
         } else {
-          renderSpeedup(data, xScale, yScale, bandH, iw);
+          gRoot.selectAll('.conn-line').remove();
+          gRoot.selectAll('.dot').remove();
+          renderSpeedup(data, xScale, yScale, bandH);
         }
-      }
 
-      function renderThroughput(data, xScale, yScale, bandH, iw) {
-        // Remove speedup bars
-        gRoot.selectAll('.speedup-bar').remove();
+        // Speedup annotation (shared between both views)
+        gRoot.selectAll('.speedup-label').data(data, d => d.model).join('text')
+          .attr('class', 'speedup-label')
+          .attr('x', iw + 6)
+          .attr('y', d => yScale(d.model) + bandH / 2)
+          .attr('dy', '0.35em')
+          .attr('fill', 'var(--muted-color)')
+          .text(d => d.bestSpeedup.toFixed(2) + 'x');
+      }
 
+      function renderThroughput(data, xScale, yScale, bandH) {
         // Connecting lines between the three staggered dots
-        const connData = [];
-        data.forEach(d => {
-          const cyCenter = yScale(d.model) + bandH / 2;
-          const points = [
-            { x: xScale(d.baseTps), y: cyCenter + TIER_Y_OFFSET['Baseline'] * bandH },
-            { x: xScale(d.t0Tps), y: cyCenter + TIER_Y_OFFSET['Tier 0'] * bandH },
-            { x: xScale(d.t1Tps), y: cyCenter + TIER_Y_OFFSET['Tier 1'] * bandH },
-          ];
-          connData.push({ model: d.model, family: d.family, points });
-        });
         const lineGen = d3.line().x(p => p.x).y(p => p.y);
+        const connData = data.map(d => {
+          const cy = yScale(d.model) + bandH / 2;
+          return {
+            model: d.model, family: d.family,
+            points: TIERS.map((tier, i) => ({
+              x: xScale([d.baseTps, d.t0Tps, d.t1Tps][i]),
+              y: cy + TIER_Y_OFFSET[tier] * bandH,
+            })),
+          };
+        });
         gRoot.selectAll('.conn-line').data(connData, d => d.model).join('path')
           .attr('class', 'conn-line')
           .attr('d', d => lineGen(d.points))
@@ -362,54 +370,27 @@
           .attr('stroke', d => familyColor(d.family))
           .attr('stroke-width', 1.5).attr('opacity', 0.35);
 
-        // Dots: 3 per model (baseline, tier0, tier1) with vertical stagger
+        // Dots: 3 per model with vertical stagger
         const dots = [];
         data.forEach(d => {
-          const cyCenter = yScale(d.model) + bandH / 2;
-          ['Baseline', 'Tier 0', 'Tier 1'].forEach(tier => {
-            const val = tier === 'Baseline' ? d.baseTps : tier === 'Tier 0' ? d.t0Tps : d.t1Tps;
-            dots.push({ ...d, tier, val, cx: xScale(val), cy: cyCenter + TIER_Y_OFFSET[tier] * bandH });
+          const cy = yScale(d.model) + bandH / 2;
+          const vals = [d.baseTps, d.t0Tps, d.t1Tps];
+          TIERS.forEach((tier, i) => {
+            dots.push({ ...d, tier, val: vals[i], cx: xScale(vals[i]), cy: cy + TIER_Y_OFFSET[tier] * bandH });
           });
         });
 
-        gRoot.selectAll('.dot').data(dots, d => d.model + '-' + d.tier).join('path')
+        const dotSel = gRoot.selectAll('.dot').data(dots, d => d.model + '-' + d.tier).join('path')
           .attr('class', 'dot')
           .attr('d', d => shapeGenerators[d.tier].size(SHAPE_SIZE)())
           .attr('transform', d => `translate(${d.cx},${d.cy})`)
           .attr('fill', d => familyColor(d.family))
           .attr('stroke', 'none')
-          .attr('opacity', 0.9)
-          .attr('cursor', 'pointer')
-          .on('mouseenter', function (event, d) {
-            d3.select(this).attr('opacity', 1);
-            const [mx, my] = d3.pointer(event, container);
-            showTip(buildTooltip(d), mx, my);
-          })
-          .on('mousemove', function (event) {
-            const [mx, my] = d3.pointer(event, container);
-            tip.style.transform = `translate(${mx + 14}px, ${my - 10}px)`;
-          })
-          .on('mouseleave', function () {
-            d3.select(this).attr('opacity', 0.9);
-            hideTip();
-          });
-
-        // Speedup annotation on right
-        gRoot.selectAll('.speedup-label').data(data, d => d.model).join('text')
-          .attr('class', 'speedup-label')
-          .attr('x', iw + 6)
-          .attr('y', d => yScale(d.model) + bandH / 2)
-          .attr('dy', '0.35em')
-          .attr('fill', 'var(--muted-color)')
-          .text(d => d.bestSpeedup.toFixed(2) + 'x');
+          .attr('opacity', 0.9);
+        attachTipEvents(dotSel, () => 0.9);
       }
 
-      function renderSpeedup(data, xScale, yScale, bandH, iw) {
-        // Remove throughput elements
-        gRoot.selectAll('.conn-line').remove();
-        gRoot.selectAll('.dot').remove();
-
-        // Two bars per model: Tier 0 speedup, Tier 1 speedup
+      function renderSpeedup(data, xScale, yScale, bandH) {
         const barH = bandH * 0.38;
         const barData = [];
         data.forEach(d => {
@@ -419,7 +400,7 @@
         });
 
         const oneX = xScale(1.0);
-        gRoot.selectAll('.speedup-bar').data(barData, d => d.model + '-' + d.tier).join('rect')
+        const barSel = gRoot.selectAll('.speedup-bar').data(barData, d => d.model + '-' + d.tier).join('rect')
           .attr('class', 'speedup-bar')
           .attr('x', d => d.val >= 1.0 ? oneX : xScale(d.val))
           .attr('y', d => d.y)
@@ -429,30 +410,8 @@
           .attr('fill', d => familyColor(d.family))
           .attr('opacity', d => d.tier === 'Tier 0' ? 0.9 : 0.55)
           .attr('stroke', d => d.val < 1.0 ? '#e05252' : 'none')
-          .attr('stroke-width', d => d.val < 1.0 ? 1 : 0)
-          .attr('cursor', 'pointer')
-          .on('mouseenter', function (event, d) {
-            d3.select(this).attr('opacity', 1);
-            const [mx, my] = d3.pointer(event, container);
-            showTip(buildTooltip(d), mx, my);
-          })
-          .on('mousemove', function (event) {
-            const [mx, my] = d3.pointer(event, container);
-            tip.style.transform = `translate(${mx + 14}px, ${my - 10}px)`;
-          })
-          .on('mouseleave', function (event, d) {
-            d3.select(this).attr('opacity', d.tier === 'Tier 0' ? 0.9 : 0.55);
-            hideTip();
-          });
-
-        // Speedup annotation on right
-        gRoot.selectAll('.speedup-label').data(data, d => d.model).join('text')
-          .attr('class', 'speedup-label')
-          .attr('x', iw + 6)
-          .attr('y', d => yScale(d.model) + bandH / 2)
-          .attr('dy', '0.35em')
-          .attr('fill', 'var(--muted-color)')
-          .text(d => d.bestSpeedup.toFixed(2) + 'x');
+          .attr('stroke-width', d => d.val < 1.0 ? 1 : 0);
+        attachTipEvents(barSel, d => d.tier === 'Tier 0' ? 0.9 : 0.55);
       }
 
       function buildTooltip(d) {
@@ -468,48 +427,41 @@
       }
 
       // ── Controls ──
-      const controls = document.createElement('div'); controls.className = 'controls';
-
-      // Metric select
-      const metricGroup = document.createElement('div'); metricGroup.className = 'control-group';
-      const metricLabel = document.createElement('label'); metricLabel.textContent = 'Metric'; metricLabel.setAttribute('for', 'metric-sel-optsweep');
-      const metricSel = document.createElement('select'); metricSel.id = 'metric-sel-optsweep';
-      [['throughput', 'Throughput'], ['speedup', 'Speedup']].forEach(([v, t]) => {
-        const o = document.createElement('option'); o.value = v; o.textContent = t; metricSel.appendChild(o);
-      });
-      metricSel.value = state.metric;
-      metricSel.addEventListener('change', () => { state.metric = metricSel.value; render(); });
-      metricGroup.appendChild(metricLabel); metricGroup.appendChild(metricSel);
-
-      // Sort select
-      const sortGroup = document.createElement('div'); sortGroup.className = 'control-group';
-      const sortLabel = document.createElement('label'); sortLabel.textContent = 'Sort'; sortLabel.setAttribute('for', 'sort-sel-optsweep');
-      const sortSel = document.createElement('select'); sortSel.id = 'sort-sel-optsweep';
-      [['speedup', 'By Best Speedup'], ['baseline', 'By Baseline Throughput'], ['family', 'By Model Family']].forEach(([v, t]) => {
-        const o = document.createElement('option'); o.value = v; o.textContent = t; sortSel.appendChild(o);
-      });
-      sortSel.value = state.sort;
-      sortSel.addEventListener('change', () => { state.sort = sortSel.value; render(); });
-      sortGroup.appendChild(sortLabel); sortGroup.appendChild(sortSel);
+      function makeSelect(id, label, options, initial, onChange) {
+        const group = document.createElement('div'); group.className = 'control-group';
+        const lbl = document.createElement('label'); lbl.textContent = label; lbl.setAttribute('for', id);
+        const sel = document.createElement('select'); sel.id = id;
+        options.forEach(([v, t]) => {
+          const o = document.createElement('option'); o.value = v; o.textContent = t; sel.appendChild(o);
+        });
+        sel.value = initial;
+        sel.addEventListener('change', () => onChange(sel.value));
+        group.appendChild(lbl); group.appendChild(sel);
+        return group;
+      }
 
-      controls.appendChild(metricGroup); controls.appendChild(sortGroup);
+      const controls = document.createElement('div'); controls.className = 'controls';
+      controls.appendChild(makeSelect('metric-sel-optsweep', 'Metric',
+        [['throughput', 'Throughput'], ['speedup', 'Speedup']], state.metric,
+        v => { state.metric = v; render(); }));
+      controls.appendChild(makeSelect('sort-sel-optsweep', 'Sort',
+        [['speedup', 'By Best Speedup'], ['baseline', 'By Baseline Throughput'], ['family', 'By Model Family']], state.sort,
+        v => { state.sort = v; render(); }));
       container.appendChild(controls);
 
       // ── Legend ──
       const legend = document.createElement('div'); legend.className = 'legend';
-
-      // Tier shapes section
       const tierTitle = document.createElement('div'); tierTitle.className = 'legend-title'; tierTitle.textContent = 'Legend';
       legend.appendChild(tierTitle);
+
+      // Tier shapes
       const tierSection = document.createElement('div'); tierSection.className = 'legend-section';
+      const svgNS = 'http://www.w3.org/2000/svg';
       TIERS.forEach(tier => {
         const item = document.createElement('span'); item.className = 'item';
-        // SVG swatch for shape
-        const svgNS = 'http://www.w3.org/2000/svg';
         const shapeSvg = document.createElementNS(svgNS, 'svg');
         shapeSvg.setAttribute('width', '14'); shapeSvg.setAttribute('height', '14');
-        shapeSvg.setAttribute('viewBox', '-8 -8 16 16');
-        shapeSvg.style.display = 'block';
+        shapeSvg.setAttribute('viewBox', '-8 -8 16 16'); shapeSvg.style.display = 'block';
         const path = document.createElementNS(svgNS, 'path');
         path.setAttribute('d', shapeGenerators[tier].size(SHAPE_SIZE)());
         path.setAttribute('fill', 'var(--text-color)');
@@ -520,7 +472,7 @@
       });
       legend.appendChild(tierSection);
 
-      // Family colors section
+      // Family colors
       const famSection = document.createElement('div'); famSection.className = 'legend-section'; famSection.style.marginTop = '4px';
       FAMILIES.forEach((fam, i) => {
         const item = document.createElement('span'); item.className = 'item';