update banner, matrix and article modifications

app/src/content/assets/data/data_gaia.json

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

app/src/content/assets/data/data_gaia_backup.json

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

app/src/content/assets/data/data_gaia_points.json

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

app/src/content/assets/data/leaderboard_scatter_plot.json

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

app/src/content/assets/data/leaderboard_scores_over_time.json

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

app/src/content/assets/data/leaderboard_scores_over_time_old.json

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

app/src/content/chapters/general-knowledge/model-inference-and-evaluation.mdx

@@ -11,6 +11,8 @@ import Note from "../../../components/Note.astro";
 import Sidenote from "../../../components/Sidenote.astro";
 import Accordion from "../../../components/Accordion.astro";
 import HtmlEmbed from "../../../components/HtmlEmbed.astro";
+import Wide from "../../../components/Wide.astro";
+import Reference from "../../../components/Reference.astro";
 
 In this section, we'll look at two steps for models: how input is preprocessed to be given to the model (`tokenization`), and how the model generates a prediction from it (`inference`). 
 
@@ -94,12 +96,17 @@ First, as some languages do not always use spacing as a word separator (Korean,
 
 Then, tokenizers in general might be unfair to non-English languages. When training a BPE tokenizer, you use data from the different languages you want to cover, but most of the time, though, this data is unbalanced between languages (with, for example, an order of magnitude more English than Thai, or Burmese). Since BPE tokenizers create their vocabulary tokens based on the most frequent words seen, most of the long tokens will be English words - and most of the words from the less frequent languages will only be split at the character level. This effect leads to an unfairness in multilingual tokenization: some (less frequent, or *lower-resourced*) languages require orders of magnitude more tokens to generate a sentence of equivalent length as English.
 
+<Wide>
+<Reference align="center" caption="OpenEvals-tokenizers-languages">
 <iframe
+    className="card"
     src="https://OpenEvals-tokenizers-languages.hf.space"
     frameborder="0"
-    width="850"
-    height="450"
+    width="100%"
+    height="650"
 ></iframe>
+</Reference>
+</Wide>
 
 If you are in this case, the number of tokens that the model is allowed to generate for an evaluation should also be language dependent, as not all languages are tokenized in similar amount of tokens.
 

app/src/content/chapters/troubleshooting/troubleshooting-reproducibility.mdx

@@ -4,8 +4,7 @@ title: "Troubleshooting reproducibility"
 
 import Note from "../../../components/Note.astro";
 import Sidenote from "../../../components/Sidenote.astro";
-import { Image } from "astro:assets";
-import mmluPromptImage from "../../assets/image/mmlu_prompt.png";
+import HtmlEmbed from "../../../components/HtmlEmbed.astro";
 
 Let's say you have read a recent tech report about a cool new model, and you want to reproduce their results on your machine... but you're not managing to?
 Let's explore why.
@@ -57,10 +56,12 @@ For example, for multichoice question answers, common formats include very simpl
 
 We did some experiments on this (you'll see up to a 7 points difference for the same model on the semantically equivalent prompts, the 5 rightmost columns), and a A [paper observed similar results](https://arxiv.org/abs/2310.11324). 
 
-<Image src={mmluPromptImage} alt="Heatmap showing MMLU evaluation scores across different models with different prompt formats. Scores vary by up to 7 points for the same model depending on format." />
-
 **Other example**: Llama 3.1 models predicted correct MATH-Hard answers but scored poorly on the Open LLM Leaderboard, because they overfit to GSM8K's prompt format and couldn't adapt to the new one for this eval, despite it being provided in few shot examples.
 
+*Evaluation on MMLU subsets, acc_norm score (seed 0), in 5-shot.*
+
+<HtmlEmbed src="d3-mmlu-heatmap.html" />
+
 This [great paper](https://arxiv.org/abs/2407.07890)⭐ also highlights a side effect of this: a number of models are now trained to overfit benchmark prompts and answer formats, to the cost of adaptation to other prompts at evaluation time.
 </Note>
 

app/src/content/embeds/banner.html

@@ -1,4 +1,111 @@
-<div class="d3-galaxy" style="width:100%;margin:10px 0;aspect-ratio:3/1;min-height:260px;"></div>
+<div class="d3-leaderboard-chart-wrapper" style="width:100%;margin:10px 0;padding:10px 5px 5px 5px;border-radius:8px;background:var(--surface-bg);border:1px solid var(--border-color);position:relative;">
+    <div class="d3-leaderboard-chart" style="width:100%;aspect-ratio:2.8/1;min-height:320px;"></div>
+</div>
+<style>
+  .d3-leaderboard-chart {
+    position: relative;
+  }
+  
+  .d3-leaderboard-chart .d3-tooltip {
+    position: absolute;
+    top: 0;
+    left: 0;
+    transform: translate(-9999px, -9999px);
+    pointer-events: none;
+    padding: 10px 12px;
+    border-radius: 12px;
+    font-size: 12px;
+    line-height: 1.35;
+    border: 1px solid var(--border-color);
+    background: var(--surface-bg);
+    color: var(--text-color);
+    box-shadow: 0 8px 32px rgba(0,0,0,.28), 0 2px 8px rgba(0,0,0,.12);
+    opacity: 0;
+    transition: opacity .12s ease;
+    z-index: 20;
+    backdrop-filter: saturate(1.12) blur(8px);
+  }
+  
+  .d3-info-icon {
+    position: absolute;
+    bottom: 15px;
+    right: 15px;
+    width: 28px;
+    height: 28px;
+    border-radius: 50%;
+    background: var(--surface-bg);
+    border: 1px solid var(--border-color);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    color: var(--muted-color);
+    transition: all 0.2s ease;
+    z-index: 10;
+  }
+  
+  .d3-info-icon:hover {
+    color: var(--text-color);
+    background: var(--surface-bg);
+    border-color: var(--text-color);
+  }
+  
+  .d3-info-tooltip {
+    position: absolute;
+    bottom: 50px;
+    right: 15px;
+    max-width: 400px;
+    padding: 16px;
+    background: var(--surface-bg);
+    border: 1px solid var(--border-color);
+    border-radius: 8px;
+    font-size: 12px;
+    line-height: 1.6;
+    color: var(--text-color);
+    opacity: 0;
+    pointer-events: none;
+    z-index: 10000;
+    transition: opacity 0.2s ease;
+    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+    backdrop-filter: saturate(1.12) blur(8px);
+    text-align: left;
+  }
+  
+  .d3-leaderboard-chart .d3-tooltip__inner {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+    min-width: 180px;
+  }
+  
+  .d3-leaderboard-chart .d3-tooltip__inner > div:first-child {
+    font-weight: 800;
+    letter-spacing: 0.1px;
+    margin-bottom: 0;
+  }
+  
+  .d3-leaderboard-chart .d3-tooltip__inner > div:nth-child(2) {
+    font-size: 11px;
+    color: var(--muted-color, #9ca3af);
+    display: block;
+    margin-top: -4px;
+    margin-bottom: 2px;
+    letter-spacing: 0.1px;
+  }
+  
+  .d3-leaderboard-chart .d3-tooltip__inner > div:nth-child(n+3) {
+    padding-top: 6px;
+    border-top: 1px solid var(--border-color);
+  }
+  
+  .d3-leaderboard-chart .d3-tooltip__color-dot {
+    display: inline-block;
+    width: 12px;
+    height: 12px;
+    border-radius: 3px;
+    border: 1px solid var(--border-color);
+  }
+</style>
 <script>
     (() => {
         const ensureD3 = (cb) => {
@@ -17,230 +124,1060 @@
 
         const bootstrap = () => {
             const mount = document.currentScript ? document.currentScript.previousElementSibling : null;
-            const container = (mount && mount.querySelector && mount.querySelector('.d3-galaxy')) || document.querySelector('.d3-galaxy');
+            const container = (mount && mount.querySelector && mount.querySelector('.d3-leaderboard-chart')) || document.querySelector('.d3-leaderboard-chart');
             if (!container) return;
             if (container.dataset) {
                 if (container.dataset.mounted === 'true') return;
                 container.dataset.mounted = 'true';
             }
-            // Scene params (match previous Plotly ranges)
-            const cx = 1.5, cy = 0.5;
-            const a = 1.3, b = 0.45;
-            const numPoints = 3000;
-            const numArms = 3;
-            const numTurns = 2.1;
-            const angleJitter = 0.12;
-            const posNoise = 0.015;
-
-            // Circle size settings
-            const minCircleSize = 4;  // minimum diameter in pixels
-            const maxCircleSize = 12; // maximum diameter in pixels
-
-            // Generate spiral + bulge
-            const twoPi = Math.PI * 2;
-            const t = Float64Array.from({ length: numPoints }, () => Math.random() * (twoPi * numTurns));
-            const armIndices = Int16Array.from({ length: numPoints }, () => Math.floor(Math.random() * numArms));
-            const armOffsets = Float64Array.from(armIndices, (k) => k * (twoPi / numArms));
-            const theta = Float64Array.from(t, (tv, i) => tv + armOffsets[i] + d3.randomNormal.source(Math.random)(0, angleJitter)());
-            const rNorm = Float64Array.from(t, (tv) => Math.pow(tv / (twoPi * numTurns), 0.9));
-            const noiseScale = (rn) => posNoise * (0.8 + 0.6 * rn);
-            const noiseX = Float64Array.from(rNorm, (rn) => d3.randomNormal.source(Math.random)(0, noiseScale(rn))());
-            const noiseY = Float64Array.from(rNorm, (rn) => d3.randomNormal.source(Math.random)(0, noiseScale(rn))());
-
-            const xSpiral = Float64Array.from(theta, (th, i) => cx + a * rNorm[i] * Math.cos(th) + noiseX[i]);
-            const ySpiral = Float64Array.from(theta, (th, i) => cy + b * rNorm[i] * Math.sin(th) + noiseY[i]);
-
-            const bulgePoints = Math.floor(0.18 * numPoints);
-            const phiB = Float64Array.from({ length: bulgePoints }, () => twoPi * Math.random());
-            const rB = Float64Array.from({ length: bulgePoints }, () => Math.pow(Math.random(), 2.2) * 0.22);
-            const noiseXB = Float64Array.from({ length: bulgePoints }, () => d3.randomNormal.source(Math.random)(0, posNoise * 0.6)());
-            const noiseYB = Float64Array.from({ length: bulgePoints }, () => d3.randomNormal.source(Math.random)(0, posNoise * 0.6)());
-            const xBulge = Float64Array.from(phiB, (ph, i) => cx + a * rB[i] * Math.cos(ph) + noiseXB[i]);
-            const yBulge = Float64Array.from(phiB, (ph, i) => cy + b * rB[i] * Math.sin(ph) + noiseYB[i]);
-
-            // Concatenate
-            const X = Array.from(xSpiral).concat(Array.from(xBulge));
-            const Y = Array.from(ySpiral).concat(Array.from(yBulge));
-            const lenSpiral = xSpiral.length;
-
-            const zSpiral = Array.from(rNorm, (rn) => 1 - rn);
-            const maxRB = rB && rB.length ? (window.d3 && d3.max ? d3.max(rB) : Math.max.apply(null, Array.from(rB))) : 1;
-            const zBulge = Array.from(rB, (rb) => 1 - (maxRB ? rb / maxRB : 0));
-            const Zraw = zSpiral.concat(zBulge);
-            const sizesPx = Zraw.map((z) => minCircleSize + z * (maxCircleSize - minCircleSize)); // diameter in pixels
-
-            // Labels (same categories as Python version)
-            const labelOf = (i) => {
-                const z = Zraw[i];
-                if (z < 0.25) return 'tiny star';
-                if (z < 0.5) return 'small star';
-                if (z < 0.75) return 'medium star';
-                return 'large star';
-            };
 
-            // Sort by size ascending for z-index: small first, big last
-            const idx = d3.range(X.length).sort((i, j) => sizesPx[i] - sizesPx[j]);
-
-            // Colors: piecewise gradient [0 -> 0.5 -> 1]
-            const c0 = d3.rgb(78, 165, 183);    // rgb(78, 165, 183)
-            const c1 = d3.rgb(206, 192, 250);   // rgb(206, 192, 250)
-            const c2 = d3.rgb(232, 137, 171);   // rgb(232, 137, 171)
-            const interp01 = d3.interpolateRgb(c0, c1);
-            const interp12 = d3.interpolateRgb(c1, c2);
-            const colorFor = (v) => {
-                const t = Math.max(0, Math.min(1, v));
-                return t <= 0.5 ? interp01(t / 0.5) : interp12((t - 0.5) / 0.5);
+            // Get categorical colors from ColorPalettes
+            function getCategoricalColors(n) {
+                try {
+                    if (window.ColorPalettes && typeof window.ColorPalettes.getColors === 'function') {
+                        return window.ColorPalettes.getColors('categorical', n);
+                    }
+                } catch (e) {
+                    console.warn('ColorPalettes not available, using fallback');
+                }
+                // Fallback: Tableau10 palette
+                const tableau = (window.d3 && window.d3.schemeTableau10) 
+                    ? window.d3.schemeTableau10 
+                    : ['#4e79a7', '#f28e2b', '#e15759', '#76b7b2', '#59a14f', '#edc948', '#b07aa1', '#ff9da7', '#9c755f', '#bab0ab'];
+                return tableau.slice(0, n);
+            }
+
+            // Create color mapping for benchmarks
+            let colorMap = {};
+            
+            // Définir les groupes de benchmarks globalement
+            // Agentic en premier pour obtenir la première couleur (orange)
+            const BENCHMARK_GROUPS = [
+                {
+                    name: 'Agentic',
+                    benchmarks: ['GAIA']
+                },
+                {
+                    name: 'Reasoning & Commonsense',
+                    benchmarks: ['MUSR', 'BBH', 'Winogrande', 'TruthfulQA', 'HellaSwag']
+                },
+                {
+                    name: 'Knowledge',
+                    benchmarks: ['MMLU', 'MMLU-Pro', 'GPQA', 'ARC']
+                },
+                {
+                    name: 'Math',
+                    benchmarks: ['GSM8K', 'MATH']
+                },
+                {
+                    name: 'Instruction following',
+                    benchmarks: ['IFEval']
+                }
+            ];
+            
+            // Fonction pour créer des variations de couleur à partir d'une couleur de base
+            function createColorVariation(baseColor, index, total) {
+                // Convertir la couleur hex en RGB
+                const hex = baseColor.replace('#', '');
+                const r = parseInt(hex.substr(0, 2), 16);
+                const g = parseInt(hex.substr(2, 2), 16);
+                const b = parseInt(hex.substr(4, 2), 16);
+                
+                // Créer des variations en ajustant la luminosité
+                // Variation de -15% à +15% selon l'index
+                const variationRange = 0.15;
+                const step = total > 1 ? (variationRange * 2) / (total - 1) : 0;
+                const brightnessAdjust = -variationRange + (index * step);
+                
+                // Ajuster la luminosité
+                const adjustBrightness = (value, factor) => {
+                    const adjusted = value + (255 - value) * factor;
+                    return Math.max(0, Math.min(255, Math.round(adjusted)));
+                };
+                
+                const newR = adjustBrightness(r, brightnessAdjust);
+                const newG = adjustBrightness(g, brightnessAdjust);
+                const newB = adjustBrightness(b, brightnessAdjust);
+                
+                // Convertir en hex
+                const toHex = (n) => {
+                    const hex = n.toString(16);
+                    return hex.length === 1 ? '0' + hex : hex;
+                };
+                
+                return `#${toHex(newR)}${toHex(newG)}${toHex(newB)}`;
+            }
+            
+            // Mapping des benchmarks vers leurs groupes
+            function getBenchmarkGroup(benchmark) {
+                // Gérer MMLU_new qui s'affiche comme MMLU-Pro
+                const displayName = benchmark === 'MMLU_new' ? 'MMLU-Pro' : benchmark;
+                
+                for (const group of BENCHMARK_GROUPS) {
+                    if (group.benchmarks.includes(displayName)) {
+                        return group.name;
+                    }
+                }
+                return null;
+            }
+            
+            // Stocker les couleurs de base des groupes pour la légende
+            let groupBaseColors = {};
+            
+            function updateColorMap(benchmarks) {
+                // Obtenir les groupes uniques (dans l'ordre de BENCHMARK_GROUPS pour que Agentic soit en premier)
+                const allGroups = BENCHMARK_GROUPS.map(g => g.name);
+                const presentGroups = allGroups.filter(groupName => {
+                    return benchmarks.some(b => getBenchmarkGroup(b) === groupName);
+                });
+                
+                // Obtenir la palette avec le nombre exact de groupes présents
+                const palette = getCategoricalColors(presentGroups.length);
+                
+                // Créer un mapping groupe -> couleur de base (pour la légende)
+                groupBaseColors = {};
+                presentGroups.forEach((group, i) => {
+                    groupBaseColors[group] = palette[i];
+                });
+                
+                // Créer un mapping benchmark -> couleur (variation de la couleur du groupe)
+                colorMap = {};
+                
+                // Pour chaque groupe, créer des variations pour chaque benchmark
+                BENCHMARK_GROUPS.forEach(group => {
+                    if (!groupBaseColors[group.name]) return;
+                    
+                    const baseColor = groupBaseColors[group.name];
+                    
+                    // Trouver les benchmarks du groupe qui sont présents dans les données
+                    const groupBenchmarks = [];
+                    group.benchmarks.forEach(benchmark => {
+                        // Pour MMLU-Pro, chercher MMLU_new dans les benchmarks
+                        if (benchmark === 'MMLU-Pro') {
+                            if (benchmarks.includes('MMLU_new')) {
+                                groupBenchmarks.push({ displayName: 'MMLU-Pro', dataKey: 'MMLU_new' });
+                            }
+                        } else {
+                            if (benchmarks.includes(benchmark)) {
+                                groupBenchmarks.push({ displayName: benchmark, dataKey: benchmark });
+                            }
+                        }
+                    });
+                    
+                    // Assigner des variations de couleur à chaque benchmark
+                    groupBenchmarks.forEach((benchmarkInfo, index) => {
+                        // Créer une variation de couleur
+                        const variation = createColorVariation(baseColor, index, groupBenchmarks.length);
+                        // Mapper avec la clé de données (dataKey)
+                        colorMap[benchmarkInfo.dataKey] = variation;
+                    });
+                });
+            }
+            
+            // Fonction pour obtenir la couleur de base d'un groupe (pour la légende)
+            function getGroupBaseColor(groupName) {
+                return groupBaseColors[groupName] || '#000000';
+            }
+
+            // Helper to get color for a benchmark (via son groupe)
+            function getColor(benchmark) {
+                if (colorMap && colorMap[benchmark]) {
+                    return colorMap[benchmark];
+                }
+                // Fallback si le benchmark n'est pas dans la map
+                const group = getBenchmarkGroup(benchmark);
+                if (group) {
+                    // Essayer de trouver la couleur du groupe
+                    const palette = getCategoricalColors(BENCHMARK_GROUPS.length);
+                    const groupIndex = BENCHMARK_GROUPS.findIndex(g => g.name === group);
+                    if (groupIndex >= 0) {
+                        return palette[groupIndex % palette.length];
+                    }
+                }
+                // Fallback final
+                const palette = getCategoricalColors(10);
+                const index = (benchmark || '').charCodeAt(0) % palette.length;
+                return palette[index];
+            }
+
+            let data = null;
+            let scatterData = null; // Données du nuage de points
+            
+            // Créer l'icône info en bas à droite de l'embed (HTML, pas SVG)
+            const wrapper = container.closest('.d3-leaderboard-chart-wrapper');
+            if (wrapper) {
+                let infoIcon = wrapper.querySelector('.d3-info-icon');
+                if (!infoIcon) {
+                    infoIcon = document.createElement('div');
+                    infoIcon.className = 'd3-info-icon';
+                    infoIcon.innerHTML = `
+                        <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+                            <path d="M8 6V8M8 10H8.01" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
+                        </svg>
+                    `;
+                    wrapper.appendChild(infoIcon);
+                    
+                    // Tooltip pour l'icône info
+                    let infoTooltip = wrapper.querySelector('.d3-info-tooltip');
+                    if (!infoTooltip) {
+                        infoTooltip = document.createElement('div');
+                        infoTooltip.className = 'd3-info-tooltip';
+                        infoTooltip.innerHTML = `
+                            <div style="font-weight: 600; margin-bottom: 10px; color: var(--text-color); font-size: 13px; text-align: left;">About this chart</div>
+                            <div style="color: var(--text-color); font-size: 12px; line-height: 1.6; text-align: left;">
+                                <p style="margin: 0 0 10px 0; text-align: left;">
+                                    This visualization tracks the evolution of top benchmark scores over time across multiple evaluation frameworks. 
+                                    The step-like lines represent the progression of maximum scores achieved for each benchmark, with circular markers 
+                                    indicating when a new record was set.
+                                </p>
+                                <p style="margin: 0 0 10px 0; text-align: left;">
+                                    The gray scatter plot in the background shows the average scores of all evaluated models, providing context for 
+                                    the top performers. Each point represents a model's average performance across all benchmarks at a given time.
+                                </p>
+                                <p style="margin: 0; text-align: left;">
+                                    Benchmarks are grouped by category (Reasoning & Commonsense, Knowledge, Math, Agentic, and Instruction following), 
+                                    with each group sharing a color family. Variations within a group use different shades of the same base color.
+                                </p>
+                            </div>
+                        `;
+                        wrapper.appendChild(infoTooltip);
+                    }
+                    
+                    // Gestion du hover
+                    infoIcon.addEventListener('mouseenter', () => {
+                        infoTooltip.style.opacity = '1';
+                        infoTooltip.style.pointerEvents = 'auto';
+                    });
+                    
+                    infoIcon.addEventListener('mouseleave', () => {
+                        infoTooltip.style.opacity = '0';
+                        infoTooltip.style.pointerEvents = 'none';
+                    });
+                }
+            }
+            
+            // Tooltip pour les points
+            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';
+                tip.appendChild(tipInner);
+                container.appendChild(tip);
+            } else {
+                tipInner = tip.querySelector('.d3-tooltip__inner') || tip;
+            }
+
+            // Load data from JSON (both old and new leaderboards)
+            const loadData = async () => {
+                const dataPaths = [
+                    '/data/leaderboard_scores_over_time.json',
+                    './assets/data/leaderboard_scores_over_time.json',
+                    '../assets/data/leaderboard_scores_over_time.json',
+                    '../../assets/data/leaderboard_scores_over_time.json'
+                ];
+                
+                const oldDataPaths = [
+                    '/data/leaderboard_scores_over_time_old.json',
+                    './assets/data/leaderboard_scores_over_time_old.json',
+                    '../assets/data/leaderboard_scores_over_time_old.json',
+                    '../../assets/data/leaderboard_scores_over_time_old.json'
+                ];
+                
+                const gaiaDataPaths = [
+                    '/data/data_gaia.json',
+                    './assets/data/data_gaia.json',
+                    '../assets/data/data_gaia.json',
+                    '../../assets/data/data_gaia.json'
+                ];
+
+                let newData = null;
+                let oldData = null;
+                let gaiaData = null;
+
+                // Load new leaderboard data
+                for (const path of dataPaths) {
+                    try {
+                        const response = await fetch(path, { cache: 'no-cache' });
+                        if (response.ok) {
+                            newData = await response.json();
+                            break;
+                        }
+                    } catch (e) {
+                        // Continue to next path
+                    }
+                }
+
+                // Load old leaderboard data
+                for (const path of oldDataPaths) {
+                    try {
+                        const response = await fetch(path, { cache: 'no-cache' });
+                        if (response.ok) {
+                            oldData = await response.json();
+                            break;
+                        }
+                    } catch (e) {
+                        // Continue to next path
+                    }
+                }
+                
+                // Load GAIA data
+                for (const path of gaiaDataPaths) {
+                    try {
+                        const response = await fetch(path, { cache: 'no-cache' });
+                        if (response.ok) {
+                            gaiaData = await response.json();
+                            // Convert GAIA scores from 0-1 to 0-100
+                            if (gaiaData && gaiaData.benchmarks && gaiaData.benchmarks.GAIA) {
+                                gaiaData.benchmarks.GAIA = gaiaData.benchmarks.GAIA.map(point => ({
+                                    ...point,
+                                    score: point.score * 100
+                                }));
+                            }
+                            break;
+                        }
+                    } catch (e) {
+                        // Continue to next path
+                    }
+                }
+
+                // Merge both datasets
+                data = { benchmarks: {} };
+                
+                if (newData) {
+                    Object.assign(data.benchmarks, newData.benchmarks || {});
+                }
+                
+                // Add GAIA data
+                if (gaiaData && gaiaData.benchmarks) {
+                    Object.assign(data.benchmarks, gaiaData.benchmarks);
+                }
+                
+                if (oldData) {
+                    // Merge old benchmarks (they might overlap with new ones, keep both)
+                    Object.keys(oldData.benchmarks || {}).forEach(benchmark => {
+                        if (data.benchmarks[benchmark]) {
+                            // If benchmark exists in both (like MMLU), create two separate entries
+                            // Find the transition date (roughly June 2024)
+                            const transitionDate = new Date('2024-06-01');
+                            
+                            // Separate points by period
+                            const oldPoints = oldData.benchmarks[benchmark].filter(p => new Date(p.date) < transitionDate);
+                            const newPoints = data.benchmarks[benchmark].filter(p => new Date(p.date) >= transitionDate);
+                            
+                            // Calculate records separately for old period
+                            const oldRecords = [];
+                            let maxSoFarOld = 0;
+                            oldPoints.forEach(point => {
+                                if (point.score > maxSoFarOld) {
+                                    maxSoFarOld = point.score;
+                                    oldRecords.push({ date: point.date, score: maxSoFarOld });
+                                }
+                            });
+
+                            // For new period, calculate records independently
+                            const newRecords = [];
+                            let maxSoFarNew = 0;
+                            newPoints.forEach(point => {
+                                if (point.score > maxSoFarNew) {
+                                    maxSoFarNew = point.score;
+                                    newRecords.push({ date: point.date, score: maxSoFarNew });
+                                }
+                            });
+
+                            // Keep old period with original name
+                            if (oldRecords.length > 0) {
+                                data.benchmarks[benchmark] = oldRecords;
+                            } else {
+                                // If no old records, remove the benchmark from data
+                                delete data.benchmarks[benchmark];
+                            }
+                            
+                            // Add new period with a different name
+                            if (newRecords.length > 0) {
+                                data.benchmarks[benchmark + '_new'] = newRecords;
+                            }
+                        } else {
+                            // Benchmark only in old data, add it directly
+                            data.benchmarks[benchmark] = oldData.benchmarks[benchmark];
+                        }
+                    });
+                }
+                
+                
+                if (Object.keys(data.benchmarks).length === 0) {
+                    console.warn('Could not load leaderboard data, using empty dataset');
+                    data = { benchmarks: {} };
+                }
+                
+                // Charger les données du nuage de points
+                const scatterPaths = [
+                    '/assets/data/leaderboard_scatter_plot.json',
+                    '/data/leaderboard_scatter_plot.json',
+                    './assets/data/leaderboard_scatter_plot.json',
+                    '../assets/data/leaderboard_scatter_plot.json',
+                    '../../assets/data/leaderboard_scatter_plot.json'
+                ];
+                
+                const gaiaScatterPaths = [
+                    '/assets/data/data_gaia_points.json',
+                    '/data/data_gaia_points.json',
+                    './assets/data/data_gaia_points.json',
+                    '../assets/data/data_gaia_points.json',
+                    '../../assets/data/data_gaia_points.json'
+                ];
+                
+                for (const path of scatterPaths) {
+                    try {
+                        const scatterResponse = await fetch(path, { cache: 'no-cache' });
+                        if (scatterResponse.ok) {
+                            scatterData = await scatterResponse.json();
+                            break;
+                        }
+                    } catch (e) {
+                        // Continue to next path
+                    }
+                }
+                
+                // Load GAIA scatter points
+                let gaiaScatterData = null;
+                for (const path of gaiaScatterPaths) {
+                    try {
+                        const scatterResponse = await fetch(path, { cache: 'no-cache' });
+                        if (scatterResponse.ok) {
+                            gaiaScatterData = await scatterResponse.json();
+                            // Convert GAIA scores from 0-1 to 0-100
+                            if (gaiaScatterData && gaiaScatterData.points) {
+                                gaiaScatterData.points = gaiaScatterData.points.map(point => ({
+                                    ...point,
+                                    average_score: point.average_score * 100
+                                }));
+                            }
+                            break;
+                        }
+                    } catch (e) {
+                        // Continue to next path
+                    }
+                }
+                
+                // Merge scatter data
+                if (gaiaScatterData && gaiaScatterData.points) {
+                    if (!scatterData) {
+                        scatterData = { points: [] };
+                    }
+                    if (!scatterData.points) {
+                        scatterData.points = [];
+                    }
+                    const gaiaPointsCount = gaiaScatterData.points.length;
+                    scatterData.points = scatterData.points.concat(gaiaScatterData.points);
+                    console.log(`✅ ${gaiaPointsCount} points GAIA ajoutés au nuage de points (total: ${scatterData.points.length})`);
+                }
             };
 
             // Create SVG
             const svg = d3.select(container).append('svg')
                 .attr('width', '100%')
                 .style('display', 'block')
-                .style('cursor', 'crosshair');
+                .style('cursor', 'default');
+
+            // Theme detection and update function
+            const getThemeColors = () => {
+                const isDark = document.documentElement.getAttribute('data-theme') === 'dark';
+                return {
+                    isDark,
+                    textColor: isDark ? 'rgba(255,255,255,0.8)' : 'rgba(0,0,0,0.6)',
+                    gridColor: isDark ? 'rgba(255,255,255,0.08)' : 'rgba(0,0,0,0.08)',
+                    axisColor: isDark ? 'rgba(255,255,255,0.4)' : 'rgba(0,0,0,0.4)',
+                    tooltipBg: isDark ? 'rgba(20, 20, 25, 0.98)' : 'rgba(255, 255, 255, 0.98)',
+                    tooltipBorder: isDark ? 'rgba(255, 255, 255, 0.15)' : 'rgba(0, 0, 0, 0.1)',
+                    tooltipText: isDark ? 'rgba(255, 255, 255, 0.95)' : 'rgba(0, 0, 0, 0.9)',
+                    tooltipMuted: isDark ? 'rgba(255, 255, 255, 0.6)' : 'rgba(0, 0, 0, 0.5)'
+                };
+            };
+            
+            let themeColors = getThemeColors();
+            let legendDivRef = null; // Référence à la légende pour les mises à jour de thème
+            let svgRef = null; // Référence au SVG pour les mises à jour de thème
+            
+            // Watch for theme changes
+            const themeObserver = new MutationObserver(() => {
+                themeColors = getThemeColors();
+                // Legend colors are now handled by CSS variables, no manual update needed
+                // Update axis colors and grid
+                if (svgRef) {
+                    const g = svgRef.select('g');
+                    if (g && !g.empty()) {
+                        g.selectAll('.axis .tick line').attr('stroke', themeColors.axisColor);
+                        g.selectAll('.axis .tick text').attr('fill', themeColors.textColor);
+                        g.selectAll('.grid-line').attr('stroke', themeColors.gridColor);
+                    }
+                }
+            });
+            themeObserver.observe(document.documentElement, {
+                attributes: true,
+                attributeFilter: ['data-theme']
+            });
 
             const render = () => {
+                // Update theme colors before rendering
+                themeColors = getThemeColors();
+                
+                if (!data || !data.benchmarks) {
+                    // Show loading message
+                    svg.selectAll('*').remove();
+                    const width = container.clientWidth || 800;
+                    const height = Math.max(380, Math.round(width / 2.8));
+                    svg.attr('width', width).attr('height', height);
+                    
+                    svg.append('text')
+                        .attr('x', width / 2)
+                        .attr('y', height / 2)
+                        .attr('text-anchor', 'middle')
+                        .attr('fill', themeColors.textColor)
+                        .text('Chargement des données...');
+                    return;
+                }
+
                 const width = container.clientWidth || 800;
-                const height = Math.max(260, Math.round(width / 3)); // keep ~3:1, min height
+                const height = Math.max(380, Math.round(width / 2.8));
                 svg.attr('width', width).attr('height', height);
 
-                const xScale = d3.scaleLinear().domain([0, 3]).range([0, width]);
-                const yScale = d3.scaleLinear().domain([0, 1]).range([height, 0]);
+                // Clear previous render
+                svg.selectAll('*').remove();
 
-                // Subtle stroke color depending on theme
-                const isDark = document.documentElement.getAttribute('data-theme') === 'dark';
-                const strokeColor = isDark ? 'rgba(255,255,255,0.18)' : 'rgba(0,0,0,0.12)';
-                const glowColor = isDark ? 'rgba(255,255,255,0.35)' : 'rgba(0,0,0,0.25)';
-
-
-                // Group for points (no blend mode for better print/PDF visibility)
-                const g = svg.selectAll('g.points').data([0]).join('g').attr('class', 'points');
-
-                // Ensure container can host an absolute 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: '10px 12px',
-                        borderRadius: '12px',
-                        fontSize: '12px',
-                        lineHeight: '1.35',
-                        border: '1px solid var(--border-color)',
-                        background: 'var(--surface-bg)',
-                        color: 'var(--text-color)',
-                        boxShadow: '0 8px 32px rgba(0,0,0,.28), 0 2px 8px rgba(0,0,0,.12)',
-                        opacity: '0',
-                        transition: 'opacity .12s ease',
-                        backdropFilter: 'saturate(1.12) blur(8px)',
-                        zIndex: '20'
-                    });
-                    tipInner = document.createElement('div');
-                    tipInner.className = 'd3-tooltip__inner';
-                    Object.assign(tipInner.style, {
-                        textAlign: 'left',
-                        display: 'flex',
-                        flexDirection: 'column',
-                        gap: '6px',
-                        minWidth: '220px'
+                // Margins (augmenter le bottom pour la légende et plus d'espace à gauche/droite)
+                // Espacement uniforme à gauche et à droite
+                const sidePadding = 25; // Espacement uniforme pour légende et titre
+                const chartRightMargin = sidePadding * 2; // Double espacement à droite du chart
+                const margin = { top: 10, right: chartRightMargin, bottom: 150, left: 60 };
+                const innerWidth = width - margin.left - margin.right;
+                const innerHeight = height - margin.top - margin.bottom;
+
+                // Collect all dates and scores for scaling (limité à décembre 2025)
+                const maxDate = new Date('2025-12-31');
+                const allDates = [];
+                const allScores = [];
+                
+                Object.values(data.benchmarks).forEach(benchmarkData => {
+                    benchmarkData.forEach(point => {
+                        const pointDate = new Date(point.date);
+                        if (pointDate <= maxDate) {
+                            allDates.push(pointDate);
+                            allScores.push(point.score);
+                        }
                     });
-                    tip.appendChild(tipInner);
-                    container.appendChild(tip);
+                });
+
+                if (allDates.length === 0) {
+                    svg.append('text')
+                        .attr('x', width / 2)
+                        .attr('y', height / 2)
+                        .attr('text-anchor', 'middle')
+                        .attr('fill', themeColors.textColor)
+                        .text('Aucune donnée disponible');
+                    return;
+                }
+
+                // Scales (store in window for hover functions)
+                // Limiter le domaine à décembre 2025
+                const maxDateLimit = new Date('2025-12-31');
+                const dateExtent = d3.extent(allDates);
+                // S'assurer que le domaine ne dépasse pas décembre 2025
+                const domainMax = dateExtent[1] && dateExtent[1] > maxDateLimit ? maxDateLimit : (dateExtent[1] || maxDateLimit);
+                
+                window.bannerXScale = d3.scaleTime()
+                    .domain([dateExtent[0] || new Date('2023-01-01'), domainMax])
+                    .range([0, innerWidth])
+                    .nice();
+                
+                // Forcer le domaine maximum à décembre 2025 (après .nice() qui peut étendre le domaine)
+                const currentDomain = window.bannerXScale.domain();
+                if (currentDomain[1] > maxDateLimit) {
+                    window.bannerXScale.domain([currentDomain[0], maxDateLimit]);
+                }
+                
+                // Réappliquer nice() seulement sur le min si nécessaire, mais garder le max à décembre 2025
+                const finalDomain = window.bannerXScale.domain();
+                window.bannerXScale.domain([finalDomain[0], maxDateLimit]);
+                
+                const xScale = window.bannerXScale;
+
+                const yScale = d3.scaleLinear()
+                    .domain([0, Math.max(100, d3.max(allScores) * 1.1)])
+                    .range([innerHeight, 0])
+                    .nice();
+
+                // Create main group
+                const g = svg.append('g')
+                    .attr('transform', `translate(${margin.left},${margin.top})`);
+                
+                // Stocker la référence au SVG pour les mises à jour de thème
+                svgRef = svg;
+                
+                // Hover layer for tooltip
+                const gHover = g.append('g').attr('class', 'hover-layer');
+                let hoverLine = null;
+
+                // Grid lines
+                const yTicks = yScale.ticks(5);
+                g.selectAll('.grid-line')
+                    .data(yTicks)
+                    .enter().append('line')
+                    .attr('class', 'grid-line')
+                    .attr('x1', 0)
+                    .attr('x2', innerWidth)
+                    .attr('y1', d => yScale(d))
+                    .attr('y2', d => yScale(d))
+                    .attr('stroke', themeColors.gridColor)
+                    .attr('stroke-width', 1)
+                    .attr('stroke-dasharray', '2,2');
+
+
+                // Line generator - courbe en escalier (step) pour afficher des seuils successifs
+                // La ligne reste constante jusqu'au prochain point
+                const line = d3.line()
+                    .x(d => xScale(new Date(d.date)))
+                    .y(d => yScale(d.score))
+                    .curve(d3.curveStepAfter); // Step function : reste constante jusqu'au prochain point
+
+                // Draw lines for each benchmark
+                // Handle MMLU separately: old and new as separate lines
+                let benchmarks = Object.keys(data.benchmarks).sort();
+                
+                // If MMLU_new exists, add it to benchmarks list but map it to display as MMLU
+                if (data.benchmarks['MMLU_new']) {
+                    benchmarks.push('MMLU_new');
+                }
+                
+                // Update color map avec tous les benchmarks (les couleurs seront assignées par groupe)
+                updateColorMap(benchmarks);
+                
+                // Fonctions pour gérer le highlight
+                const highlightBenchmark = (highlightedBenchmark) => {
+                    benchmarks.forEach(benchmark => {
+                        const displayName = benchmark === 'MMLU_new' ? 'MMLU-Pro' : benchmark;
+                        if (displayName === highlightedBenchmark) {
+                            // Mettre en évidence la ligne sélectionnée
+                            g.selectAll(`.line-${benchmark}`).style('opacity', 1).attr('stroke-width', 3);
+                            g.selectAll(`.marker-${benchmark}`).style('opacity', 1);
+                            g.selectAll(`.legend-${displayName}`).style('opacity', 1);
                 } else {
-                    tipInner = tip.querySelector('.d3-tooltip__inner') || tip;
+                            // Ghost les autres lignes
+                            g.selectAll(`.line-${benchmark}`).style('opacity', 0.15);
+                            g.selectAll(`.marker-${benchmark}`).style('opacity', 0.15);
+                            g.selectAll(`.legend-${displayName}`).style('opacity', 0.3);
                 }
+                    });
+                };
+                
+                const resetHighlight = () => {
+                    benchmarks.forEach(benchmark => {
+                        g.selectAll(`.line-${benchmark}`).style('opacity', 0.9).attr('stroke-width', 2.5);
+                        g.selectAll(`.marker-${benchmark}`).style('opacity', 1);
+                        const displayName = benchmark === 'MMLU_new' ? 'MMLU-Pro' : benchmark;
+                        g.selectAll(`.legend-${displayName}`).style('opacity', 1);
+                    });
+                };
+                
+                // Ajouter le nuage de points EN PREMIER (en dessous de tout)
+                if (scatterData && scatterData.points && scatterData.points.length > 0) {
+                    // Utiliser les dates déjà filtrées (allDates est défini plus haut)
+                    if (allDates.length > 0) {
+                        const minDate = d3.min(allDates);
+                        const maxDateLimit = new Date('2025-12-31'); // Limiter à décembre 2025
+                        const maxDate = d3.min([d3.max(allDates), maxDateLimit]);
+                        
+                        const filteredPoints = scatterData.points.filter(p => {
+                            const pointDate = new Date(p.date);
+                            return pointDate >= minDate && pointDate <= maxDateLimit;
+                        });
+                        
+                        // Debug: compter les points GAIA dans les points filtrés
+                        const gaiaFilteredCount = filteredPoints.filter(p => p.leaderboard === 'gaia').length;
+                        if (gaiaFilteredCount > 0) {
+                            console.log(`✅ ${gaiaFilteredCount} points GAIA affichés dans le nuage (sur ${filteredPoints.length} points totaux)`);
+                        }
+                        
+                        // Créer un groupe pour le nuage de points (en arrière-plan, en premier)
+                        const scatterGroup = g.append('g')
+                            .attr('class', 'scatter-points');
+                        
+                        // Ajouter les points
+                        scatterGroup.selectAll('.scatter-point')
+                            .data(filteredPoints)
+                            .enter().append('circle')
+                            .attr('class', d => `scatter-point scatter-${d.leaderboard}`)
+                            .attr('cx', d => xScale(new Date(d.date)))
+                            .attr('cy', d => {
+                                // Utiliser average_score_raw si disponible (nouveau leaderboard), sinon average_score
+                                const score = d.average_score_raw !== undefined ? d.average_score_raw : d.average_score;
+                                return yScale(score);
+                            })
+                            .attr('r', 0.75) // Taille réduite pour moins de bruit visuel
+                            .style('fill', 'var(--grid-color)') // Utiliser la variable CSS qui s'adapte au thème
+                            .style('opacity', '0.5') // Opacité supplémentaire pour light mode (moins visible)
+                            .attr('stroke', 'none')
+                            .style('pointer-events', 'none'); // Ne pas interférer avec les interactions
+                    }
+                }
+                
+                benchmarks.forEach(benchmark => {
+                    const points = data.benchmarks[benchmark];
+                    if (!points || points.length === 0) return;
+                    
+                    // Filtrer les points jusqu'en décembre 2025
+                    const maxDate = new Date('2025-12-31');
+                    const filteredPoints = points.filter(p => new Date(p.date) <= maxDate);
+                    
+                    // S'assurer que les points sont triés par date pour le step chart
+                    const sortedPoints = [...filteredPoints].sort((a, b) => new Date(a.date) - new Date(b.date));
+                    
+                    // For MMLU_new, display as MMLU-Pro
+                    const displayName = benchmark === 'MMLU_new' ? 'MMLU-Pro' : benchmark;
+                    // Utiliser la couleur du groupe (getColor gère déjà MMLU_new -> MMLU-Pro)
+                    const color = getColor(benchmark);
 
-                // Final filter: remove small dots very close to the galaxy center (after placement)
-                const centerHoleRadius = 0.48; // elliptical radius threshold
-                const smallSizeThreshold = 7.5; // same notion as Python size cut
-                const rTotal = idx.map((i) => Math.sqrt(((X[i] - cx) / a) ** 2 + ((Y[i] - cy) / b) ** 2));
-                const idxFiltered = idx.filter((i, k) => !(rTotal[k] <= centerHoleRadius && sizesPx[i] < smallSizeThreshold));
-
-                const sel = g.selectAll('circle').data(idxFiltered, (i) => i);
-                sel.join(
-                    (enter) => enter.append('circle')
-                        .attr('cx', (i) => xScale(X[i]))
-                        .attr('cy', (i) => yScale(Y[i]))
-                        .attr('r', (i) => sizesPx[i] / 2)
-                        .attr('fill', (i) => colorFor(Zraw[i]))
-                        .attr('fill-opacity', 0.9)
-                        .on('mouseenter', function (ev, i) {
-                            d3.select(this).raise()
-                                .style('filter', `drop-shadow(0 0 8px ${glowColor})`)
-                                .transition().duration(120).ease(d3.easeCubicOut)
-                                .attr('r', (sizesPx[i] / 2) * 1.25)
-                                .attr('fill-opacity', 1);
-                            const r = Math.sqrt(((X[i] - cx) / a) ** 2 + ((Y[i] - cy) / b) ** 2);
-                            const type = i < lenSpiral ? 'spiral' : 'bulge';
-                            const arm = i < lenSpiral ? (armIndices[i] + 1) : null;
-                            tipInner.innerHTML =
-                                `<div style="font-weight:800;letter-spacing:.1px;"><strong>${labelOf(i)}</strong></div>` +
-                                `<div style="font-size:11px;color:var(--muted-color);margin-top:-4px;margin-bottom:2px;letter-spacing:.1px;"><strong>Type</strong> ${type}${arm ? ` (Arm ${arm})` : ''}</div>` +
-                                `<div style="padding-top:6px;border-top:1px solid var(--border-color);"><strong>Position</strong> X ${X[i].toFixed(2)} · <strong>Y</strong> ${Y[i].toFixed(2)}</div>` +
-                                `<div><strong>Distance</strong> Radius ${r.toFixed(3)} · <strong>Z</strong> ${Zraw[i].toFixed(3)}</div>` +
-                                `<div><strong>Size</strong> ${sizesPx[i].toFixed(1)} px</div>`;
-                            tip.style.opacity = '1';
-                        })
-                        .on('mousemove', (ev, i) => {
-                            const [mx, my] = d3.pointer(ev, container);
-                            const offsetX = 10, offsetY = 12;
-                            tip.style.transform = `translate(${Math.round(mx + offsetX)}px, ${Math.round(my + offsetY)}px)`;
+                    const path = g.append('path')
+                        .datum(sortedPoints)
+                        .attr('fill', 'none')
+                        .attr('stroke', color)
+                        .attr('stroke-width', 2.5)
+                        .attr('d', line)
+                        .attr('class', `line-${benchmark}`)
+                        .style('opacity', 0.9)
+                        .style('cursor', 'pointer');
+
+                    // Add markers at every data point for step chart
+                    g.selectAll(`.marker-${benchmark}`)
+                        .data(sortedPoints)
+                        .enter().append('circle')
+                        .attr('class', `marker-${benchmark}`)
+                        .attr('cx', d => xScale(new Date(d.date)))
+                        .attr('cy', d => yScale(d.score))
+                        .attr('r', 3.5)
+                        .attr('fill', color)
+                        .attr('stroke', 'none')
+                        .style('cursor', 'pointer')
+                        .on('mouseenter', function(ev, d) {
+                            showPointTooltip(ev, d, displayName, color);
                         })
-                        .on('mouseleave', function () {
-                            tip.style.opacity = '0';
-                            tip.style.transform = 'translate(-9999px, -9999px)';
-                            d3.select(this)
-                                .style('filter', null)
-                                .transition().duration(120).ease(d3.easeCubicOut)
-                                .attr('r', (i2) => sizesPx[i2] / 2)
-                                .attr('fill-opacity', 0.9);
-                        }),
-                    (update) => update
-                        .attr('cx', (i) => xScale(X[i]))
-                        .attr('cy', (i) => yScale(Y[i]))
-                        .attr('r', (i) => sizesPx[i] / 2)
-                        .attr('fill', (i) => colorFor(Zraw[i]))
-                        .attr('fill-opacity', 0.9)
-                        .on('mouseenter', function (ev, i) {
-                            d3.select(this).raise()
-                                .style('filter', `drop-shadow(0 0 8px ${glowColor})`)
-                                .transition().duration(120).ease(d3.easeCubicOut)
-                                .attr('r', (sizesPx[i] / 2) * 1.25)
-                                .attr('fill-opacity', 1);
-                            const r = Math.sqrt(((X[i] - cx) / a) ** 2 + ((Y[i] - cy) / b) ** 2);
-                            const type = i < lenSpiral ? 'spiral' : 'bulge';
-                            const arm = i < lenSpiral ? (armIndices[i] + 1) : null;
-                            tipInner.innerHTML =
-                                `<div style="font-weight:800;letter-spacing:.1px;"><strong>${labelOf(i)}</strong></div>` +
-                                `<div style="font-size:11px;color:var(--muted-color);margin-top:-4px;margin-bottom:2px;letter-spacing:.1px;"><strong>Type</strong> ${type}${arm ? ` (Arm ${arm})` : ''}</div>` +
-                                `<div style="padding-top:6px;border-top:1px solid var(--border-color);"><strong>Position</strong> X ${X[i].toFixed(2)} · <strong>Y</strong> ${Y[i].toFixed(2)}</div>` +
-                                `<div><strong>Distance</strong> Radius ${r.toFixed(3)} · <strong>Z</strong> ${Zraw[i].toFixed(3)}</div>` +
-                                `<div><strong>Size</strong> ${sizesPx[i].toFixed(1)} px</div>`;
+                        .on('mouseleave', function() {
+                            hidePointTooltip();
+                        });
+                    
+                    // Hover sur la ligne - afficher tooltip avec le nom du benchmark
+                    path.on('mouseenter', function(ev) {
+                        highlightBenchmark(displayName);
+                        showLineTooltip(ev, displayName, color);
+                    }).on('mouseleave', function() {
+                        resetHighlight();
+                        hideLineTooltip();
+                    });
+                });
+                
+                // X axis
+                const xAxis = d3.axisBottom(xScale)
+                    .ticks(6)
+                    .tickFormat(d3.timeFormat('%b %Y'))
+                    .tickSizeOuter(0)
+                    .tickSize(6) // Taille des barres des tics
+                    .tickPadding(8); // Plus d'espace entre les ticks et les labels
+
+                g.append('g')
+                    .attr('class', 'axis axis-x')
+                    .attr('transform', `translate(0,${innerHeight})`)
+                    .call(xAxis)
+                    .call(g => g.select('.domain').remove()) // Enlever la barre de bordure
+                    .call(g => g.selectAll('.tick line').attr('stroke', themeColors.axisColor).attr('stroke-width', 1))
+                    .call(g => g.selectAll('.tick text').attr('fill', themeColors.textColor).attr('font-size', '11px').attr('opacity', 0.6));
+
+                // Y axis
+                const yAxis = d3.axisLeft(yScale)
+                    .ticks(5)
+                    .tickFormat(d => d + '%')
+                    .tickSizeOuter(0)
+                    .tickSize(6) // Taille des barres des tics
+                    .tickPadding(8); // Plus d'espace entre les ticks et les labels
+
+                g.append('g')
+                    .attr('class', 'axis axis-y')
+                    .call(yAxis)
+                    .call(g => g.select('.domain').remove()) // Enlever la barre de bordure
+                    .call(g => g.selectAll('.tick line').attr('stroke', themeColors.axisColor).attr('stroke-width', 1))
+                    .call(g => g.selectAll('.tick text').attr('fill', themeColors.textColor).attr('font-size', '11px').attr('opacity', 0.6));
+
+                
+                
+                const legendY = innerHeight + 70; // Plus d'espace entre graphique et légende
+                
+                // Créer un conteneur foreignObject pour utiliser flexbox
+                // Augmenter la hauteur pour accommoder tous les éléments (6 items * ~20px + gaps + title)
+                const legendContainer = g.append('foreignObject')
+                    .attr('x', -90) // Aligné à gauche
+                    .attr('y', legendY - 30)
+                    .attr('width', innerWidth + margin.left + margin.right) // Toute la largeur
+                    .attr('height', 200); // Hauteur suffisante pour 6 items + titre + gaps
+                
+                const legendWrapper = legendContainer.append('xhtml:div')
+                    .style('display', 'flex')
+                    .style('flex-direction', 'column')
+                    .style('align-items', 'flex-start')
+                    .style('width', '100%')
+                    .style('padding', '12px 54px');
+                
+                // Label "legend" au-dessus
+                const legendLabel = legendWrapper.append('xhtml:div')
+                    .style('font-size', '12px')
+                    .style('font-weight', '600')
+                    .style('color', 'var(--text-color)')
+                    .style('opacity', '0.8')
+                    .style('margin-bottom', '8px')
+                    .text('Legend');
+                
+                const legendDiv = legendWrapper.append('xhtml:div')
+                    .style('display', 'flex')
+                    .style('flex-direction', 'row') // Une seule ligne horizontale avec tous les groupes
+                    .style('align-items', 'flex-start')
+                    .style('justify-content', 'flex-start')
+                    .style('gap', '30px') // Gap entre les groupes
+                    .style('width', '100%')
+                    .style('flex-wrap', 'wrap') // Permettre le wrap si nécessaire
+                    .style('color', 'var(--text-color)') // Utiliser la variable CSS pour le dark mode
+                    .style('background-color', 'transparent'); // Fond transparent
+                
+                // Stocker la référence pour les mises à jour de thème
+                legendDivRef = legendWrapper;
+                
+                // Filtrer les groupes pour ne garder que ceux qui ont des benchmarks présents dans les données
+                const filteredGroups = BENCHMARK_GROUPS.map(group => {
+                    const availableBenchmarks = group.benchmarks.filter(benchmark => {
+                        // Gérer MMLU-Pro qui est stocké comme MMLU_new
+                        const dataKey = benchmark === 'MMLU-Pro' ? 'MMLU_new' : benchmark;
+                        
+                        if (!data || !data.benchmarks) return false;
+                        if (!data.benchmarks[dataKey]) return false;
+                        
+                        const benchmarkData = data.benchmarks[dataKey];
+                        return Array.isArray(benchmarkData) && benchmarkData.length > 0;
+                    });
+                    
+                    return {
+                        name: group.name,
+                        benchmarks: availableBenchmarks
+                    };
+                }).filter(group => group.benchmarks.length > 0);
+                
+                // Créer la légende par groupes (seulement les titres, détails dans tooltip)
+                filteredGroups.forEach(group => {
+                    const groupColor = getGroupBaseColor(group.name); // Couleur de base du groupe
+                    
+                    // Conteneur pour le groupe
+                    const groupDiv = legendDiv.append('xhtml:div')
+                        .style('display', 'flex')
+                        .style('align-items', 'center')
+                        .style('gap', '8px')
+                        .style('cursor', 'pointer')
+                        .style('position', 'relative')
+                        .attr('class', `legend-group legend-group-${group.name.replace(/\s+/g, '-')}`);
+                    
+                    // Carré de couleur
+                    const groupColorSquare = groupDiv.append('xhtml:div')
+                        .style('width', '14px')
+                        .style('height', '14px')
+                        .style('border-radius', '3px')
+                        .style('background-color', groupColor)
+                        .style('flex-shrink', '0');
+                    
+                    // Titre du groupe
+                    const groupTitleText = groupDiv.append('xhtml:span')
+                        .style('font-size', '11px')
+                        .style('font-weight', '600')
+                        .style('color', 'var(--text-color)')
+                        .style('opacity', '0.8')
+                        .style('white-space', 'nowrap')
+                        .text(group.name);
+                    
+                    // Créer un tooltip externe pour éviter les problèmes de positionnement dans foreignObject
+                    let legendTooltip = container.querySelector('.d3-legend-tooltip');
+                    if (!legendTooltip) {
+                        legendTooltip = d3.select(container).append('div')
+                            .attr('class', 'd3-legend-tooltip')
+                            .style('position', 'absolute')
+                            .style('padding', '8px 12px')
+                            .style('background', 'var(--surface-bg)')
+                            .style('border', '1px solid var(--border-color)')
+                            .style('border-radius', '6px')
+                            .style('box-shadow', '0 4px 12px rgba(0,0,0,0.15)')
+                            .style('font-size', '10px')
+                            .style('color', 'var(--text-color)')
+                            .style('white-space', 'nowrap')
+                            .style('opacity', '0')
+                            .style('pointer-events', 'none')
+                            .style('z-index', '10000')
+                            .style('transition', 'opacity 0.2s ease')
+                            .style('backdrop-filter', 'saturate(1.12) blur(8px)')
+                            .node();
+                    }
+                    
+                    // Hover pour afficher le tooltip et highlight tous les benchmarks du groupe
+                    groupDiv.on('mouseenter', function(ev) {
+                        const tooltip = d3.select(legendTooltip);
+                        tooltip
+                            .text(group.benchmarks.join(', '))
+                            .style('opacity', '1');
+                        
+                        // Positionner le tooltip au-dessus de l'élément
+                        const rect = this.getBoundingClientRect();
+                        const containerRect = container.getBoundingClientRect();
+                        const tooltipRect = legendTooltip.getBoundingClientRect();
+                        
+                        const left = rect.left - containerRect.left + (rect.width / 2) - (tooltipRect.width / 2);
+                        const top = rect.top - containerRect.top - tooltipRect.height - 8;
+                        
+                        tooltip
+                            .style('left', `${left}px`)
+                            .style('top', `${top}px`);
+                        
+                        // Highlight tous les benchmarks du groupe
+                        group.benchmarks.forEach(benchmark => {
+                            const displayName = benchmark;
+                            highlightBenchmark(displayName);
+                        });
+                    }).on('mouseleave', function() {
+                        d3.select(legendTooltip).style('opacity', '0');
+                        resetHighlight();
+                    });
+                });
+                
+            };
+            
+            // Hover functions pour les points
+            let hideTipTimer = null;
+            
+            function showPointTooltip(ev, pointData, benchmarkName, color) {
+                if (hideTipTimer) {
+                    clearTimeout(hideTipTimer);
+                    hideTipTimer = null;
+                }
+                
+                // Update theme colors
+                themeColors = getThemeColors();
+                
+                // Extraire le nom du modèle (peut contenir du HTML)
+                let modelName = pointData.model || 'N/A';
+                // Si c'est du HTML, extraire juste le texte
+                if (modelName.includes('<')) {
+                    const tempDiv = document.createElement('div');
+                    tempDiv.innerHTML = modelName;
+                    modelName = tempDiv.textContent || tempDiv.innerText || 'N/A';
+                }
+                
+                // Construire le contenu du tooltip avec un design amélioré et aligné à gauche
+                const score = pointData.score.toFixed(2);
+                let html = `
+                    <div style="display:flex;align-items:center;gap:8px;margin-bottom:12px;padding-bottom:12px;border-bottom:1px solid var(--border-color);">
+                        <span class="d3-tooltip__color-dot" style="background:${color};width:12px;height:12px;border-radius:2px;flex-shrink:0;"></span>
+                        <span style="font-weight:600;font-size:13px;color:var(--text-color);">${benchmarkName}</span>
+                    </div>
+                    <div style="margin-bottom:10px;text-align:left;">
+                        <div style="font-size:10px;color:var(--muted-color);text-transform:uppercase;letter-spacing:0.05em;margin-bottom:5px;">Score</div>
+                        <div style="font-size:18px;font-weight:700;color:var(--text-color);line-height:1.2;text-align:left;">${score}%</div>
+                    </div>
+                    <div style="text-align:left;">
+                        <div style="font-size:10px;color:var(--muted-color);text-transform:uppercase;letter-spacing:0.05em;margin-bottom:5px;">Model</div>
+                        <div style="font-size:12px;color:var(--text-color);line-height:1.5;word-break:break-word;text-align:left;">${modelName}</div>
+                    </div>
+                `;
+                
+                tipInner.innerHTML = html;
+                
+                // Update tooltip background and border colors avec variables CSS
+                tip.style.background = 'var(--surface-bg)';
+                tip.style.borderColor = 'var(--border-color)';
+                
+                // Positionner le tooltip par rapport au point
+                const rect = container.getBoundingClientRect();
+                const tipRect = tip.getBoundingClientRect();
+                const offsetX = 15;
+                const offsetY = -10;
+                
+                const tipX = ev.clientX - rect.left + offsetX;
+                const tipY = ev.clientY - rect.top + offsetY;
+                
+                // Ajuster si le tooltip sort de l'écran
+                const maxX = window.innerWidth - tipRect.width - 20;
+                const maxY = window.innerHeight - tipRect.height - 20;
+                const finalX = Math.min(tipX, maxX);
+                const finalY = Math.max(10, Math.min(tipY, maxY));
+                
                             tip.style.opacity = '1';
-                        })
-                        .on('mousemove', (ev, i) => {
-                            const [mx, my] = d3.pointer(ev, container);
-                            const offsetX = 10, offsetY = 12;
-                            tip.style.transform = `translate(${Math.round(mx + offsetX)}px, ${Math.round(my + offsetY)}px)`;
-                        })
-                        .on('mouseleave', function () {
+                tip.style.transform = `translate(${Math.round(finalX)}px, ${Math.round(finalY)}px)`;
+            }
+            
+            function hidePointTooltip() {
+                hideTipTimer = setTimeout(() => {
                             tip.style.opacity = '0';
                             tip.style.transform = 'translate(-9999px, -9999px)';
-                            d3.select(this)
-                                .style('filter', null)
-                                .transition().duration(120).ease(d3.easeCubicOut)
-                                .attr('r', (i2) => sizesPx[i2] / 2)
-                                .attr('fill-opacity', 0.9);
-                        })
-                );
-            };
+                }, 100);
+            }
+            
+            // Tooltip pour les lignes (nom du benchmark uniquement)
+            let lineTooltip = null;
+            
+            function showLineTooltip(ev, benchmarkName, color) {
+                if (!lineTooltip) {
+                    lineTooltip = d3.select(container).append('div')
+                        .attr('class', 'd3-line-tooltip')
+                        .style('position', 'absolute')
+                        .style('padding', '6px 10px')
+                        .style('background', 'var(--surface-bg)')
+                        .style('border', '1px solid var(--border-color)')
+                        .style('border-radius', '4px')
+                        .style('font-size', '11px')
+                        .style('font-weight', '600')
+                        .style('color', 'var(--text-color)')
+                        .style('white-space', 'nowrap')
+                        .style('opacity', '0')
+                        .style('pointer-events', 'none')
+                        .style('z-index', '10000')
+                        .style('transition', 'opacity 0.15s ease')
+                        .style('box-shadow', '0 2px 8px rgba(0,0,0,0.1)')
+                        .node();
+                }
+                
+                const tooltip = d3.select(lineTooltip);
+                tooltip.text(benchmarkName);
+                
+                const rect = container.getBoundingClientRect();
+                const tooltipRect = lineTooltip.getBoundingClientRect();
+                const offsetX = 10;
+                const offsetY = -25;
+                
+                const tipX = ev.clientX - rect.left + offsetX;
+                const tipY = ev.clientY - rect.top + offsetY;
+                
+                // Ajuster si le tooltip sort de l'écran
+                const maxX = window.innerWidth - tooltipRect.width - 20;
+                const maxY = window.innerHeight - tooltipRect.height - 20;
+                const finalX = Math.min(tipX, maxX);
+                const finalY = Math.max(10, Math.min(tipY, maxY));
+                
+                tooltip
+                    .style('opacity', '1')
+                    .style('left', `${finalX}px`)
+                    .style('top', `${finalY}px`);
+            }
+            
+            function hideLineTooltip() {
+                if (lineTooltip) {
+                    d3.select(lineTooltip).style('opacity', '0');
+                }
+            }
 
+            // Load data and render
+            loadData().then(() => {
             // First render + resize
             if (window.ResizeObserver) {
                 const ro = new ResizeObserver(() => render());
@@ -248,11 +1185,26 @@
             } else {
                 window.addEventListener('resize', render);
             }
+                
+                // Re-render when color palette changes (if ColorPalettes supports events)
+                if (window.ColorPalettes && typeof window.ColorPalettes.refresh === 'function') {
+                    // Update colors and re-render when palette refreshes
+                    const updateColors = () => {
+                        if (data && data.benchmarks) {
+                            updateColorMap(Object.keys(data.benchmarks).sort());
+                            render();
+                        }
+                    };
+                    // Listen for custom event if available
+                    window.addEventListener('colorpalettechange', updateColors);
+                }
+                
             render();
+            });
         };
 
         if (document.readyState === 'loading') {
             document.addEventListener('DOMContentLoaded', () => ensureD3(bootstrap), { once: true });
         } else { ensureD3(bootstrap); }
     })();
-</script>
+</script>

app/src/content/embeds/d3-mmlu-heatmap.html

@@ -0,0 +1,489 @@
+<div class="d3-mmlu-heatmap">
+  <div class="heatmap-container"></div>
+  <div class="legend-container"></div>
+</div>
+<style>
+  .d3-mmlu-heatmap {
+    position: relative;
+    margin: 24px 0;
+  }
+
+  .d3-mmlu-heatmap .heatmap-container {
+    width: 100%;
+  }
+
+  .d3-mmlu-heatmap .legend-container {
+    margin-top: 8px;
+    padding: 0 8px;
+  }
+
+  .d3-mmlu-heatmap .legend-title {
+    font-size: 12px;
+    font-weight: 600;
+    color: var(--text-color);
+    margin-bottom: 12px;
+    text-align: center;
+  }
+
+  .d3-mmlu-heatmap .legend-grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 8px 24px;
+    font-size: 11px;
+    color: var(--text-color);
+  }
+  
+  .d3-mmlu-heatmap .legend-column {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+  }
+
+  .d3-mmlu-heatmap .legend-item {
+    display: flex;
+    align-items: flex-start;
+    gap: 8px;
+  }
+
+  .d3-mmlu-heatmap .legend-label {
+    font-weight: 700;
+    min-width: 20px;
+  }
+
+  .d3-mmlu-heatmap .legend-text {
+    flex: 1;
+    line-height: 1.4;
+  }
+
+  .d3-mmlu-heatmap .axis-label {
+    fill: var(--text-color);
+    font-size: 11px;
+    font-weight: 600;
+  }
+
+  .d3-mmlu-heatmap .cell-text {
+    fill: var(--text-color);
+    font-size: 10px;
+    font-weight: 600;
+    pointer-events: none;
+  }
+
+  @media (max-width: 768px) {
+    .d3-mmlu-heatmap .legend-grid {
+      grid-template-columns: 1fr;
+    }
+  }
+</style>
+<script>
+  (() => {
+    // Load D3 from CDN once
+    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-mmlu-heatmap'))) {
+        const cs = Array.from(document.querySelectorAll('.d3-mmlu-heatmap')).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';
+      }
+
+      // 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;
+      }
+
+      // Heatmap container (no card)
+      const heatmapContainer = container.querySelector('.heatmap-container');
+      const svg = d3.select(heatmapContainer).append('svg').attr('width', '100%').style('display', 'block');
+      const defs = svg.append('defs');
+      const gRoot = svg.append('g');
+      const gCells = gRoot.append('g');
+      const gAxes = gRoot.append('g');
+
+      // Data from the image (5 models)
+      const models = [
+        'Mistral-7B-v0.1',
+        'Qwen1.5-7B',
+        'gemma-7b',
+        'phi-2',
+        'DeciLM-7B'
+      ];
+
+      const promptFormats = [
+        '...? -> choice1/choice2/...',
+        'Q:...? A: -> choice1/choice2/...',
+        'Question: ...? Answer: -> choice1/choice2/...',
+        'Question: ...? Choices: ... Answer: -> choice1/choice2/...',
+        'Question: ...? Choices: A. ... Answer: -> choice1/choice2/...',
+        'Question: ...? Choices: (A) ... Answer: -> choice1/choice2/...',
+        'Question: ...? Choices: A. ... Answer: -> A/B/C/D',
+        'Question: ...? Choices: (A) Answer: -> (A)/(B)/(C)/(D)'
+      ];
+
+      const matrix = [
+        [49.0, 50.5, 52.1, 54.5, 56.4, 55.4, 55.5, 57.0], // Mistral-7B-v0.1
+        [37.6, 41.8, 43.5, 47.9, 50.8, 51.2, 22.9, 47.7], // Qwen1.5-7B
+        [44.6, 48.0, 47.6, 53.5, 54.2, 54.9, 56.4, 50.7], // gemma-7b
+        [39.1, 44.3, 46.5, 46.1, 47.1, 48.4, 51.7, 45.8], // phi-2
+        [43.6, 48.9, 49.5, 51.0, 51.3, 52.0, 52.8, 52.3]  // DeciLM-7B
+      ];
+
+      // Colors: red to green palette (red for low, green for high)
+      const getDivergingColors = (count) => {
+        try {
+          if (window.ColorPalettes && typeof window.ColorPalettes.getColors === 'function') {
+            return window.ColorPalettes.getColors('diverging', count);
+          }
+        } catch (_) { }
+        // Fallback: red to green scale
+        const colors = [];
+        for (let i = 0; i < count; i++) {
+          const t = i / (count - 1);
+          // Red (low) -> Yellow (mid) -> Green (high)
+          if (t < 0.5) {
+            // Red to yellow
+            const r = 255;
+            const g = Math.round(t * 2 * 255);
+            const b = 0;
+            colors.push(`rgb(${r}, ${g}, ${b})`);
+          } else {
+            // Yellow to green
+            const t2 = (t - 0.5) * 2;
+            const r = Math.round(255 - t2 * 255);
+            const g = 255;
+            const b = 0;
+            colors.push(`rgb(${r}, ${g}, ${b})`);
+          }
+        }
+        return colors;
+      };
+
+      const palette = getDivergingColors(10);
+
+      let width = 900;
+      const margin = { top: 0, right: 0, bottom: 0, left: 100 }; // Only left margin for model names
+
+      function updateSize() {
+        width = container.clientWidth || 900;
+        
+        // Calculate actual content dimensions
+        const nRows = models.length;
+        const nCols = promptFormats.length;
+        const innerWidth = width - margin.left - margin.right;
+        const maxDim = Math.max(nRows, nCols);
+        const availableSize = Math.min(innerWidth, 600);
+        const cellSize = availableSize / maxDim;
+        const gridWidth = cellSize * nCols;
+        const gridHeight = cellSize * nRows;
+        const labelsHeight = 15; // space for X-axis labels
+        
+        // Calculate exact SVG dimensions needed
+        const actualWidth = margin.left + gridWidth + margin.right;
+        const actualHeight = margin.top + gridHeight + labelsHeight + margin.bottom;
+        
+        svg
+          .attr('viewBox', `0 0 ${actualWidth} ${actualHeight}`)
+          .attr('preserveAspectRatio', 'xMidYMin meet')
+          .style('width', '100%')
+          .style('height', 'auto');
+        
+        gRoot.attr('transform', `translate(${margin.left},${margin.top})`);
+        return { innerWidth: gridWidth, innerHeight: gridHeight + labelsHeight };
+      }
+
+      function getColorScale(values, minV, maxV) {
+        // Always use the custom red-to-green palette (fallback)
+        // Don't use ColorPalettes for this specific heatmap
+        const linearScale = d3.scaleLinear()
+          .domain([minV, maxV])
+          .range([0, 1])
+          .clamp(true);
+        
+        return (v) => {
+          const t = linearScale(v);
+          // Apply power transformation to emphasize extremes
+          // Values near min/max get more extreme colors
+          let transformedT;
+          if (t < 0.5) {
+            // Compress lower values, making extremes more distinct
+            transformedT = Math.pow(t * 2, 1.8) / 2;
+          } else {
+            // Expand upper values, making extremes more distinct
+            transformedT = 0.5 + Math.pow((t - 0.5) * 2, 1.8) / 2;
+          }
+          
+          // Red to green scale: red (low scores = bad) -> yellow (mid) -> green (high scores = good)
+          // Less flashy: reduce saturation
+          if (transformedT < 0.5) {
+            // Red to yellow (less saturated)
+            const r = 220;
+            const g = Math.round(80 + transformedT * 2 * 140);
+            const b = Math.round(60 + transformedT * 2 * 40);
+            return `rgb(${r}, ${g}, ${b})`;
+          } else {
+            // Yellow to green (less saturated)
+            const t2 = (transformedT - 0.5) * 2;
+            const r = Math.round(220 - t2 * 100);
+            const g = 220;
+            const b = Math.round(100 - t2 * 60);
+            return `rgb(${r}, ${g}, ${b})`;
+          }
+        };
+      }
+
+      function chooseReadableTextColor(bgColor) {
+        try {
+          const m = String(bgColor || '').match(/rgb\(([^)]+)\)/);
+          if (!m) return '#0e1116';
+          const [r, g, b] = m[1].split(',').map(s => parseFloat(s.trim()));
+          const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
+          return luminance < 0.5 ? '#ffffff' : '#0e1116';
+        } catch (_) {
+          return '#0e1116';
+        }
+      }
+
+      function render() {
+        const { innerWidth, innerHeight } = updateSize();
+        const nRows = models.length;
+        const nCols = promptFormats.length;
+        
+        // Calculate cell size to make each cell square
+        const maxDim = Math.max(nRows, nCols);
+        const cellSize = innerWidth / maxDim;
+        const gridWidth = cellSize * nCols;
+        const gridHeight = cellSize * nRows;
+        
+        const gridOffsetX = 0;
+        const gridOffsetY = 0;
+
+        const x = d3.scaleBand()
+          .domain(d3.range(nCols))
+          .range([0, gridWidth])
+          .paddingInner(0);
+
+        const y = d3.scaleBand()
+          .domain(d3.range(nRows))
+          .range([0, gridHeight])
+          .paddingInner(0);
+
+        // Flatten matrix data
+        const flatData = [];
+        let minVal = Infinity, maxVal = -Infinity;
+        for (let r = 0; r < nRows; r++) {
+          for (let c = 0; c < nCols; c++) {
+            const value = matrix[r][c];
+            if (value < minVal) minVal = value;
+            if (value > maxVal) maxVal = value;
+            flatData.push({ r, c, value, model: models[r], format: promptFormats[c] });
+          }
+        }
+
+        const colorScale = getColorScale(flatData.map(d => d.value), minVal, maxVal);
+
+        gCells.attr('transform', `translate(${gridOffsetX}, ${gridOffsetY})`);
+
+        // Add rounded corners only on the outer edges of the matrix using clipPath
+        const cornerRadius = 6;
+        defs.selectAll('#matrix-clip').remove();
+        const clipPath = defs.append('clipPath')
+          .attr('id', 'matrix-clip');
+        clipPath.append('rect')
+          .attr('x', 0)
+          .attr('y', 0)
+          .attr('width', gridWidth)
+          .attr('height', gridHeight)
+          .attr('rx', cornerRadius)
+          .attr('ry', cornerRadius);
+        
+        gCells.attr('clip-path', 'url(#matrix-clip)');
+
+        const cells = gCells.selectAll('g.cell')
+          .data(flatData, d => `${d.r}-${d.c}`);
+
+        const cellsEnter = cells.enter()
+          .append('g')
+          .attr('class', 'cell');
+
+        cellsEnter.append('rect')
+          .attr('rx', 0)
+          .attr('ry', 0)
+          .on('mousemove', (event, d) => {
+            const [px, py] = d3.pointer(event, container);
+            tipInner.innerHTML = `<strong>${d.model}</strong><br/>${d.format}<br/>Score: ${d.value.toFixed(1)}`;
+            tip.style.transform = `translate(${px + 10}px, ${py + 10}px)`;
+            tip.style.opacity = '1';
+          })
+          .on('mouseleave', () => {
+            tip.style.opacity = '0';
+          });
+
+        cellsEnter.append('text')
+          .attr('class', 'cell-text')
+          .attr('text-anchor', 'middle')
+          .attr('dominant-baseline', 'middle');
+
+        const cellsMerged = cellsEnter.merge(cells);
+
+        cellsMerged.select('rect')
+          .attr('x', d => x(d.c))
+          .attr('y', d => y(d.r))
+          .attr('width', Math.max(1, x.bandwidth()))
+          .attr('height', Math.max(1, y.bandwidth()))
+          .attr('fill', d => colorScale(d.value));
+
+        cellsMerged.select('text')
+          .attr('x', d => x(d.c) + x.bandwidth() / 2)
+          .attr('y', d => y(d.r) + y.bandwidth() / 2)
+          .text(d => d.value.toFixed(1))
+          .style('fill', function(d) {
+            try {
+              const rect = this.parentNode.querySelector('rect');
+              const bg = rect ? getComputedStyle(rect).fill : colorScale(d.value);
+              return chooseReadableTextColor(bg);
+            } catch (_) {
+              return '#0e1116';
+            }
+          });
+
+        cells.exit().remove();
+
+        // Axes
+        gAxes.selectAll('*').remove();
+        gAxes.attr('transform', `translate(${gridOffsetX}, ${gridOffsetY})`);
+
+        // X-axis labels (prompt formats)
+        gAxes.append('g')
+          .selectAll('text')
+          .data(promptFormats)
+          .join('text')
+          .attr('class', 'axis-label')
+          .attr('text-anchor', 'middle')
+          .attr('x', (_, i) => x(i) + x.bandwidth() / 2)
+          .attr('y', gridHeight + 12)
+          .text((d, i) => String.fromCharCode(65 + i)); // A, B, C, D, E, F, G
+
+        // Y-axis labels (models)
+        gAxes.append('g')
+          .selectAll('text')
+          .data(models)
+          .join('text')
+          .attr('class', 'axis-label')
+          .attr('text-anchor', 'end')
+          .attr('x', -10)
+          .attr('y', (_, i) => y(i) + y.bandwidth() / 2)
+          .attr('dominant-baseline', 'middle')
+          .text(d => d);
+
+        // Update HTML legend
+        const legendContainer = container.querySelector('.legend-container');
+        legendContainer.innerHTML = '';
+        
+        const legendTitle = document.createElement('div');
+        legendTitle.className = 'legend-title';
+        legendTitle.textContent = 'Prompt Formats:';
+        legendContainer.appendChild(legendTitle);
+        
+        const legendGrid = document.createElement('div');
+        legendGrid.className = 'legend-grid';
+        
+        // Column 1: A, B, C, D (first 4)
+        const column1 = document.createElement('div');
+        column1.className = 'legend-column';
+        
+        // Column 2: E, F, G, H (last 4)
+        const column2 = document.createElement('div');
+        column2.className = 'legend-column';
+        
+        promptFormats.forEach((format, i) => {
+          const item = document.createElement('div');
+          item.className = 'legend-item';
+          
+          const label = document.createElement('span');
+          label.className = 'legend-label';
+          label.textContent = `${String.fromCharCode(65 + i)}.`;
+          
+          const text = document.createElement('span');
+          text.className = 'legend-text';
+          text.textContent = format;
+          
+          item.appendChild(label);
+          item.appendChild(text);
+          
+          // First 4 go to column 1, rest go to column 2
+          if (i < 4) {
+            column1.appendChild(item);
+          } else {
+            column2.appendChild(item);
+          }
+        });
+        
+        legendGrid.appendChild(column1);
+        legendGrid.appendChild(column2);
+        
+        legendContainer.appendChild(legendGrid);
+      }
+
+      // Initial render + resize handling
+      render();
+      const rerender = () => render();
+      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>

app/src/content/embeds/d3-two-lines-chart.html

@@ -572,8 +572,33 @@
             .attr('d', d => line(applySmoothing(d.values, smoothEnabled)));
 
           // Update axes
-          gAxes.select('.x-axis').call(d3.axisBottom(newXScale).ticks(5).tickSizeOuter(0).tickFormat(formatStep));
-          gAxes.select('.y-axis').call(d3.axisLeft(newYScale).ticks(5).tickSizeOuter(0).tickFormat(formatValue));
+          const newXTicks = newXScale.ticks(5);
+          const newXAxis = d3.axisBottom(newXScale)
+            .tickValues(newXTicks)
+            .tickSizeOuter(0)
+            .tickFormat(formatStep);
+          gAxes.select('.x-axis').call(newXAxis);
+          
+          // Format Y axis to round appropriately based on value magnitude
+          const formatValueRounded = (v) => {
+            if (v === 0) return '0';
+            // Determine rounding precision based on value magnitude
+            if (v < 1) {
+              // For values < 1, round to nearest 0.1
+              return d3.format('.1f')(Math.round(v * 10) / 10);
+            } else if (v < 10) {
+              // For values 1-10, round to nearest 1
+              return d3.format('d')(Math.round(v));
+            } else if (v < 100) {
+              // For values 10-100, round to nearest 10
+              return d3.format('d')(Math.round(v / 10) * 10);
+            } else {
+              // For larger values, round to nearest 10
+              return d3.format('d')(Math.round(v / 10) * 10);
+            }
+          };
+          
+          gAxes.select('.y-axis').call(d3.axisLeft(newYScale).ticks(5).tickSizeOuter(0).tickFormat(formatValueRounded));
 
           // Update baseline position
           if (baseline !== null) {
@@ -639,7 +664,26 @@
           // Create smart formatters
           const stepValues = allData.map(d => d.step);
           const metricValues = allData.map(d => d.value);
-          formatStep = createSmartFormatter(stepValues);
+          
+          // For X axis (tokens already in billions), use a specific formatter
+          const stepMin = d3.min(stepValues);
+          const stepMax = d3.max(stepValues);
+          
+          // Tokens are already in billions, format appropriately
+          formatStep = (v) => {
+            if (v === 0) return '0';
+            // Format with appropriate precision based on value
+            if (v < 0.01) return d3.format('.3f')(v);
+            if (v < 0.1) return d3.format('.2f')(v);
+            if (v < 1) return d3.format('.2f')(v);
+            if (v < 10) return d3.format('.1f')(v);
+            // For larger values, check if integer
+            if (Math.abs(v - Math.round(v)) < 0.01) {
+              return d3.format('d')(Math.round(v));
+            }
+            return d3.format('.1f')(v);
+          };
+          
           formatValue = createSmartFormatter(metricValues);
 
           // Update clip
@@ -660,10 +704,38 @@
 
           // Axes
           gAxes.selectAll('*').remove();
+          
+          // Generate explicit ticks for X axis
+          const xTicks = xScale.ticks(5);
+          const xAxis = d3.axisBottom(xScale)
+            .tickValues(xTicks)
+            .tickSizeOuter(0)
+            .tickFormat(formatStep);
+          
           gAxes.append('g').attr('class', 'x-axis').attr('transform', `translate(0,${innerHeight})`)
-            .call(d3.axisBottom(xScale).ticks(5).tickSizeOuter(0).tickFormat(formatStep));
+            .call(xAxis);
+          
+          // Format Y axis to round appropriately based on value magnitude
+          const formatValueRounded = (v) => {
+            if (v === 0) return '0';
+            // Determine rounding precision based on value magnitude
+            if (v < 1) {
+              // For values < 1, round to nearest 0.1
+              return d3.format('.1f')(Math.round(v * 10) / 10);
+            } else if (v < 10) {
+              // For values 1-10, round to nearest 1
+              return d3.format('d')(Math.round(v));
+            } else if (v < 100) {
+              // For values 10-100, round to nearest 10
+              return d3.format('d')(Math.round(v / 10) * 10);
+            } else {
+              // For larger values, round to nearest 10
+              return d3.format('d')(Math.round(v / 10) * 10);
+            }
+          };
+          
           gAxes.append('g').attr('class', 'y-axis')
-            .call(d3.axisLeft(yScale).ticks(5).tickSizeOuter(0).tickFormat(formatValue));
+            .call(d3.axisLeft(yScale).ticks(5).tickSizeOuter(0).tickFormat(formatValueRounded));
           gAxes.selectAll('.domain, .tick line').attr('stroke', 'var(--axis-color)');
           gAxes.selectAll('text').attr('fill', 'var(--tick-color)');
 
@@ -940,7 +1012,7 @@
                 const mean = values.reduce((a, b) => a + b, 0) / values.length;
                 allData.push({
                   run: runName,
-                  step: parseFloat(tokenKey) / 1e9, // Convert to billions
+                  step: parseFloat(tokenKey), // Tokens are already in billions in CSV
                   value: mean
                 });
               });