app/src/content/embeds/d3-bar.html

<div class="d3-bar"  ></div>
<style>
  .d3-bar .controls { margin-top: 0; display: flex; gap: 16px; align-items: center; justify-content: flex-end; flex-wrap: wrap; }
  .d3-bar .controls .control-group { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
  .d3-bar .controls label { font-size: 12px; color: var(--text-color); font-weight: 700; }
  .d3-bar .controls select { font-size: 12px; padding: 8px 28px 8px 10px; border: 1px solid var(--border-color); border-radius: 8px; background-color: var(--surface-bg); color: var(--text-color); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%230f1115' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 8px center; background-size: 12px; -webkit-appearance: none; -moz-appearance: none; appearance: none; cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease; }
  [data-theme="dark"] .d3-bar .controls select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); }
  .d3-bar .controls select:hover { border-color: var(--primary-color); }
  .d3-bar .controls select:focus { border-color: var(--primary-color); box-shadow: 0 0 0 3px rgba(232,137,171,.25); outline: none; }
  /* Header (legend + controls) placed after chart */
  .d3-bar .chart-header { display: flex; align-items: flex-start; justify-content: flex-start; gap: 12px; margin: 8px 0 0 0; flex-wrap: wrap; }
  .d3-bar .legend-bottom { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; font-size: 12px; color: var(--text-color); }
  .d3-bar .legend-bottom .legend-title { font-size: 12px; font-weight: 700; color: var(--text-color); }
  .d3-bar .legend-bottom .items { display: flex; flex-wrap: wrap; gap: 8px 14px; }
  .d3-bar .legend-bottom .item { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
  .d3-bar .legend-bottom .swatch { width: 14px; height: 14px; border-radius: 3px; border: 1px solid var(--border-color); display: inline-block; }
  .d3-bar.hovering .legend-bottom .item.ghost { opacity: .35; }
  .d3-bar.hovering .bars path.ghost { opacity: .35; }
  .d3-bar .axis-label { fill: var(--text-color); font-size: 12px; font-weight: 700; }
  /* Apply axis/tick/grid purely via CSS */
  .d3-bar .axes path,
  .d3-bar .axes line { stroke: var(--axis-color); }
  .d3-bar .axes text { fill: var(--tick-color); }
  .d3-bar .grid line { stroke: var(--grid-color); }
  /* Tooltip improvements */
  .d3-bar .d3-tooltip { z-index: var(--z-tooltip); backdrop-filter: saturate(1.12) blur(8px); }
  /* Hover/transition styling for bars and legend */
  .d3-bar .bars path.bar { transition: opacity .12s ease, stroke .12s ease, stroke-width .12s ease; }
  .d3-bar .bars path.bar.highlight { stroke: none; stroke-width: 0; }
  .d3-bar.hovering .bars path.ghost { opacity: .25; }
  .d3-bar .legend-bottom .item.hovered { color: inherit; }
  .d3-bar .legend-bottom .item.hovered .swatch { border-color: var(--border-color); }
  .d3-bar .d3-tooltip .swatch { width: 12px; height: 12px; border-radius: 3px; border: 1px solid var(--border-color); display: inline-block; margin-right: 6px; vertical-align: -2px; }
  /* Chart card wrapper */
  .d3-bar .chart-card { background: var(--surface-bg); border: 1px solid var(--border-color); border-radius: 10px; padding: 8px; }
  /* Layout adjustments to give controls more space */
  .d3-bar .chart-header {
    padding-left: 8px;
    padding-right: 8px;
    gap: 20px;
  }
  .d3-bar .controls {
    justify-content: flex-start;
    min-width: 320px;
  }
  .d3-bar .controls .control-group {
    min-width: 150px;
  }
  .d3-bar .controls select {
    font-size: 13px;
    min-width: 160px;
  }
</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 mount = document.currentScript ? document.currentScript.previousElementSibling : null;
      const container = (mount && mount.querySelector && mount.querySelector('.d3-bar')) || document.querySelector('.d3-bar');
      if (!container) return;
      if (container.dataset) { if (container.dataset.mounted === 'true') return; container.dataset.mounted = 'true'; }

      // Data, matching bar.py
      const seqLabels = ["1024","2048","4096","8192"];
      const seqScale = [1,2,4,8];
      const componentKeys = ['parameters','gradients','optimizer','activations'];
      const modelSizes = ["1B","3B","8B","70B","405B"];
      const paramsMem = { "1B":4.0, "3B":13.3, "8B":26.0, "70B":244.0, "405B":1520.0 };
      const actCoeff = { "1B":3.6, "3B":9.3, "8B":46.2, "70B":145.7, "405B":1519.9 };
      const recomputeModes = ["none","selective","full"];

      const activationsCurve = (sizeKey, mode) => {
        const coeff = actCoeff[sizeKey];
        let arr = seqScale.map((v) => coeff * (v * v));
        if (mode === 'selective') arr = arr.map((v) => v * 0.25);
        else if (mode === 'full') arr = arr.map((v) => v * (1 / 16));
        return arr;
      };
      const stackFor = (sizeKey, mode) => {
        const p = seqScale.map(() => paramsMem[sizeKey]);
        const g = seqScale.map(() => paramsMem[sizeKey]);
        const o = seqScale.map(() => 2*paramsMem[sizeKey]);
        const a = activationsCurve(sizeKey, mode);
        return { parameters: p, gradients: g, optimizer: o, activations: a };
      };

      const Y = {}; // Y[mode][size][component] => array
      recomputeModes.forEach((m) => {
        Y[m] = {}; modelSizes.forEach((s) => { Y[m][s] = stackFor(s, m); });
      });

      // Controls
      const controls = document.createElement('div');
      controls.className = 'controls';
      const groupSize = document.createElement('div'); groupSize.className = 'control-group';
      const labelSize = document.createElement('label'); labelSize.textContent = 'Model Size';
      const selSize = document.createElement('select'); modelSizes.forEach((s) => { const o = document.createElement('option'); o.value = s; o.textContent = s; selSize.appendChild(o); });
      groupSize.appendChild(labelSize); groupSize.appendChild(selSize);
      const groupRecomp = document.createElement('div'); groupRecomp.className = 'control-group';
      const labelRecomp = document.createElement('label'); labelRecomp.textContent = 'Recomputation';
      const selRecomp = document.createElement('select'); recomputeModes.forEach((m) => { const o = document.createElement('option'); o.value = m; o.textContent = m; selRecomp.appendChild(o); });
      groupRecomp.appendChild(labelRecomp); groupRecomp.appendChild(selRecomp);

      // Header (legend + controls) to be placed after chart
      const header = document.createElement('div'); header.className = 'chart-header';
      const legendBottom = document.createElement('div'); legendBottom.className = 'legend-bottom';
      const legendTitle = document.createElement('div'); legendTitle.className = 'legend-title'; legendTitle.textContent = 'Legend';
      const legendItems = document.createElement('div'); legendItems.className = 'items';
      legendBottom.appendChild(legendTitle); legendBottom.appendChild(legendItems);
      header.appendChild(legendBottom);
      header.appendChild(controls);
      // SVG scaffolding inside a card wrapper
      const card = document.createElement('div'); card.className = 'chart-card'; container.appendChild(card);
      // Place header after the chart card
      container.appendChild(header);
      const svg = d3.select(card).append('svg').attr('width','100%').style('display','block');
      const gRoot = svg.append('g');
      const gGrid = gRoot.append('g').attr('class','grid');
      const gAxes = gRoot.append('g').attr('class','axes');
      const gBars = gRoot.append('g').attr('class','bars');

      // 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:'8px 10px', borderRadius:'8px', fontSize:'12px', lineHeight:'1.35', border:'1px solid var(--border-color)', background:'var(--surface-bg)', color:'var(--text-color)', boxShadow:'0 4px 24px rgba(0,0,0,.18)', opacity:'0', transition:'opacity .12s ease' }); 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; }

      // State
      let currentSize = modelSizes[0];
      let currentMode = 'selective';
      selRecomp.value = currentMode;

      // Layout & scales
      let width=800, height=360; const margin = { top: 16, right: 28, bottom: 56, left: 64 };
      const x0 = d3.scaleBand().paddingInner(0.25).paddingOuter(0.1); // groups (seq)
      const y = d3.scaleLinear();
      function getCategoricalColors(count){
        try {
          if (window.ColorPalettes && typeof window.ColorPalettes.getColors === 'function') {
            return window.ColorPalettes.getColors('categorical', count);
          }
        } catch(_) {}
        const primary = getComputedStyle(document.documentElement).getPropertyValue('--primary-color').trim() || '#E889AB';
        const tableau = (window.d3 && window.d3.schemeTableau10) ? window.d3.schemeTableau10 : ['#4e79a7','#f28e2b','#e15759','#76b7b2','#59a14f','#edc948','#b07aa1','#ff9da7','#9c755f','#bab0ab'];
        const pool = [primary, ...tableau];
        const arr = []; for (let i=0;i<count;i++){ arr.push(pool[i % pool.length]); }
        return arr;
      }
      const palette = getCategoricalColors(componentKeys.length);
      const colorMap = new Map(componentKeys.map((k,i)=>[k, palette[i]]));
      const colorOf = (key) => colorMap.get(key) || 'var(--primary-color)';

      function yMax(sizeKey, mode){
        const s = Y[mode][sizeKey];
        let max = 0; for (let i=0;i<seqLabels.length;i++){ const sum = s.parameters[i]+s.gradients[i]+s.optimizer[i]+s.activations[i]; if (sum>max) max=sum; }
        return max*1.05;
      }

      function renderLegend(){
        legendItems.innerHTML = componentKeys.map((key, i) => {
          const color = palette[i];
          return `<span class="item" data-key="${key}"><span class=\"swatch\" style=\"background:${color}\"></span><span>${key}</span></span>`;
        }).join('');
        legendItems.querySelectorAll('.item').forEach((el) => {
          el.addEventListener('mouseenter', () => {
            const k = el.getAttribute('data-key'); if (!k) return;
            container.classList.add('hovering');
            gBars.selectAll('path.bar').classed('ghost', d => d && d.key !== k);
            legendItems.querySelectorAll('.item').forEach(it => it.classList.toggle('ghost', it.getAttribute('data-key') !== k));
          });
          el.addEventListener('mouseleave', () => {
            container.classList.remove('hovering');
            gBars.selectAll('path.bar').classed('ghost', false);
            legendItems.querySelectorAll('.item').forEach(it => it.classList.remove('ghost'));
          });
        });
      }

      function updateScales(){
        width = container.clientWidth || 800; height = Math.max(260, Math.round(width/3)); svg.attr('width', width).attr('height', height);
        const innerWidth = width - margin.left - margin.right; const innerHeight = height - margin.top - margin.bottom; gRoot.attr('transform', `translate(${margin.left},${margin.top})`);

        x0.domain(seqLabels).range([0, innerWidth]);
        y.domain([0, yMax(currentSize, currentMode)]).range([innerHeight, 0]).nice();

        // Grid
        gGrid.selectAll('*').remove();
        gGrid.selectAll('line').data(y.ticks(6)).join('line')
          .attr('x1', 0).attr('x2', innerWidth).attr('y1', (d)=>y(d)).attr('y2', (d)=>y(d))
          .attr('stroke', 'var(--grid-color)').attr('stroke-width', 1).attr('shape-rendering', 'crispEdges');

        // Axes
        gAxes.selectAll('*').remove();
        gAxes.append('g').attr('transform', `translate(0,${innerHeight})`).call(d3.axisBottom(x0)).call((g)=>{ g.selectAll('path, line').attr('stroke', 'var(--axis-color)'); g.selectAll('text').attr('fill', 'var(--tick-color)').style('font-size','12px'); });
        gAxes.append('g').call(d3.axisLeft(y).ticks(6).tickFormat(d3.format('~f'))).call((g)=>{ g.selectAll('path, line').attr('stroke', 'var(--axis-color)'); g.selectAll('text').attr('fill', 'var(--tick-color)').style('font-size','12px'); });

        // Axis labels
        gAxes.append('text').attr('class','axis-label axis-label--x').attr('x', innerWidth/2).attr('y', innerHeight + 44).attr('text-anchor','middle').text('Sequence Length');
        gAxes.append('text').attr('class','axis-label axis-label--y').attr('text-anchor','middle').attr('transform', `translate(${-52},${innerHeight/2}) rotate(-90)`).text('Memory (GB)');

        renderLegend();

        return { innerWidth, innerHeight };
      }

      function drawBars(){
        const stacks = Y[currentMode][currentSize];
        const series = componentKeys.map((key, i)=>({ key, color: palette[i], values: stacks[key] }));
        // Stack values
        const stacked = seqLabels.map((label, i) => {
          let acc = 0; const items = [];
          series.forEach((s, idx) => {
            const y0 = acc; const y1 = acc + s.values[i];
            items.push({ key: s.key, color: s.color, i, y0, y1, xLabel: label, value: s.values[i], isBottom: idx === 0, isTop: idx === series.length - 1 });
            acc = y1;
          });
          const total = acc;
          items.forEach(it => { it.total = total; });
          return { label, items };
        });

        const { innerWidth, innerHeight } = updateScales();

        const bandWidth = x0.bandwidth();
        const groups = gBars.selectAll('g.bar-group').data(stacked, d=>d.label);
        const groupsEnter = groups.enter().append('g').attr('class','bar-group');
        groupsEnter.merge(groups).attr('transform', (d)=>`translate(${x0(d.label)},0)`);
        groups.exit().remove();

        // Helper to draw per-corner rounded rectangle path
        const rCorner = 4;
        const roundedPath = (x, yTop, w, h, isTop, isBottom) => {
          const r = Math.min(rCorner, Math.max(0, Math.min(w, h) / 2));
          const rTL = isTop ? r : 0, rTR = isTop ? r : 0, rBR = isBottom ? r : 0, rBL = isBottom ? r : 0;
          const x0 = x, y0 = yTop, x1 = x + w, y1 = yTop + h;
          return `M${x0 + rTL},${y0}`
            + `H${x1 - rTR}`
            + (rTR ? `Q${x1},${y0} ${x1},${y0 + rTR}` : `V${y0}`)
            + `V${y1 - rBR}`
            + (rBR ? `Q${x1},${y1} ${x1 - rBR},${y1}` : `H${x1}`)
            + `H${x0 + rBL}`
            + (rBL ? `Q${x0},${y1} ${x0},${y1 - rBL}` : `V${y1}`)
            + `V${y0 + rTL}`
            + (rTL ? `Q${x0},${y0} ${x0 + rTL},${y0}` : `H${x0}`)
            + 'Z';
        };

        const bars = groupsEnter.merge(groups).selectAll('path.bar').data(d=>d.items, d=>d.key);
        bars.enter().append('path').attr('class','bar')
          .attr('d', (d)=> roundedPath(0, y(d.y1), bandWidth, Math.max(0.5, y(d.y0) - y(d.y1)), d.isTop, d.isBottom))
          .attr('fill', (d)=>d.color)
          .on('mouseenter', function(ev, d){
            container.classList.add('hovering');
            gBars.selectAll('path.bar').classed('ghost', (dd) => !(dd && dd.key === d.key));
            const pct = d.total > 0 ? (d.value / d.total * 100) : 0;
            tipInner.innerHTML = `
              <div style="display:flex;align-items:center;gap:6px;margin-bottom:4px;">
                <span class="swatch" style="background:${d.color}"></span>
                <strong>${d.key}</strong>
              </div>
              <div><strong>Seq</strong> ${d.xLabel}</div>
              <div><strong>Mem</strong> ${d.value.toFixed(1)} GB <span style="opacity:.7">(${pct.toFixed(0)}%)</span></div>
              <div style="opacity:.7"><strong>Total</strong> ${d.total.toFixed(1)} GB</div>
            `;
            tip.style.opacity = '1';
            const li = legendItems.querySelector(`.item[data-key="${d.key}"]`);
            if (li) li.classList.add('hovered');
            legendItems.querySelectorAll('.item').forEach(it => it.classList.toggle('ghost', it.getAttribute('data-key') !== d.key));
          })
          .on('mousemove', function(ev, d){
            const [mx, my] = d3.pointer(ev, container);
            const offsetX = 12, offsetY = 12;
            const maxX = (container.clientWidth || 0) - (tip.offsetWidth + 6);
            const maxY = (container.clientHeight || 0) - (tip.offsetHeight + 6);
            const tx = Math.max(0, Math.min(mx + offsetX, maxX));
            const ty = Math.max(0, Math.min(my + offsetY, maxY));
            tip.style.transform = `translate(${Math.round(tx)}px, ${Math.round(ty)}px)`;
          })
          .on('mouseleave', function(){
            tip.style.opacity='0';
            tip.style.transform='translate(-9999px, -9999px)';
            container.classList.remove('hovering');
            gBars.selectAll('path.bar').classed('ghost', false).classed('highlight', false);
            legendItems.querySelectorAll('.item').forEach(it => { it.classList.remove('hovered'); it.classList.remove('ghost'); });
          })
          .merge(bars)
          .transition().duration(200)
          .attr('d', (d)=> roundedPath(0, y(d.y1), bandWidth, Math.max(0.5, y(d.y0) - y(d.y1)), d.isTop, d.isBottom))
          .attr('fill', (d)=>d.color);
        bars.exit().remove();
      }

      function update(){ drawBars(); }

      // Boot
      update();
      // controls already appended to footer; populate control groups
      controls.appendChild(groupSize); controls.appendChild(groupRecomp);
      selSize.addEventListener('change', (e)=>{ currentSize = e.target.value; update(); });
      selRecomp.addEventListener('change', (e)=>{ currentMode = e.target.value; update(); });

      const rerender = () => { update(); };
      if (window.ResizeObserver) { const ro = new ResizeObserver(()=>rerender()); ro.observe(container); } else { window.addEventListener('resize', rerender); }
    };

    if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', () => ensureD3(bootstrap), { once: true }); } else { ensureD3(bootstrap); }
  })();
</script>