update

.gitattributes

@@ -1,3 +1,5 @@
 *.png filter=lfs diff=lfs merge=lfs -text
 *.jpg filter=lfs diff=lfs merge=lfs -text
 *.wav filter=lfs diff=lfs merge=lfs -text
+*.csv filter=lfs diff=lfs merge=lfs -text
+*.json filter=lfs diff=lfs merge=lfs -text

app/public/data/against_baselines.csv

@@ -0,0 +1 @@
+../../src/content/assets/data/against_baselines.csv

app/public/data/finevision.csv

@@ -0,0 +1 @@
+../../src/content/assets/data/finevision.csv

app/src/components/HtmlEmbed.astro

@@ -1,6 +1,6 @@
 ---
-interface Props { src: string; title?: string; desc?: string; frameless?: boolean }
-const { src, title, desc, frameless = false } = Astro.props as Props;
+interface Props { src: string; title?: string; desc?: string; frameless?: boolean; align?: 'left' | 'center' | 'right' }
+const { src, title, desc, frameless = false, align = 'left' } = Astro.props as Props;
 
 // Load all .html embeds under src/content/embeds/** as strings (dev & build)
 const embeds = (import.meta as any).glob('../content/embeds/**/*.html', { query: '?raw', import: 'default', eager: true }) as Record<string, string>;
@@ -21,11 +21,11 @@ const mountId = `frag-${Math.random().toString(36).slice(2)}`;
 ---
 { html ? (
   <figure class="html-embed">
-    {title && <figcaption class="html-embed__title">{title}</figcaption>}
+    {title && <figcaption class="html-embed__title" style={`text-align:${align}`}>{title}</figcaption>}
     <div class={`html-embed__card${frameless ? ' is-frameless' : ''}`}>
       <div id={mountId} set:html={html} />
     </div>
-    {desc && <figcaption class="html-embed__desc" set:html={desc}></figcaption>}
+    {desc && <figcaption class="html-embed__desc" style={`text-align:${align}`} set:html={desc}></figcaption>}
   </figure>
  ) : (
   <div><!-- Fragment not found: {src} --></div>

app/src/components/ThemeToggle.astro

@@ -1,10 +1,20 @@
----
-import sunIconUrl from "../content/assets/icones/sun.svg?url";
-import moonIconUrl from "../content/assets/icones/moon.svg?url";
----
 <button id="theme-toggle" aria-label="Toggle color theme">
-  <img class="icon light" src={sunIconUrl} alt="light" width="20" height="20" />
-  <img class="icon dark" src={moonIconUrl} alt="dark" width="20" height="20" />
+  <svg class="icon light" width="20" height="20" viewBox="0 0 24 24" aria-hidden="true" focusable="false" fill="currentColor">
+    <circle cx="12" cy="12" r="5"/>
+    <g stroke="currentColor" stroke-width="2" stroke-linecap="round">
+      <line x1="12" y1="1" x2="12" y2="4"/>
+      <line x1="12" y1="20" x2="12" y2="23"/>
+      <line x1="1" y1="12" x2="4" y2="12"/>
+      <line x1="20" y1="12" x2="23" y2="12"/>
+      <line x1="4.22" y1="4.22" x2="6.34" y2="6.34"/>
+      <line x1="17.66" y1="17.66" x2="19.78" y2="19.78"/>
+      <line x1="4.22" y1="19.78" x2="6.34" y2="17.66"/>
+      <line x1="17.66" y1="6.34" x2="19.78" y2="4.22"/>
+    </g>
+  </svg>
+  <svg class="icon dark" width="20" height="20" viewBox="0 0 24 24" aria-hidden="true" focusable="false" fill="currentColor">
+    <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
+  </svg>
   <script>
     const btn = document.getElementById('theme-toggle');
     const media = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)');

app/src/content/assets/data/against_baselines.csv

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:d5db6c112739ccf6b5f98dfdd480f9748c5b78c66452b02e0168eeed6acea875
+size 50100

app/src/content/assets/data/finevision.csv

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:d28bd13dc3a9ff100c82e8c9dc59270563b865383d09cf28c5aba5812bfa75ee
+size 10913

app/src/content/chapters/available-blocks.mdx

@@ -326,6 +326,7 @@ Props (optional)
 - `title`: short title displayed above the card.
 - `desc`: short description displayed below the card. Supports inline HTML (e.g., links).
 - `frameless`: removes the card background and border for seamless embeds.
+- `align`: aligns the title/description text. One of `left` (default), `center`, `right`.
 
 <HtmlEmbed src="d3-line.html" title="D3 Line" desc="Simple time series" />
 ---
@@ -335,6 +336,15 @@ title="Memory usage with recomputation"
 desc={`Memory usage with recomputation — <a href="https://huggingface.co/spaces/nanotron/ultrascale-playbook?section=activation_recomputation" target="_blank">from the ultrascale playbook</a>`}
 />
 ---
+<FullWidth>
+<HtmlEmbed
+src="d3-pie.html"
+title="Category distribution (4 metrics)"
+desc="Pie charts by category from finevision.csv"
+align="center"
+/>
+</FullWidth>
+---
 <HtmlEmbed src="line.html" title="Plotly Line" desc="Interactive time series" />
 
 <small className="muted">Example</small>

app/src/content/chapters/writing-your-content.mdx

@@ -11,12 +11,14 @@ import audioDemo from '../assets/audio/audio-example.wav';
 
 ### Introduction
 
-Your article lives in two places
+Your article lives in one place
 
-- `app/src/content/` — where you can find the `article.mdx`, `bibliography.bib` and html fragments.
-- `app/src/content/assets/` — images, audio, and other static assets. (handled by git lfs)
+Everything is self-contained under `app/src/content/`:
+- MDX: `article.mdx` and [optional chapters](#chapters) in `chapters/`
+- Assets: `assets/` (images, audio; tracked via Git LFS)
+- Embeds: `embed/` (HTMLEmbed for Plotly/D3, etc.) — see [HtmlEmbed](#htmlembed)
 
-The `article.mdx` file is the main file that contains your article.
+The `article.mdx` file is the main entry point of your article.
 
 <small className="muted">Example</small>
 ```mdx
@@ -79,7 +81,7 @@ Below is an image imported via Astro and optimized at build time:
 **If** your article becomes **too long** for one file, you can **organize** it into **separate chapters**.
 
 Simply **create a new file** in the `app/src/content/chapters` **directory**.  
-Then, **include** your new chapter in the main article.
+Then, **include** your new chapter in the main `article.mdx` like below.
 
 
 <small className="muted">Example</small>
@@ -88,8 +90,7 @@ import MyChapter from './chapters/my-chapter.mdx';
 
 <MyChapter />
 ```
-
-You can see an example of this in the <a target="_blank" href="https://huggingface.co/spaces/tfrere/research-article-template/blob/main/app/src/content/chapters/best-pratices.mdx">app/src/content/chapters/best-pratices.mdx</a> file.
+<small className="muted">You can see a living example here <a target="_blank" href="https://huggingface.co/spaces/tfrere/research-article-template/blob/main/app/src/content/chapters/best-pratices.mdx">app/src/content/chapters/best-pratices.mdx</a>.</small>
 
 ### Table of contents
  
@@ -122,6 +123,18 @@ Here is a suggestion of **color palettes** for your **data visualizations** that
 <HtmlEmbed frameless src="palettes.html" />
 
 
+### Embeds
+
+Use HTML fragments to embed interactive charts and widgets. Place your fragments under `app/src/content/embeds/` and reference them via the `HtmlEmbed` component.
+
+<small className="muted">Example</small>
+```mdx
+import HtmlEmbed from '../components/HtmlEmbed.astro'
+
+<HtmlEmbed src="d3-line.html" title="D3 Line" desc="Simple time series" />
+```
+
+
 ### Placement
 
 Use these helpers when you need to step outside the main content flow: **Sidenotes** for contextual side notes, **Wide** to extend beyond the main column, and **Full-width** for full-width, immersive sections.

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

@@ -148,7 +148,11 @@
         // Stack values
         const stacked = seqLabels.map((label, i) => {
           let acc = 0; const items = [];
-          series.forEach((s) => { 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] }); acc = y1; });
+          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;
+          });
           return { label, items };
         });
 
