wider layout, ranking toggle animation

charts.js

@@ -362,7 +362,7 @@ document.querySelectorAll('.dim-btn:not(.probing-dim)').forEach(btn => {
 });
 
 // ============================================================================
-// RANKING COMPARISON - Matches Python create_rank_figure.py exactly
+// RANKING COMPARISON - With animated mode switching
 // ============================================================================
 const RANKING_DISPLAY_NAMES = {
     'run_api_deepseek_deepseek-chat': 'DeepSeek-V3.2',
@@ -390,45 +390,47 @@ const RANKING_DISPLAY_NAMES = {
     'gemini3-flash': 'Gemini3-Flash',
 };
 
+const PROPRIETARY_COLOR = '#6A0DAD';  // Vivid purple
+const OPENSOURCE_COLOR = '#228B22';   // Forest green
+
 function getDisplayName(model) {
     return RANKING_DISPLAY_NAMES[model] || model;
 }
 
-function initRankingCharts() {
+let currentRankingMode = 'novelty';
+
+function renderRankingCharts(mode, animate = false) {
     const scenarios = [
         { key: 'MIMIC', id: 'mimic' },
         { key: '10K', id: '10k' },
         { key: 'GLOBEM', id: 'globem' }
     ];
 
-    // Colors matching Python script
-    const PROPRIETARY_COLOR = '#6A0DAD';  // Vivid purple
-    const OPENSOURCE_COLOR = '#228B22';   // Forest green
-
     scenarios.forEach(({ key, id }) => {
         const rawData = DDR_DATA.ranking[key];
         if (!rawData) return;
 
-        // Sort by acc_rank (like Python: df.sort_values(['acc_rank', 'bt_rank']))
-        const sortedModels = [...rawData].sort((a, b) => {
-            if (a.acc_rank !== b.acc_rank) return a.acc_rank - b.acc_rank;
-            return a.bt_rank - b.bt_rank;
-        });
+        // Sort by primary ranking based on mode
+        let sortedModels;
+        if (mode === 'novelty') {
+            sortedModels = [...rawData].sort((a, b) => a.bt_rank - b.bt_rank);
+        } else {
+            sortedModels = [...rawData].sort((a, b) => a.acc_rank - b.acc_rank);
+        }
 
-        const models = sortedModels;  // Use all models (up to 22)
-        const traces = [];
+        const models = sortedModels;
         const topN = models.length;
+        const traces = [];
 
-        // Connection lines (dashed black)
+        // Connection lines (dashed)
         models.forEach((m, i) => {
-            const accRankClipped = Math.min(m.acc_rank, topN + 1);
             traces.push({
-                x: [m.bt_rank, accRankClipped],
+                x: [m.bt_rank, m.acc_rank],
                 y: [i, i],
                 mode: 'lines',
                 line: {
-                    color: 'rgba(0, 0, 0, 0.3)',
-                    width: 1,
+                    color: 'rgba(148, 163, 184, 0.4)',
+                    width: 1.5,
                     dash: 'dash'
                 },
                 showlegend: false,
@@ -436,41 +438,39 @@ function initRankingCharts() {
             });
         });
 
-        // Accuracy rank points (hollow diamonds) - drawn first (lower z)
-        const accColors = models.map(m => m.is_proprietary ? PROPRIETARY_COLOR : OPENSOURCE_COLOR);
+        // Novelty rank points (filled circles)
         traces.push({
-            x: models.map(m => m.acc_rank),
+            x: models.map(m => m.bt_rank),
             y: models.map((_, i) => i),
             mode: 'markers',
-            name: 'Accuracy Rank',
+            name: 'Novelty Rank',
             marker: {
-                size: 12,
-                symbol: 'diamond-open',
-                color: accColors,
-                line: { width: 2 }
+                size: mode === 'novelty' ? 12 : 10,
+                symbol: 'circle',
+                color: models.map(m => m.is_proprietary ? PROPRIETARY_COLOR : OPENSOURCE_COLOR),
+                line: { color: '#fff', width: 1.5 }
             },
-            text: models.map(m => `<b>${getDisplayName(m.model)}</b><br>Accuracy Rank: #${m.acc_rank}<br>Accuracy: ${m.accuracy}%`),
+            text: models.map(m => `<b>${getDisplayName(m.model)}</b><br>Novelty: #${m.bt_rank}<br>Win Rate: ${m.win_rate}%`),
             hovertemplate: '%{text}<extra></extra>'
         });
 
-        // Novelty rank points (filled circles) - drawn on top
-        const noveltyColors = models.map(m => m.is_proprietary ? PROPRIETARY_COLOR : OPENSOURCE_COLOR);
+        // Accuracy rank points (hollow diamonds)
         traces.push({
-            x: models.map(m => m.bt_rank),
+            x: models.map(m => m.acc_rank),
             y: models.map((_, i) => i),
             mode: 'markers',
-            name: 'Novelty Rank',
+            name: 'Accuracy Rank',
             marker: {
-                size: 10,
-                symbol: 'circle',
-                color: noveltyColors,
-                line: { color: '#000', width: 1 }
+                size: mode === 'accuracy' ? 12 : 10,
+                symbol: 'diamond-open',
+                color: models.map(m => m.is_proprietary ? PROPRIETARY_COLOR : OPENSOURCE_COLOR),
+                line: { width: 2 }
             },
-            text: models.map(m => `<b>${getDisplayName(m.model)}</b><br>Novelty Rank: #${m.bt_rank}<br>Win Rate: ${m.win_rate}%`),
+            text: models.map(m => `<b>${getDisplayName(m.model)}</b><br>Accuracy: #${m.acc_rank}<br>${m.accuracy}%`),
             hovertemplate: '%{text}<extra></extra>'
         });
 
-        // Calculate Spearman correlation
+        // Calculate correlation
         const btRanks = models.map(m => m.bt_rank);
         const accRanks = models.map(m => m.acc_rank);
         const n = btRanks.length;
@@ -484,12 +484,14 @@ function initRankingCharts() {
         }
         const rho = num / Math.sqrt(denBt * denAcc);
 
+        const sortLabel = mode === 'novelty' ? 'Sorted by Novelty' : 'Sorted by Accuracy';
+
         const layout = {
             ...darkLayout,
             xaxis: {
                 ...darkLayout.xaxis,
                 title: { text: 'Rank', font: { size: 10, color: '#e2e8f0' } },
-                range: [topN + 0.5, 0.5],  // Inverted: high ranks left, 1 on right
+                range: [topN + 0.5, 0.5],
                 dtick: 2,
                 tick0: 2
             },
@@ -498,29 +500,64 @@ function initRankingCharts() {
                 tickmode: 'array',
                 tickvals: models.map((_, i) => i),
                 ticktext: models.map(m => getDisplayName(m.model)),
-                tickfont: { size: 8, color: '#94a3b8' },
+                tickfont: { size: 9, color: '#94a3b8' },
                 automargin: true,
                 range: [-0.5, models.length - 0.5]
             },
             showlegend: false,
-            annotations: [{
-                x: 0.02,
-                y: 0.98,
-                xref: 'paper',
-                yref: 'paper',
-                text: `ρ = ${rho.toFixed(2)}`,
-                showarrow: false,
-                font: { size: 11, color: '#94a3b8', family: 'Inter' },
-                bgcolor: 'rgba(30, 41, 59, 0.8)',
-                borderpad: 4
-            }],
-            margin: { t: 15, r: 10, b: 40, l: 110 }
+            annotations: [
+                {
+                    x: 0.02,
+                    y: 0.98,
+                    xref: 'paper',
+                    yref: 'paper',
+                    text: `ρ = ${rho.toFixed(2)}`,
+                    showarrow: false,
+                    font: { size: 11, color: '#94a3b8', family: 'Inter' },
+                    bgcolor: 'rgba(30, 41, 59, 0.8)',
+                    borderpad: 4
+                },
+                {
+                    x: 0.98,
+                    y: 0.98,
+                    xref: 'paper',
+                    yref: 'paper',
+                    text: sortLabel,
+                    showarrow: false,
+                    font: { size: 10, color: mode === 'novelty' ? PROPRIETARY_COLOR : OPENSOURCE_COLOR, family: 'Inter' },
+                    bgcolor: 'rgba(30, 41, 59, 0.8)',
+                    borderpad: 4
+                }
+            ],
+            margin: { t: 15, r: 15, b: 40, l: 120 }
         };
 
-        Plotly.newPlot(`ranking-${id}`, traces, layout, plotlyConfig);
+        if (animate) {
+            Plotly.react(`ranking-${id}`, traces, layout, plotlyConfig);
+        } else {
+            Plotly.newPlot(`ranking-${id}`, traces, layout, plotlyConfig);
+        }
     });
 }
 
+function initRankingCharts() {
+    renderRankingCharts('novelty', false);
+}
+
+// Ranking mode toggle event listener
+document.querySelectorAll('.ranking-dim').forEach(btn => {
+    btn.addEventListener('click', () => {
+        const mode = btn.dataset.mode;
+        if (mode === currentRankingMode) return;
+
+        document.querySelectorAll('.ranking-dim').forEach(b => b.classList.remove('active'));
+        btn.classList.add('active');
+
+        currentRankingMode = mode;
+        renderRankingCharts(mode, true);
+    });
+});
+
 // ============================================================================
 // TURN DISTRIBUTION - 3 Charts (Ridgeline style)
 // ============================================================================

index.html

@@ -75,10 +75,15 @@
         <section id="ranking" class="section visible">
             <div class="section-header">
                 <h2>🏆 Ranking Comparison</h2>
-                <p>Novelty (Bradley-Terry pairwise) vs Accuracy ranking. ● = Novelty Rank, ◇ = Accuracy Rank. Purple =
-                    Proprietary, Green = Open-source.</p>
+                <p>Novelty (Bradley-Terry) vs Accuracy ranking. ● = Novelty, ◇ = Accuracy. Purple = Proprietary, Green =
+                    Open-source.</p>
+            </div>
+            <div class="dimension-toggle">
+                <button class="dim-btn ranking-dim active" data-mode="novelty">🎯 Sort by Novelty</button>
+                <button class="dim-btn ranking-dim" data-mode="accuracy">📊 Sort by Accuracy</button>
             </div>
             <div class="charts-grid three-col">
+
                 <div class="chart-card">
                     <h3>MIMIC</h3>
                     <div id="ranking-mimic" class="chart-container-tall"></div>

styles.css

@@ -131,9 +131,9 @@ body {
 
 /* Main Content */
 .content {
-    max-width: 1400px;
+    max-width: 1800px;
     margin: 0 auto;
-    padding: 1rem 1.5rem;
+    padding: 1rem 2rem;
 }
 
 /* Sections - all visible */
@@ -202,7 +202,7 @@ body {
 /* Charts Grid */
 .charts-grid {
     display: grid;
-    gap: 0.75rem;
+    gap: 1.25rem;
 }
 
 .charts-grid.three-col {