made throughput visualization nicer

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

@@ -98,7 +98,6 @@
   }
   .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;
@@ -177,17 +176,18 @@
 
       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 SHAPE_SIZE = 42;
       const shapeGenerators = {
         'Baseline': d3.symbol().type(d3.symbolCircle),
-        'Tier 0': d3.symbol().type(d3.symbolDiamond),
+        '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;
@@ -235,12 +235,12 @@
       }
 
       // ── Layout ──
-      const margin = { top: 10, right: 62, bottom: 42, left: 148 };
+      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 * 28 + margin.top + margin.bottom);
+        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 };
@@ -289,6 +289,17 @@
             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');
+        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');
+          });
+
         // ── 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')
@@ -332,36 +343,41 @@
         // 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')
+        // 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);
+        gRoot.selectAll('.conn-line').data(connData, d => d.model).join('path')
           .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('d', d => lineGen(d.points))
+          .attr('fill', 'none')
           .attr('stroke', d => familyColor(d.family))
-          .attr('stroke-width', 2).attr('opacity', 0.4);
+          .attr('stroke-width', 1.5).attr('opacity', 0.35);
 
-        // Dots: 3 per model (baseline, tier0, tier1)
+        // Dots: 3 per model (baseline, tier0, tier1) with vertical stagger
         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 });
+          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 });
+          });
         });
 
         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('d', d => shapeGenerators[d.tier].size(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('fill', d => familyColor(d.family))
+          .attr('stroke', 'none')
           .attr('opacity', 0.9)
           .attr('cursor', 'pointer')
           .on('mouseenter', function (event, d) {
@@ -384,8 +400,7 @@
           .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)
+          .attr('fill', 'var(--muted-color)')
           .text(d => d.bestSpeedup.toFixed(2) + 'x');
       }
 
@@ -436,23 +451,20 @@
           .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)
+          .attr('fill', 'var(--muted-color)')
           .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');
+        const cls = (v) => v < 1.0 ? 'tip-regression' : '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>`;
+          + `<div style="font-size:10px;color:var(--muted-color);margin-left:8px">${d.t1Params}</div>`;
       }
 
       // ── Controls ──
@@ -462,7 +474,7 @@
       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]) => {
+      [['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;
@@ -506,12 +518,6 @@
         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