@@ -160,9 +164,27 @@
         groupsEnter.merge(groups).attr('transform', (d)=>`translate(${x0(d.label)},0)`);
         groups.exit().remove();
 
-        const rects = groupsEnter.merge(groups).selectAll('rect.bar').data(d=>d.items, d=>d.key);
-        rects.enter().append('rect').attr('class','bar').attr('x', 0).attr('width', bandWidth)
-          .attr('y', (d)=>y(d.y1)).attr('height', (d)=>Math.max(0.5, y(d.y0) - y(d.y1)))
+        // 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){
             d3.select(this).attr('stroke', 'rgba(0,0,0,0.85)').attr('stroke-width', 1);
@@ -173,12 +195,11 @@
             const [mx, my] = d3.pointer(ev, container); const offsetX = 12, offsetY = 12; tip.style.transform = `translate(${Math.round(mx+offsetX)}px, ${Math.round(my+offsetY)}px)`;
           })
           .on('mouseleave', function(){ tip.style.opacity='0'; tip.style.transform='translate(-9999px, -9999px)'; d3.select(this).attr('stroke','none'); })
-          .merge(rects)
+          .merge(bars)
           .transition().duration(200)
-          .attr('width', bandWidth)
-          .attr('y', (d)=>y(d.y1)).attr('height', (d)=>Math.max(0.5, y(d.y0) - y(d.y1)))
+          .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);
-        rects.exit().remove();
+        bars.exit().remove();
       }
 
       function update(){ drawBars(); }

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

@@ -97,12 +97,19 @@
         container.dataset.mounted = 'true';
       }
 
-      // Dataset params matching the Plotly version
-      const datasets = [
-        { name: 'CIFAR-10',    base: { ymin:0.10, ymax:0.90, k:10.0, x0:0.55 }, aug: { ymin:0.15, ymax:0.96, k:12.0, x0:0.40 }, target: 0.97 },
-        { name: 'CIFAR-100',   base: { ymin:0.05, ymax:0.70, k: 9.5, x0:0.60 }, aug: { ymin:0.08, ymax:0.80, k:11.0, x0:0.45 }, target: 0.85 },
-        { name: 'ImageNet-1K', base: { ymin:0.02, ymax:0.68, k: 8.5, x0:0.65 }, aug: { ymin:0.04, ymax:0.75, k: 9.5, x0:0.50 }, target: 0.82 },
+      // CSV: prefer public path, fallback to relative
+      const CSV_PATHS = [
+        '/data/against_baselines.csv',
+        './assets/data/against_baselines.csv',
+        '../assets/data/against_baselines.csv',
+        '../../assets/data/against_baselines.csv'
       ];
+      const fetchFirstAvailable = async (paths) => {
+        for (const p of paths) {
+          try { const r = await fetch(p, { cache: 'no-cache' }); if (r.ok) return await r.text(); } catch(e) {}
+        }
+        throw new Error('CSV not found: against_baselines.csv');
+      };
 
       // Controls UI
       const controls = document.createElement('div');
@@ -111,38 +118,32 @@
         marginTop: '12px',
         display: 'flex',
         gap: '16px',
-        alignItems: 'center'
+        alignItems: 'center',
+        justifyContent: 'flex-start',
+        width: '100%'
       });
 
