add first version of throughput optimization visualization

app/src/content/chapters/infrastructure.mdx

@@ -1,4 +1,5 @@
 import Image from "../../components/Image.astro";
+import HtmlEmbed from "../../components/HtmlEmbed.astro";
 import SyDLepVveg_2f81384e_bcac_806f_acb7_fd65c71dd9df from "../assets/image/SyDLepVveg_2f81384e-bcac-806f-acb7-fd65c71dd9df.jpg";
 import Screenshot_2026_01_20_at_09_42_21_2f81384e_bcac_80e6_b3fa_d06567e56b15 from "../assets/image/Screenshot_2026-01-20_at_09_42_21_2f81384e-bcac-80e6-b3fa-d06567e56b15.png";
 
@@ -484,11 +485,14 @@ The fundamental insight is that **optimization gains depend on identifying the b
 
 The Flash-Attn vLLM backend is more than 50% faster than FlashInfer [@flashinfer] across setups. This aligns with vLLM's [backend priority](https://docs.vllm.ai/en/latest/design/attention_backends/#backend-priority-cuda): on Ampere/Hopper (SM 8.x–9.x) Flash Attention is tried first, whereas on Blackwell (SM 10.x) FlashInfer has priority and may be faster there.
 
-#### Pre-training
 
-For pre-training, we know that 1B models are enough, so we are not interested in testing different sizes, but more about optimizing the setup for specific dataset-prompt-model combinations we know work well. 
+<HtmlEmbed
+  id="optimization-sweep"
+  src="d3-optimization-sweep.html"
+  title="Pre-training Throughput Optimization Sweep"
+  desc="Throughput optimization across 18 models in two tiers. Tier 0 tunes serving parameters (tp, mns, mnbt). Tier 1 adds gpu-memory-utilization and speculative decoding. Shape encodes tier, color encodes model family."
+/>
 