-      const labelDs = document.createElement('label');
-      Object.assign(labelDs.style, {
-        fontSize: '12px', color: 'rgba(0,0,0,.65)', display: 'flex', alignItems: 'center', gap: '6px', whiteSpace: 'nowrap', padding: '6px 10px'
-      });
-      labelDs.textContent = 'Dataset';
-      const selectDs = document.createElement('select');
-      Object.assign(selectDs.style, { fontSize: '12px' });
-      datasets.forEach((d, i) => {
-        const o = document.createElement('option');
-        o.value = String(i);
-        o.textContent = d.name;
-        selectDs.appendChild(o);
+      const labelMetric = document.createElement('label');
+      Object.assign(labelMetric.style, {
+        fontSize: '12px', color: 'var(--muted-color)', display: 'flex', alignItems: 'center', gap: '6px', whiteSpace: 'nowrap', padding: '6px 10px'
       });
-      labelDs.appendChild(selectDs);
-
-      const labelAlpha = document.createElement('label');
-      Object.assign(labelAlpha.style, {
-        fontSize: '12px', color: 'rgba(0,0,0,.65)', display: 'flex', alignItems: 'center', gap: '10px', flex: '1', padding: '6px 10px'
+      labelMetric.textContent = 'Metric';
+      const selectMetric = document.createElement('select');
+      Object.assign(selectMetric.style, { fontSize: '12px' });
+      labelMetric.appendChild(selectMetric);
+      controls.appendChild(labelMetric);
+
+      // Inline legend on the right of the select
+      const legendInline = document.createElement('div');
+      legendInline.className = 'controls__legend';
+      Object.assign(legendInline.style, {
+        display: 'flex',
+        gap: '8px',
+        alignItems: 'center',
+        flexWrap: 'nowrap',
+        fontSize: '11px'
       });
-      labelAlpha.appendChild(document.createTextNode('Augmentation α'));
-      const slider = document.createElement('input');
-      slider.type = 'range'; slider.min = '0'; slider.max = '1'; slider.step = '0.01'; slider.value = '0.70';
-      Object.assign(slider.style, { flex: '1' });
-      const alphaVal = document.createElement('span'); alphaVal.className = 'alpha-value'; alphaVal.textContent = slider.value;
-      labelAlpha.appendChild(slider);
-      labelAlpha.appendChild(alphaVal);
-
-      controls.appendChild(labelDs);
-      controls.appendChild(labelAlpha);
+      controls.appendChild(legendInline);
 
       // Create SVG
       const svg = d3.select(container).append('svg')
@@ -179,34 +180,15 @@
         tipInner = tip.querySelector('.d3-tooltip__inner') || tip;
       }
 
-      // Colors
-      const colorBase = '#64748b';     // slate-500
-      const colorImproved = 'var(--primary-color)';
-      const colorTarget = '#4b5563';   // gray-600
-      const legendBgLight = 'rgba(255,255,255,0.85)';
-      const legendBgDark = 'rgba(17,17,23,0.85)';
-
-      // Data and helpers
-      const N = 240;
-      const xs = Array.from({ length: N }, (_, i) => i / (N - 1));
-      const logistic = (x, { ymin, ymax, k, x0 }) => ymin + (ymax - ymin) / (1 + Math.exp(-k * (x - x0)));
-      const blend = (l, e, a) => (1 - a) * l + a * e;
-
-      let datasetIndex = 0;
-      let alpha = parseFloat(slider.value) || 0.7;
-
-      let yBase = [];
-      let yAug = [];
-      let yImp = [];
-      let yTgt = [];
-
-      function computeCurves() {
-        const d = datasets[datasetIndex];
-        yBase = xs.map((x) => logistic(x, d.base));
-        yAug  = xs.map((x) => logistic(x, d.aug));
-        yTgt  = xs.map(() => d.target);
-        yImp  = yBase.map((v, i) => blend(v, yAug[i], alpha));
-      }
+      // Colors per run
+      const primary = getComputedStyle(document.documentElement).getPropertyValue('--primary-color').trim() || '#E889AB';
+      const pool = [primary, '#4EA5B7', '#E38A42', '#CEC0FA', ...(d3.schemeTableau10||[])];
+
+      // State and data
+      let metricList = [];
+      let runList = [];
+      let runOrder = [];
+      const dataByMetric = new Map(); // metric => { run => [{step,value}] }
 
       // Scales and layout
       let width = 800, height = 360;
@@ -214,21 +196,14 @@
       let xScale = d3.scaleLinear();
       let yScale = d3.scaleLinear();
 
-      // Paths
+      // Line generator
       const lineGen = d3.line()
-        .curve(d3.curveCatmullRom.alpha(0.6))
-        .x((d, i) => xScale(xs[i]))
-        .y((d) => yScale(d));
-
-      const pathBase = gLines.append('path').attr('fill', 'none').attr('stroke', colorBase).attr('stroke-width', 2);
-      const pathImp  = gLines.append('path').attr('class', 'improved').attr('fill', 'none').style('stroke', 'var(--primary-color)').attr('stroke-width', 2);
-      const pathTgt  = gLines.append('path').attr('fill', 'none').attr('stroke', colorTarget).attr('stroke-width', 2).attr('stroke-dasharray', '6,6');
+        .curve(d3.curveCatmullRom.alpha(0.05))
+        .x((d) => xScale(d.step))
+        .y((d) => yScale(d.value));
 
       // Hover elements
       const hoverLine = gHover.append('line').attr('stroke-width', 1);
-      const hoverDotB = gHover.append('circle').attr('r', 3.5).attr('fill', colorBase).attr('stroke', '#fff').attr('stroke-width', 1);
-      const hoverDotI = gHover.append('circle').attr('class', 'improved').attr('r', 3.5).style('fill', 'var(--primary-color)').attr('stroke', '#fff').attr('stroke-width', 1);
-      const hoverDotT = gHover.append('circle').attr('r', 3.5).attr('fill', colorTarget).attr('stroke', '#fff').attr('stroke-width', 1);
 
       const overlay = gHover.append('rect').attr('fill', 'transparent').style('cursor', 'crosshair');
 
@@ -246,8 +221,8 @@
         const innerHeight = height - margin.top - margin.bottom;
         gRoot.attr('transform', `translate(${margin.left},${margin.top})`);
 
-        xScale.domain([0, 1]).range([0, innerWidth]);
-        yScale.domain([0, 1]).range([innerHeight, 0]);
+        xScale.range([0, innerWidth]);
+        yScale.range([innerHeight, 0]);
 
         // Grid (horizontal)
         gGrid.selectAll('*').remove();
@@ -289,19 +264,19 @@
           .attr('text-anchor', 'middle')
           .style('font-size', '12px')
           .style('fill', tickColor)
-          .text('Epoch');
+          .text('Step');
         gAxes.append('text')
           .attr('class', 'axis-label axis-label--y')
           .attr('text-anchor', 'middle')
           .attr('transform', `translate(${-52},${innerHeight/2}) rotate(-90)`) 
           .style('font-size', '12px')
           .style('fill', tickColor)
-          .text('Accuracy');
+          .text('Value');
 
         overlay.attr('x', 0).attr('y', 0).attr('width', innerWidth).attr('height', innerHeight);
         hoverLine.attr('y1', 0).attr('y2', innerHeight).attr('stroke', axisColor);
 
-        // Legend inside plot (bottom-right), no background/border/shadow
+        // Legend placeholder; actual content set in renderMetric
         const legendWidth = Math.min(180, Math.max(120, Math.round(innerWidth * 0.22)));
         const legendHeight = 64;
         gLegend
@@ -319,105 +294,102 @@
           lineHeight: '1.35',
           color: 'var(--text-color)'
         });
-        legendRoot.html(`
-          <div style="display:flex;flex-direction:column;gap:6px;">
-            <div style="display:flex;align-items:center;gap:8px;">
-              <span style="width:18px;height:3px;background:${colorBase};border-radius:2px;display:inline-block"></span>
-              <span>Baseline</span>
-            </div>
-            <div style="display:flex;align-items:center;gap:8px;">
-              <span style="width:18px;height:3px;background:${colorImproved};border-radius:2px;display:inline-block"></span>
-              <span>Improved</span>
-            </div>
-            <div style="display:flex;align-items:center;gap:8px;">
-              <span style="width:18px;height:0;border-top:2px dashed ${colorTarget};display:inline-block"></span>
-              <span>Target</span>
-            </div>
-          </div>
-        `);
-      }
-
-      function updatePaths() {
-        pathBase.transition().duration(200).attr('d', lineGen(yBase));
-        pathImp.transition().duration(200).attr('d', lineGen(yImp));
-        pathTgt.transition().duration(200).attr('d', lineGen(yTgt));
-      }
-
-      function updateAlpha(a) {
-        alpha = a;
-        alphaVal.textContent = a.toFixed(2);
-        yImp = yBase.map((v, i) => blend(v, yAug[i], alpha));
-        pathImp.transition().duration(80).attr('d', lineGen(yImp));
-      }
 