-We also experimented with different values of  `gpu-memory-utilization` , but they didn't make a substantial difference so we don't report them here and exclude them from the main benchmarking code for simplicity.
 
 Similar to [prior experiments](https://github.com/vllm-project/vllm/issues/6868), we also did not find significant throughput differences with non-standard block sizes (not 16).
 

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

@@ -0,0 +1,543 @@
+<div class="d3-optimization-sweep"></div>
+<style>
+  .d3-optimization-sweep { position: relative; }
+  .d3-optimization-sweep .controls {
+    display: flex;
+    gap: 16px;
+    align-items: flex-end;
+    justify-content: flex-end;
+    flex-wrap: wrap;
+    margin: 10px 0 0 0;
+  }
+  .d3-optimization-sweep .controls .control-group {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 6px;
+  }
+  .d3-optimization-sweep .controls label {
+    font-size: 12px;
+    font-weight: 700;
+    color: var(--text-color);
+  }
+  .d3-optimization-sweep .controls select {
+    appearance: none;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    border: 1px solid var(--border-color);
+    border-radius: 8px;
+    padding: 6px 28px 6px 10px;
+    background-color: var(--surface-bg);
+    color: var(--text-color);
+    font-size: 13px;
+    line-height: 1.2;
+    background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.41 1.59L6 6.17l4.59-4.58L12 3 6 9 0 3z' fill='%23999'/%3E%3C/svg%3E");
+    background-repeat: no-repeat;
+    background-position: right 8px center;
+  }
+  .d3-optimization-sweep .controls select:focus-visible {
+    outline: 2px solid var(--primary-color);
+    outline-offset: 2px;
+  }
+  .d3-optimization-sweep .legend {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 6px;
+    margin: 8px 0 0 0;
+  }
+  .d3-optimization-sweep .legend .legend-title {
+    font-size: 12px;
+    font-weight: 700;
+    color: var(--text-color);
+  }
+  .d3-optimization-sweep .legend .legend-section {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px 14px;
+  }
+  .d3-optimization-sweep .legend .item {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    white-space: nowrap;
+    font-size: 12px;
+    color: var(--text-color);
+  }
+  .d3-optimization-sweep .legend .swatch {
+    width: 14px;
+    height: 14px;
+    border-radius: 3px;
+    border: 1px solid var(--border-color);
+    flex-shrink: 0;
+  }
+  .d3-optimization-sweep .legend .shape-swatch {
+    width: 14px;
+    height: 14px;
+    flex-shrink: 0;
+  }
+  .d3-optimization-sweep .d3-tooltip {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+    transform: translate(-9999px, -9999px);
+    pointer-events: none;
+    padding: 8px 10px;
+    border-radius: 8px;
+    font-size: 12px;
+    line-height: 1.35;
+    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 .12s ease;
+    text-align: left;
+    max-width: 320px;
+    z-index: 10;
+  }
+  .d3-optimization-sweep .d3-tooltip .tip-label { color: var(--muted-color); }
+  .d3-optimization-sweep .d3-tooltip .tip-val { font-weight: 600; }
+  .d3-optimization-sweep .d3-tooltip .tip-best { color: var(--primary-color); font-weight: 700; }
+  .d3-optimization-sweep .d3-tooltip .tip-regression { color: #e05252; }
+  .d3-optimization-sweep .y-label-text {
+    font-size: 11px;
+    cursor: default;
+  }
+  .d3-optimization-sweep .speedup-label {
+    font-size: 10px;
+    font-weight: 600;
+  }
+</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 bootstrap = () => {
+      const scriptEl = document.currentScript;
+      let container = scriptEl ? scriptEl.previousElementSibling : null;
+      if (!(container && container.classList && container.classList.contains('d3-optimization-sweep'))) {
+        const cs = Array.from(document.querySelectorAll('.d3-optimization-sweep'))
+          .filter(el => !(el.dataset && el.dataset.mounted === 'true'));
+        container = cs[cs.length - 1] || null;
+      }
+      if (!container) return;
+      if (container.dataset) {
+        if (container.dataset.mounted === 'true') return;
+        container.dataset.mounted = 'true';
+      }
+      container.style.position = container.style.position || 'relative';
+
+      // ── 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' },
+      ];
+
+      const FAMILIES = ['Qwen3', 'SmolLM2', 'Gemma3', 'GPT-OSS'];
+      const TIERS = ['Baseline', 'Tier 0', 'Tier 1'];
+
+      // ── Colors & shapes ──
+      function getFamilyColors() {
+        try {
+          if (window.ColorPalettes && typeof window.ColorPalettes.getColors === 'function') {
+            return window.ColorPalettes.getColors('categorical', FAMILIES.length);
+          }
+        } catch (e) {}
+        return ['var(--primary-color)', '#e377c2', '#17becf', '#bcbd22'];
+      }
+
+      const familyPalette = getFamilyColors();
+      const familyColor = (family) => familyPalette[FAMILIES.indexOf(family)] || 'var(--primary-color)';
+      const BEST_COLOR = '#ee8a2a';
+
+      // D3 symbol generators for each tier
+      const SHAPE_SIZE = 48;
+      const SHAPE_SIZE_BEST = 80;
+      const shapeGenerators = {
+        'Baseline': d3.symbol().type(d3.symbolCircle),
+        'Tier 0': d3.symbol().type(d3.symbolDiamond),
+        'Tier 1': d3.symbol().type(d3.symbolTriangle),
+      };
+
+      // ── Tooltip ──
+      let tip = container.querySelector('.d3-tooltip');
+      let tipInner;
+      if (!tip) {
+        tip = document.createElement('div'); tip.className = 'd3-tooltip';
+        tipInner = document.createElement('div'); tipInner.className = 'd3-tooltip__inner'; tipInner.style.textAlign = 'left';
+        tip.appendChild(tipInner); container.appendChild(tip);
+      } else { tipInner = tip.querySelector('.d3-tooltip__inner') || tip; }
+
+      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 (ty < 0) ty = 4;
+        tip.style.transform = `translate(${tx}px, ${ty}px)`;
+        tip.style.opacity = '1';
+      }
+      function hideTip() {
+        tip.style.opacity = '0';
+        tip.style.transform = 'translate(-9999px, -9999px)';
+      }
+
+      // ── SVG ──
+      const svg = d3.select(container).append('svg').attr('width', '100%').style('display', 'block');
+      const gRoot = svg.append('g');
+
+      // ── State ──
+      const state = { metric: 'throughput', sort: 'speedup' };
+
+      function sortedData() {
+        const d = [...DATA];
+        if (state.sort === 'speedup') d.sort((a, b) => b.bestSpeedup - a.bestSpeedup);
+        else if (state.sort === 'baseline') d.sort((a, b) => b.baseTps - a.baseTps);
+        else if (state.sort === 'family') {
+          d.sort((a, b) => {
+            const fi = FAMILIES.indexOf(a.family) - FAMILIES.indexOf(b.family);
+            return fi !== 0 ? fi : b.bestSpeedup - a.bestSpeedup;
+          });
+        }
+        return d;
+      }
+
+      // ── Layout ──
+      const margin = { top: 10, right: 62, bottom: 42, left: 148 };
+      let width = 800, height = 500;
+
+      function updateSize() {
+        width = container.clientWidth || 800;
+        height = Math.max(400, DATA.length * 28 + 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 };
+      }
+
+      // ── Render ──
+      function render() {
+        const { iw, ih } = updateSize();
+        const data = sortedData();
+        const modelNames = data.map(d => d.model);
+
+        const yScale = d3.scaleBand().domain(modelNames).range([0, ih]).padding(0.35);
+        const bandH = yScale.bandwidth();
+
+        // X scale depends on metric
+        let xScale;
+        if (state.metric === 'throughput') {
+          const maxTps = d3.max(data, d => Math.max(d.baseTps, d.t0Tps, d.t1Tps));
+          xScale = d3.scaleLinear().domain([0, maxTps * 1.08]).range([0, iw]).nice();
+        } else {
+          const maxSpd = d3.max(data, d => Math.max(d.t0Speedup, d.t1Speedup));
+          const minSpd = d3.min(data, d => Math.min(d.t0Speedup, d.t1Speedup));
+          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);
+        gRoot.selectAll('.grid').data([0]).join('g').attr('class', 'grid')
+          .call(g => {
+            const lines = g.selectAll('line').data(gridTicks, d => d);
+            lines.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');
+        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 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) ──
+        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(
+              enter => enter.append('text').attr('class', 'y-label-text')
+                .attr('x', -8).attr('dy', '0.35em')
+                .attr('text-anchor', 'end'),
+              update => update,
+              exit => exit.remove()
+            )
+              .attr('y', d => yScale(d.model) + bandH / 2)
+              .attr('fill', d => familyColor(d.family))
+              .text(d => d.model);
+          });
+
+        // ── 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))
+          .attr('y1', 0).attr('y2', ih)
+          .attr('stroke', 'var(--text-color)').attr('stroke-width', 1.5)
+          .attr('stroke-dasharray', '4,3').attr('opacity', 0.5);
+
+        // ── Dumbbell rows ──
+        if (state.metric === 'throughput') {
+          renderThroughput(data, xScale, yScale, bandH, iw);
+        } else {
+          renderSpeedup(data, xScale, yScale, bandH, iw);
+        }
+      }
+
+      function renderThroughput(data, xScale, yScale, bandH, iw) {
+        // Remove speedup bars
+        gRoot.selectAll('.speedup-bar').remove();
+
+        // Connecting lines (baseline to rightmost point)
+        const lineData = data.map(d => ({
+          ...d,
+          x1: xScale(Math.min(d.baseTps, d.t0Tps, d.t1Tps)),
+          x2: xScale(Math.max(d.baseTps, d.t0Tps, d.t1Tps)),
+          cy: yScale(d.model) + bandH / 2,
+        }));
+        gRoot.selectAll('.conn-line').data(lineData, d => d.model).join('line')
+          .attr('class', 'conn-line')
+          .attr('x1', d => d.x1).attr('x2', d => d.x2)
+          .attr('y1', d => d.cy).attr('y2', d => d.cy)
+          .attr('stroke', d => familyColor(d.family))
+          .attr('stroke-width', 2).attr('opacity', 0.4);
+
+        // Dots: 3 per model (baseline, tier0, tier1)
+        const dots = [];
+        data.forEach(d => {
+          const cy = yScale(d.model) + bandH / 2;
+          dots.push({ ...d, tier: 'Baseline', val: d.baseTps, cx: xScale(d.baseTps), cy, isBest: d.bestTps === d.baseTps });
+          dots.push({ ...d, tier: 'Tier 0', val: d.t0Tps, cx: xScale(d.t0Tps), cy, isBest: d.bestTps === d.t0Tps && d.t0Tps !== d.baseTps });
+          dots.push({ ...d, tier: 'Tier 1', val: d.t1Tps, cx: xScale(d.t1Tps), cy, isBest: d.bestTps === d.t1Tps && d.t1Tps !== d.t0Tps && d.t1Tps !== d.baseTps });
+        });
+
+        gRoot.selectAll('.dot').data(dots, d => d.model + '-' + d.tier).join('path')
+          .attr('class', 'dot')
+          .attr('d', d => shapeGenerators[d.tier].size(d.isBest ? SHAPE_SIZE_BEST : SHAPE_SIZE)())
+          .attr('transform', d => `translate(${d.cx},${d.cy})`)
+          .attr('fill', d => d.isBest ? BEST_COLOR : familyColor(d.family))
+          .attr('stroke', d => d.isBest ? 'var(--text-color)' : 'none')
+          .attr('stroke-width', d => d.isBest ? 1.5 : 0)
+          .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', d => d.bestSpeedup >= 1.3 ? BEST_COLOR : 'var(--muted-color)')
+          .attr('font-weight', d => d.bestSpeedup >= 1.3 ? 700 : 400)
+          .text(d => d.bestSpeedup.toFixed(2) + 'x');
+      }
+
+      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
+        const barH = bandH * 0.38;
+        const barData = [];
+        data.forEach(d => {
+          const baseY = yScale(d.model);
+          barData.push({ ...d, tier: 'Tier 0', val: d.t0Speedup, y: baseY + bandH * 0.12, h: barH });
+          barData.push({ ...d, tier: 'Tier 1', val: d.t1Speedup, y: baseY + bandH * 0.5, h: barH });
+        });
+
+        const oneX = xScale(1.0);
+        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)
+          .attr('width', d => Math.abs(xScale(d.val) - oneX))
+          .attr('height', d => d.h)
+          .attr('rx', 2)
+          .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', d => d.bestSpeedup >= 1.3 ? BEST_COLOR : 'var(--muted-color)')
+          .attr('font-weight', d => d.bestSpeedup >= 1.3 ? 700 : 400)
+          .text(d => d.bestSpeedup.toFixed(2) + 'x');
+      }
+
+      function buildTooltip(d) {
+        const fmt = (v) => v.toLocaleString();
+        const spd = (v) => v.toFixed(2) + 'x';
+        const cls = (v) => v < 1.0 ? 'tip-regression' : (v >= 1.3 ? 'tip-best' : 'tip-val');
+        return `<div style="margin-bottom:4px"><strong>${d.model}</strong> <span class="tip-label">(${d.family})</span></div>`
+          + `<div><span class="tip-label">Baseline:</span> <span class="tip-val">${fmt(d.baseTps)}</span> tps/gpu <span class="tip-label">(tp=${d.baseTp})</span></div>`
+          + `<div><span class="tip-label">Tier 0:</span> <span class="${cls(d.t0Speedup)}">${fmt(d.t0Tps)}</span> tps/gpu <span class="${cls(d.t0Speedup)}">${spd(d.t0Speedup)}</span></div>`
+          + `<div style="font-size:10px;color:var(--muted-color);margin-left:8px">${d.t0Params}</div>`
+          + `<div><span class="tip-label">Tier 1:</span> <span class="${cls(d.t1Speedup)}">${fmt(d.t1Tps)}</span> tps/gpu <span class="${cls(d.t1Speedup)}">${spd(d.t1Speedup)}</span></div>`
+          + `<div style="font-size:10px;color:var(--muted-color);margin-left:8px">${d.t1Params}</div>`
+          + `<div style="margin-top:4px;border-top:1px solid var(--border-color);padding-top:4px"><span class="tip-label">Best:</span> <span class="tip-best">${fmt(d.bestTps)} tps/gpu (${spd(d.bestSpeedup)})</span></div>`
+          + `<div style="font-size:10px;color:var(--muted-color);margin-left:8px">${d.bestParams}</div>`;
+      }
+
+      // ── 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 (tps/gpu)'], ['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);
+
+      controls.appendChild(metricGroup); controls.appendChild(sortGroup);
+      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);
+      const tierSection = document.createElement('div'); tierSection.className = 'legend-section';
+      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';
+        const path = document.createElementNS(svgNS, 'path');
+        path.setAttribute('d', shapeGenerators[tier].size(SHAPE_SIZE)());
+        path.setAttribute('fill', 'var(--text-color)');
+        shapeSvg.appendChild(path);
+        const swWrap = document.createElement('span'); swWrap.className = 'shape-swatch'; swWrap.appendChild(shapeSvg);
+        const txt = document.createElement('span'); txt.textContent = tier;
+        item.appendChild(swWrap); item.appendChild(txt); tierSection.appendChild(item);
+      });
+      // "Best" indicator
+      const bestItem = document.createElement('span'); bestItem.className = 'item';
+      const bestSw = document.createElement('span'); bestSw.className = 'swatch';
+      bestSw.style.background = BEST_COLOR; bestSw.style.border = '1.5px solid var(--text-color)';
+      const bestTxt = document.createElement('span'); bestTxt.textContent = 'Best';
+      bestItem.appendChild(bestSw); bestItem.appendChild(bestTxt); tierSection.appendChild(bestItem);
+      legend.appendChild(tierSection);
+
+      // Family colors section
+      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';
+        const sw = document.createElement('span'); sw.className = 'swatch'; sw.style.background = familyPalette[i];
+        const txt = document.createElement('span'); txt.textContent = fam;
+        item.appendChild(sw); item.appendChild(txt); famSection.appendChild(item);
+      });
+      legend.appendChild(famSection);
+      container.appendChild(legend);
+
+      // ── Initial render + resize ──
+      render();
+      if (window.ResizeObserver) {
+        new ResizeObserver(() => render()).observe(container);
+      } else {
+        window.addEventListener('resize', render);
+      }
+    };
+
+    if (document.readyState === 'loading') {
+      document.addEventListener('DOMContentLoaded', () => ensureD3(bootstrap), { once: true });
+    } else {
+      ensureD3(bootstrap);
+    }
+  })();
+</script>