-      function applyDataset() {
-        computeCurves();
-        updatePaths();
+        return { innerWidth, innerHeight };
       }
 
-      // Hover interactions
-      function onMove(event) {
-        const [mx, my] = d3.pointer(event, overlay.node());
-        const xi = Math.max(0, Math.min(N - 1, Math.round(xScale.invert(mx) * (N - 1))));
-        const xpx = xScale(xs[xi]);
-        const yb = yBase[xi], yi = yImp[xi], yt = yTgt[xi];
-        hoverLine.attr('x1', xpx).attr('x2', xpx).style('display', null);
-        hoverDotB.attr('cx', xpx).attr('cy', yScale(yb)).style('display', null);
-        hoverDotI.attr('cx', xpx).attr('cy', yScale(yi)).style('display', null);
-        hoverDotT.attr('cx', xpx).attr('cy', yScale(yt)).style('display', null);
-
-        // Tooltip content
-        const ds = datasets[datasetIndex].name;
-        tipInner.innerHTML = `<div><strong>${ds}</strong></div>` +
-          `<div><strong>x</strong> ${xs[xi].toFixed(2)}</div>` +
-          `<div><span style="display:inline-block;width:10px;height:10px;background:${colorBase};border-radius:50%;margin-right:6px;"></span><strong>Baseline</strong> ${yb.toFixed(3)}</div>` +
-          `<div><span style="display:inline-block;width:10px;height:10px;background:${colorImproved};border-radius:50%;margin-right:6px;"></span><strong>Improved</strong> ${yi.toFixed(3)}</div>` +
-          `<div><span style="display:inline-block;width:10px;height:10px;background:${colorTarget};border-radius:50%;margin-right:6px;"></span><strong>Target</strong> ${yt.toFixed(3)}</div>`;
-        const offsetX = 12, offsetY = 12;
-        tip.style.opacity = '1';
-        tip.style.transform = `translate(${Math.round(mx + offsetX + margin.left)}px, ${Math.round(my + offsetY + margin.top)}px)`;
-      }
-
-      function onLeave() {
-        tip.style.opacity = '0';
-        tip.style.transform = 'translate(-9999px, -9999px)';
-        hoverLine.style('display', 'none');
-        hoverDotB.style('display', 'none');
-        hoverDotI.style('display', 'none');
-        hoverDotT.style('display', 'none');
+      function renderMetric(metricKey){
+        const map = dataByMetric.get(metricKey) || {};
+        const runs = runOrder;
+        // Domain
+        let minStep = Infinity, maxStep = -Infinity, maxVal = 0, minVal = Infinity;
+        runs.forEach(r => {
+          const arr = map[r] || [];
+          arr.forEach(pt => { minStep = Math.min(minStep, pt.step); maxStep = Math.max(maxStep, pt.step); maxVal = Math.max(maxVal, pt.value); minVal = Math.min(minVal, pt.value); });
+        });
+        if (!isFinite(minStep) || !isFinite(maxStep)) { return; }
+        xScale.domain([minStep, maxStep]);
+        const isRank = /rank/i.test(metricKey);
+        yScale.domain(isRank ? [Math.max(maxVal, 1), Math.min(minVal, 0)] : [0, Math.max(1, maxVal)]).nice();
+
+        const { innerWidth, innerHeight } = updateScales();
+
+        // Bind lines
+        const series = runs.map((r, i) => ({ run: r, color: pool[i % pool.length], values: (map[r]||[]).slice().sort((a,b)=>a.step-b.step) }));
+        const paths = gLines.selectAll('path.run-line').data(series, d=>d.run);
+        paths.enter().append('path').attr('class','run-line').attr('fill','none').attr('stroke-width',2)
+          .attr('stroke', d=>d.color).attr('opacity',0.9)
+          .attr('d', d=>lineGen(d.values))
+          .merge(paths)
+          .transition().duration(200)
+          .attr('stroke', d=>d.color)
+          .attr('d', d=>lineGen(d.values));
+        paths.exit().remove();
+
+        // Inline legend content (row, right side) compact
+        legendInline.innerHTML = series.map(s => `<span style="display:inline-flex;align-items:center;gap:6px;white-space:nowrap;"><span style="width:18px;height:10px;background:${s.color};border-radius:3px;display:inline-block"></span><span>${s.run}</span></span>`).join('');
+
+        // Hover
+        const stepSet = new Set(); series.forEach(s=>s.values.forEach(v=>stepSet.add(v.step)));
+        const steps = Array.from(stepSet).sort((a,b)=>a-b);
+        function onMove(event){
+          const [mx, my] = d3.pointer(event, overlay.node());
+          const sx = Math.max(steps[0], Math.min(steps[steps.length-1], Math.round(xScale.invert(mx)/1)*1));
+          const nearest = steps.reduce((best, s)=> Math.abs(s - xScale.invert(mx)) < Math.abs(best - xScale.invert(mx)) ? s : best, steps[0]);
+          const xpx = xScale(nearest);
+          hoverLine.attr('x1', xpx).attr('x2', xpx).style('display', null).attr('stroke', 'rgba(0,0,0,0.25)');
+          // Tooltip content
+          let html = `<div><strong>${metricKey}</strong></div><div><strong>step</strong> ${nearest}</div>`;
+          series.forEach(s=>{
+            const m = new Map(s.values.map(v=>[v.step, v.value]));
+            const val = m.has(nearest) ? m.get(nearest) : null;
+            if (val != null) html += `<div><span style="display:inline-block;width:10px;height:10px;background:${s.color};border-radius:50%;margin-right:6px;"></span><strong>${s.run}</strong> ${(+val).toFixed(4)}</div>`;
+          });
+          tipInner.innerHTML = html;
+          const offsetX = 12, offsetY = 12;
+          tip.style.opacity = '1'; tip.style.transform = `translate(${Math.round(mx + offsetX + margin.left)}px, ${Math.round(my + offsetY + margin.top)}px)`;
+        }
+        function onLeave(){ tip.style.opacity='0'; tip.style.transform='translate(-9999px, -9999px)'; hoverLine.style('display','none'); }
+        overlay.on('mousemove', onMove).on('mouseleave', onLeave);
       }
 
-      overlay.on('mousemove', onMove).on('mouseleave', onLeave);
-
-      // Init + controls wiring
-      computeCurves();
-      updateScales();
-      updatePaths();
-
-      // Attach controls after SVG for consistency with Plotly fragment
-      container.appendChild(controls);
-
-      selectDs.addEventListener('change', (e) => {
-        datasetIndex = parseInt(e.target.value) || 0;
-        applyDataset();
-      });
-      slider.addEventListener('input', (e) => {
-        const a = parseFloat(e.target.value) || 0;
-        updateAlpha(a);
-      });
+      // (old hover removed; hover is attached in renderMetric)
+
+      // Load CSV and wire controls
+      (async () => {
+        try {
+          const text = await fetchFirstAvailable(CSV_PATHS);
+          const rows = d3.csvParse(text, d => ({ run: (d.run||'').trim(), step: +d.step, metric: (d.metric||'').trim(), value: +d.value }));
+          metricList = Array.from(new Set(rows.map(r=>r.metric))).sort();
+          runList = Array.from(new Set(rows.map(r=>r.run))).sort();
+          runOrder = ['FineVision', ...runList.filter(r=>r!=='FineVision')];
+          // Build dataByMetric
+          metricList.forEach(m => {
+            const map = {};
+            runList.forEach(r => { map[r] = []; });
+            rows.filter(r=>r.metric===m).forEach(r => { if (!isNaN(r.step) && !isNaN(r.value)) map[r.run].push({ step:r.step, value:r.value }); });
+            dataByMetric.set(m, map);
+          });
 
-      // Resize handling
-      const render = () => {
-        updateScales();
-        updatePaths();
-      };
-      if (window.ResizeObserver) {
-        const ro = new ResizeObserver(() => render());
-        ro.observe(container);
-      } else {
-        window.addEventListener('resize', render);
-      }
-      render();
+          // Populate metric select (default to average_rank if present)
+          metricList.forEach((m)=>{ const o=document.createElement('option'); o.value=m; o.textContent=m; selectMetric.appendChild(o); });
+          const def = metricList.find(m => /average_rank/i.test(m)) || metricList[0];
+          if (def) selectMetric.value = def;
+
+          container.appendChild(controls);
+          updateScales();
+          renderMetric(selectMetric.value);
+
+          selectMetric.addEventListener('change', ()=>{ renderMetric(selectMetric.value); });
+
+          const rerender = () => { renderMetric(selectMetric.value); };
+          if (window.ResizeObserver) { const ro = new ResizeObserver(()=>rerender()); ro.observe(container); } else { window.addEventListener('resize', rerender); }
+        } catch (e) {
+          const pre = document.createElement('pre'); pre.textContent = 'CSV load error: ' + (e && e.message ? e.message : e);
+          pre.style.color = 'var(--danger, #b00020)'; pre.style.fontSize = '12px'; pre.style.whiteSpace = 'pre-wrap';
+          container.appendChild(pre);
+        }
+      })();
     };
 
     if (document.readyState === 'loading') {

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

@@ -0,0 +1,227 @@
+<div class="d3-pie" style="width:100%;margin:10px 0;"></div>
+<style>
+  .d3-pie .legend { font-size: 12px; line-height: 1.35; color: var(--text-color); }
+  .d3-pie .legend .items { display:flex; flex-wrap:wrap; gap:8px 14px; align-items:center; justify-content:center; }
+  .d3-pie .legend .item { display:flex; align-items:center; gap:8px; white-space:nowrap; }
+  .d3-pie .legend .swatch { width:14px; height:14px; border-radius:3px; display:inline-block; border: 1px solid var(--border-color); }
+  .d3-pie .caption { font-size: 14px; font-weight: 800; fill: var(--text-color); }
+  .d3-pie .nodata { font-size: 12px; fill: var(--muted-color); }
+  .d3-pie .slice-label { font-size: 11px; font-weight: 700; fill: var(--text-color); paint-order: stroke; stroke: rgba(255,255,255,0.6); stroke-width: 3px; }
+</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-pie')) || document.querySelector('.d3-pie');
+      if (!container) return;
+      if (container.dataset) { if (container.dataset.mounted === 'true') return; container.dataset.mounted = 'true'; }
+
+      // 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; }
+
+      // SVG scaffolding
+      const svg = d3.select(container).append('svg').attr('width','100%').style('display','block');
+      const gRoot = svg.append('g');
+      const gLegend = gRoot.append('foreignObject').attr('class','legend');
+      const gPlots = gRoot.append('g').attr('class','plots');
+
+      // Metrics (order and labels as in the Python script)
+      const METRICS = [
+        { key:'answer_total_tokens', name:'Answer Tokens', title:'Weighted by Answer Tokens', letter:'a' },
+        { key:'total_samples',       name:'Number of Samples', title:'Weighted by Number of Samples', letter:'b' },
+        { key:'total_turns',         name:'Number of Turns', title:'Weighted by Number of Turns', letter:'c' },
+        { key:'total_images',        name:'Number of Images', title:'Weighted by Number of Images', letter:'d' }
+      ];
+
+      // CSV: prefer inline <script type="text/csv" class="d3-pie__csv">, otherwise fallback to fetch
+      const CSV_PATHS = [
+        '/data/finevision.csv', // public path priority
+        '/assets/data/finevision.csv',
+        './assets/data/finevision.csv',
+        '../assets/data/finevision.csv',
+        '../../assets/data/finevision.csv'
+      ];
+
+      const getInlineCsv = () => {
+        const el = container.querySelector('script.d3-pie__csv[type="text/csv"]');
+        return el ? el.textContent.trim() : '';
+      };
+
+      const fetchFirstAvailable = async (paths) => {
+        for (const p of paths) {
+          try {
+            const res = await fetch(p, { cache: 'no-cache' });
+            if (res.ok) { return await res.text(); }
+          } catch (_) { /* try next */ }
+        }
+        throw new Error('CSV introuvable: finevision.csv');
+      };
+
+      const parseCsv = (text) => d3.csvParse(text, (d) => ({
+        subset_name: (d['subset_name']||'').trim(),
+        eagle_cathegory: (d['eagle_cathegory']||'').trim(),
+        answer_total_tokens: +((d['answer_total_tokens']||'0').toString().trim()) || 0,
+        total_samples: +((d['total_samples']||'0').toString().trim()) || 0,
+        total_turns: +((d['total_turns']||'0').toString().trim()) || 0,
+        total_images: +((d['total_images']||'0').toString().trim()) || 0
+      }));
+
+      // Layout
+      let width=800, height=460; const margin = { top: 8, right: 24, bottom: 60, left: 24 };
+      const CAPTION_GAP = 28;   // espace entre titre et donut (augmenté)
+      const LEGEND_GAP = 8;     // espace entre donut et légende (réduit)
+      const updateSize = () => {
+        width = container.clientWidth || 800;
+        height = Math.max(320, Math.round(width/2.5));
+        svg.attr('width', width).attr('height', height);
+        gRoot.attr('transform', `translate(${margin.left},${margin.top})`);
+        return { innerWidth: width - margin.left - margin.right, innerHeight: height - margin.top - margin.bottom };
+      };
+
+      function renderLegend(categories, colorOf, innerWidth, innerHeight){
+        const legendHeight = 60;
+        gLegend.attr('x', 0).attr('y', innerHeight + LEGEND_GAP).attr('width', innerWidth).attr('height', legendHeight);
+        const root = gLegend.selectAll('div').data([0]).join('xhtml:div');
+        root.html(`<div class="items">${categories.map(c => `<div class="item"><span class="swatch" style="background:${colorOf(c)}"></span><span style="font-weight:800">${c}</span></div>`).join('')}</div>`);
+      }
+
+      function drawPies(rows){
+        const { innerWidth, innerHeight } = updateSize();
+
+        // Categories
+        const categories = Array.from(new Set(rows.map(r => r.eagle_cathegory))).sort();
+
+        // Build a categorical palette anchored on bar chart vibes + theme primary
+        const primary = getComputedStyle(document.documentElement).getPropertyValue('--primary-color').trim() || '#E889AB';
+        const base = [primary, '#4EA5B7', '#E38A42', '#CEC0FA'];
+        const pool = Array.from(new Set([
+          ...base,
+          ...(d3.schemeTableau10 || []),
+          ...(d3.schemeSet3 || []),
+          ...(d3.schemePastel1 || []),
+        ].flat().filter(Boolean)));
+
+        const colorOf = (cat) => {
+          const idx = categories.indexOf(cat);
+          return pool[idx % pool.length] || primary;
+        };
+
+        renderLegend(categories, colorOf, innerWidth, innerHeight);
+
+        // Clear plots
+        gPlots.selectAll('*').remove();
+
+        const gapX = 20;
+        const cols = 4;
+        const pieAreaWidth = innerWidth;
+        const cellWidth = (pieAreaWidth - gapX * (cols - 1)) / cols;
+        const cellHeight = innerHeight - 6; // room for captions
+        const radius = Math.max(30, Math.min(cellWidth, cellHeight) * 0.42);
+        const innerR = Math.round(radius * 0.58); // donut, trou modéré
+
+        const pie = d3.pie().sort(null).value(d => d.value).padAngle(0.02);
+        const arc = d3.arc().innerRadius(innerR).outerRadius(radius).cornerRadius(3);
+        const arcLabel = d3.arc().innerRadius((innerR + radius) / 2).outerRadius((innerR + radius) / 2);
+
+        const captions = new Map(METRICS.map(m => [m.key, `${m.title}`]));
+
+        METRICS.forEach((metric, idx) => {
+          // Aggregate by category
+          const totals = new Map(); categories.forEach(c => totals.set(c, 0));
+          rows.forEach(r => { totals.set(r.eagle_cathegory, totals.get(r.eagle_cathegory) + (r[metric.key] || 0)); });
+          const values = categories.map(c => ({ category: c, value: totals.get(c) || 0 }));
+          const totalSum = d3.sum(values, d => d.value);
+
+          const col = idx; // 0..3
+          const cx = col * (cellWidth + gapX) + cellWidth / 2;
+          const cy = innerHeight / 2;
+
+          const gCell = gPlots.append('g').attr('transform', `translate(${cx},${cy})`);
+
+          if (!totalSum || totalSum <= 0) {
+            gCell.append('text').attr('class','nodata').attr('text-anchor','middle').attr('dy','0').text('No data for this metric');
+          } else {
+            const data = pie(values);
+            const percent = (v) => (v / totalSum) * 100;
+
+            // Slices
+            const slices = gCell.selectAll('path.slice').data(data).enter().append('path').attr('class','slice')
+              .attr('d', arc)
+              .attr('fill', d => colorOf(d.data.category))
+              .attr('stroke', 'var(--surface-bg)')
+              .attr('stroke-width', 1.2)
+              .on('mouseenter', function(ev, d){
+                d3.select(this).attr('stroke', 'rgba(0,0,0,0.85)').attr('stroke-width', 1);
+                const p = percent(d.data.value);
+                tipInner.innerHTML = `<div><strong>${d.data.category}</strong></div><div><strong>${metric.name}</strong> ${d.data.value.toLocaleString()}</div><div><strong>Share</strong> ${p.toFixed(1)}%</div>`;
+                tip.style.opacity = '1';
+              })
+              .on('mousemove', function(ev){
+                const [mx, my] = d3.pointer(ev, container); const offsetX = 12, offsetY = 12; tip.style.transform = `translate(${Math.round(mx+offsetX)}px, ${Math.round(my+offsetY)}px)`;
+              })
+              .on('mouseleave', function(){ tip.style.opacity='0'; tip.style.transform='translate(-9999px, -9999px)'; d3.select(this).attr('stroke','var(--surface-bg)'); });
+
+            // Percentage labels (>= 3%)
+            gCell.selectAll('text.slice-label').data(data.filter(d => percent(d.data.value) >= 3)).enter()
+              .append('text').attr('class','slice-label').style('pointer-events','none')
+              .attr('transform', d => `translate(${arcLabel.centroid(d)})`)
+              .attr('text-anchor','middle')
+              .text(d => `${percent(d.data.value).toFixed(1)}%`);
+          }
+
+          // Caption above donut
+          gCell.append('text')
+            .attr('class','caption')
+            .attr('text-anchor','middle')
+            .attr('y', -(radius + CAPTION_GAP))
+            .text(captions.get(metric.key));
+        });
+      }
+
+      async function init(){
+        try {
+          let text = getInlineCsv();
+          if (!text) { text = await fetchFirstAvailable(CSV_PATHS); }
+          const rows = parseCsv(text);
+          drawPies(rows);
+
+          // Resize handling
+          const rerender = () => drawPies(rows);
+          if (window.ResizeObserver) { const ro = new ResizeObserver(() => rerender()); ro.observe(container); }
+          else { window.addEventListener('resize', rerender); }
+        } catch (err) {
+          const pre = document.createElement('pre'); pre.textContent = (err && err.message) ? err.message : String(err);
+          pre.style.color = 'var(--danger, #b00020)'; pre.style.fontSize = '12px'; pre.style.whiteSpace = 'pre-wrap';
+          container.appendChild(pre);
+        }
+      }
+
+      init();
+    };
+
+    if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', () => ensureD3(bootstrap), { once: true }); } else { ensureD3(bootstrap); }
+  })();
+</script>
+
+
+
+

app/src/content/embeds/palettes.html

@@ -1,12 +1,12 @@
 <div class="palettes" style="width:100%; margin: 10px 0;">
   <style>
     .palettes .palettes__grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
-    .palettes .palette-card { position: relative; display: grid; grid-template-columns: 260px 1fr auto; align-items: stretch; gap: 14px; border: 1px solid var(--border-color); border-radius: 10px; background: var(--surface-bg); padding: 12px; transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease; }
+    .palettes .palette-card { position: relative; display: grid; grid-template-columns: auto 1fr 260px; align-items: stretch; gap: 14px; border: 1px solid var(--border-color); border-radius: 10px; background: var(--surface-bg); padding: 12px; transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease; }
     /* removed circular badge */
     .palettes .palette-card__swatches { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 8px; margin: 0;  }
     .palettes .palette-card__swatches .sw { width: 100%; min-width: 0; min-height: 0; border-radius: 8px; border: 1px solid var(--border-color); }
-    .palettes .palette-card__content { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; justify-content: center; min-width: 0; padding-left: 12px; border-left: 1px solid var(--border-color); }
-    .palettes .palette-card__actions { display: flex; align-items: center; justify-content: flex-end; justify-self: end; }
+    .palettes .palette-card__content { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; justify-content: center; min-width: 0; padding-right: 12px; border-right: 1px solid var(--border-color); }
+    .palettes .palette-card__actions { display: flex; align-items: center; justify-content: flex-start; justify-self: start; }
     .palettes .palette-card__actions { align-self: stretch; }
     /* .palettes .copy-btn { margin: 0; padding: 0 10px; height: 100%; border-radius: 8px; } */
     /* .palettes .copy-btn:hover { background: var(--primary-color); color: var(--on-primary)!important; border-color: transparent; }
@@ -15,7 +15,7 @@
     @media (max-width: 640px) {
       .palettes .palette-card { grid-template-columns: 1fr; align-items: stretch; gap: 10px; }
       .palettes .palette-card__swatches { grid-template-columns: repeat(6, minmax(0, 1fr));  }
-      .palettes .palette-card__content { border-left: none; padding-left: 0; }
+      .palettes .palette-card__content { border-right: none; padding-right: 0; }
       .palettes .palette-card__actions { justify-self: start; }
     }
   </style>
@@ -124,11 +124,11 @@
 
           return results.slice(0, 6);
       }},
-      { key: 'sequential', title: 'Sequential', desc: 'For <strong>numeric scales</strong>; gradient from <strong>light to dark</strong>; ideal for <strong>heatmaps</strong>.', generator: (baseHex) => {
+      { key: 'sequential', title: 'Sequential', desc: 'For <strong>numeric scales</strong>; gradient from <strong>dark to light</strong>. Ideal for <strong>heatmaps</strong>.', generator: (baseHex) => {
           const c = chroma(baseHex).saturate(0.3);
           return chroma.scale([c.darken(2), c, c.brighten(2)]).mode('lab').correctLightness(true).colors(6);
       }},
-      { key: 'diverging', title: 'Diverging', desc: 'For <strong>centered ranges</strong> with <strong>two extremes</strong> (e.g., negatives/positives) around a <strong>baseline</strong>.', generator: (baseHex) => {
+      { key: 'diverging', title: 'Diverging', desc: 'For <strong>centered ranges</strong> with <strong>two extremes</strong> around a <strong>baseline</strong>. (e.g., negatives/positives)', generator: (baseHex) => {
           const baseH = chroma(baseHex).get('hsl.h');
           const compH = (baseH + 180) % 360;
           const left = chroma.hsl(baseH, 0.75, 0.55);
@@ -180,7 +180,7 @@
 
         content.appendChild(title); content.appendChild(desc);
         actions.appendChild(btn);
-        card.appendChild(sw); card.appendChild(content); card.appendChild(actions);
+        card.appendChild(actions); card.appendChild(content); card.appendChild(sw);
         grid.appendChild(card);
         });
       };

app/src/styles/global.css

@@ -47,10 +47,10 @@ figure.has-dl-btn { position: relative; }
 /* ============================================================================ */
 /* Theme Toggle button (moved from component) */
 /* ============================================================================ */
-#theme-toggle { display: inline-flex; align-items: center; gap: 8px; border: none; background: transparent; padding: 6px 10px; border-radius: 8px; cursor: pointer; margin: 12px 16px; }
+#theme-toggle { display: inline-flex; align-items: center; gap: 8px; border: none; background: transparent; padding: 6px 10px; border-radius: 8px; cursor: pointer; margin: 12px 16px; color: var(--text-color) !important; }
 #theme-toggle .icon.dark { display: none; }
 [data-theme="dark"] #theme-toggle .icon.light { display: none; }
 [data-theme="dark"] #theme-toggle .icon.dark { display: inline; }
-[data-theme="dark"] #theme-toggle .icon { filter: invert(1) brightness(1.2); }
+#theme-toggle .icon { filter: none !important; }