update

charts.js

@@ -1,5 +1,5 @@
-// DDR-Bench Interactive Charts
-// Using Plotly.js for interactive visualizations
+// DDR-Bench Interactive Charts with Smooth Animations
+// Using Plotly.js with animate for smooth transitions
 
 // Common Plotly layout settings for dark theme
 const darkLayout = {
@@ -7,362 +7,298 @@ const darkLayout = {
     plot_bgcolor: 'rgba(30, 41, 59, 0)',
     font: {
         family: 'Inter, sans-serif',
-        color: '#e2e8f0'
+        color: '#e2e8f0',
+        size: 11
     },
     xaxis: {
-        gridcolor: 'rgba(148, 163, 184, 0.15)',
-        linecolor: 'rgba(148, 163, 184, 0.3)',
-        tickfont: { color: '#94a3b8' },
-        title: { font: { color: '#e2e8f0' } }
+        gridcolor: 'rgba(148, 163, 184, 0.12)',
+        linecolor: 'rgba(148, 163, 184, 0.2)',
+        tickfont: { color: '#94a3b8', size: 10 },
+        title: { font: { color: '#e2e8f0', size: 11 } }
     },
     yaxis: {
-        gridcolor: 'rgba(148, 163, 184, 0.15)',
-        linecolor: 'rgba(148, 163, 184, 0.3)',
-        tickfont: { color: '#94a3b8' },
-        title: { font: { color: '#e2e8f0' } }
+        gridcolor: 'rgba(148, 163, 184, 0.12)',
+        linecolor: 'rgba(148, 163, 184, 0.2)',
+        tickfont: { color: '#94a3b8', size: 10 },
+        title: { font: { color: '#e2e8f0', size: 11 } }
     },
     legend: {
-        bgcolor: 'rgba(30, 41, 59, 0.8)',
-        bordercolor: 'rgba(148, 163, 184, 0.3)',
+        bgcolor: 'rgba(30, 41, 59, 0.9)',
+        bordercolor: 'rgba(148, 163, 184, 0.2)',
         borderwidth: 1,
-        font: { color: '#e2e8f0' }
+        font: { color: '#e2e8f0', size: 10 },
+        orientation: 'h',
+        y: -0.2,
+        x: 0.5,
+        xanchor: 'center'
     },
     hoverlabel: {
         bgcolor: '#1e293b',
         bordercolor: '#6366f1',
-        font: { color: '#e2e8f0' }
+        font: { color: '#e2e8f0', size: 11 }
     },
-    margin: { t: 40, r: 20, b: 60, l: 70 }
+    margin: { t: 20, r: 15, b: 60, l: 50 }
 };
 
 const plotlyConfig = {
     displayModeBar: true,
     responsive: true,
-    modeBarButtonsToRemove: ['lasso2d', 'select2d'],
+    modeBarButtonsToRemove: ['lasso2d', 'select2d', 'autoScale2d'],
     displaylogo: false
 };
 
+// Animation settings for smooth transitions
+const animationSettings = {
+    transition: {
+        duration: 500,
+        easing: 'cubic-in-out'
+    },
+    frame: {
+        duration: 500
+    }
+};
+
+// Current state
+let currentScalingDim = 'turn';
+let currentProbingMode = 'byTurn';
+
 // Tab Navigation
 document.querySelectorAll('.nav-tab').forEach(tab => {
     tab.addEventListener('click', () => {
-        // Update active tab
         document.querySelectorAll('.nav-tab').forEach(t => t.classList.remove('active'));
         tab.classList.add('active');
 
-        // Show corresponding section
         const sectionId = tab.dataset.section;
         document.querySelectorAll('.section').forEach(s => s.classList.remove('active'));
         document.getElementById(sectionId).classList.add('active');
 
         // Resize plots on tab change
-        window.dispatchEvent(new Event('resize'));
+        setTimeout(() => window.dispatchEvent(new Event('resize')), 100);
     });
 });
 
 // ============================================================================
-// SCALING ANALYSIS CHART
+// SCALING ANALYSIS - 3 Charts with animated dimension switching
 // ============================================================================
-function renderScalingChart() {
-    const dataset = document.getElementById('scaling-dataset').value;
-    const dimension = document.getElementById('scaling-dimension').value;
-
-    const data = DDR_DATA.scaling[dataset];
-    if (!data) return;
-
-    const traces = [];
-    const models = Object.keys(data);
-
-    models.forEach(model => {
-        const modelData = data[model];
-        let xValues, xLabel;
-
-        switch (dimension) {
-            case 'turn':
-                xValues = modelData.turns;
-                xLabel = 'Number of Interaction Turns';
-                break;
-            case 'token':
-                xValues = modelData.tokens;
-                xLabel = 'Total Tokens Used';
-                break;
-            case 'cost':
-                xValues = modelData.costs;
-                xLabel = 'Inference Cost ($)';
-                break;
-        }
+function initScalingCharts() {
+    const scenarios = ['mimic', '10k', 'globem'];
 
-        traces.push({
-            x: xValues,
-            y: modelData.accuracy,
-            mode: 'lines+markers',
-            name: model,
-            line: {
-                color: DDR_DATA.modelColors[model] || '#888',
-                width: 2.5
-            },
-            marker: {
-                size: 6,
-                color: DDR_DATA.modelColors[model] || '#888'
-            },
-            hovertemplate: `<b>${model}</b><br>` +
-                `${dimension === 'cost' ? 'Cost: $' : dimension === 'token' ? 'Tokens: ' : 'Turn: '}%{x}<br>` +
-                `Accuracy: %{y:.1f}%<extra></extra>`
+    scenarios.forEach(scenario => {
+        const data = DDR_DATA.scaling[scenario];
+        if (!data) return;
+
+        const traces = [];
+        const models = Object.keys(data);
+
+        models.forEach(model => {
+            const modelData = data[model];
+
+            traces.push({
+                x: modelData.turns,
+                y: modelData.accuracy,
+                mode: 'lines+markers',
+                name: model,
+                line: {
+                    color: DDR_DATA.modelColors[model] || '#888',
+                    width: 2
+                },
+                marker: {
+                    size: 5,
+                    color: DDR_DATA.modelColors[model] || '#888'
+                },
+                hovertemplate: `<b>${model}</b><br>Turn: %{x}<br>Accuracy: %{y:.1f}%<extra></extra>`
+            });
         });
-    });
 
-    const layout = {
-        ...darkLayout,
-        title: {
-            text: `${dataset.toUpperCase()} - ${dimension.charAt(0).toUpperCase() + dimension.slice(1)} Scaling`,
-            font: { size: 18, color: '#f1f5f9' }
-        },
-        xaxis: {
-            ...darkLayout.xaxis,
-            title: {
-                text: dimension === 'turn' ? 'Number of Interaction Turns' :
-                    dimension === 'token' ? 'Total Tokens Used' : 'Inference Cost ($)',
-                font: { size: 14, color: '#e2e8f0' }
+        const layout = {
+            ...darkLayout,
+            xaxis: {
+                ...darkLayout.xaxis,
+                title: { text: 'Interaction Turns', font: { size: 11, color: '#e2e8f0' } }
             },
-            type: dimension === 'cost' ? 'log' : 'linear'
-        },
-        yaxis: {
-            ...darkLayout.yaxis,
-            title: { text: 'Accuracy (%)', font: { size: 14, color: '#e2e8f0' } }
-        },
-        showlegend: true,
-        legend: {
-            ...darkLayout.legend,
-            orientation: 'h',
-            y: -0.2,
-            x: 0.5,
-            xanchor: 'center'
-        }
-    };
+            yaxis: {
+                ...darkLayout.yaxis,
+                title: { text: 'Accuracy (%)', font: { size: 11, color: '#e2e8f0' } }
+            },
+            showlegend: true
+        };
 
-    Plotly.newPlot('scaling-chart', traces, layout, plotlyConfig);
+        Plotly.newPlot(`scaling-${scenario}`, traces, layout, plotlyConfig);
+    });
 }
 
-// Event listeners for scaling controls
-document.getElementById('scaling-dataset').addEventListener('change', renderScalingChart);
-document.getElementById('scaling-dimension').addEventListener('change', renderScalingChart);
-
-// ============================================================================
-// ENTROPY ANALYSIS CHART
-// ============================================================================
-function renderEntropyChart() {
-    const dataset = document.getElementById('entropy-dataset').value;
-    const data = DDR_DATA.entropy[dataset];
-    if (!data) return;
+function updateScalingCharts(dimension) {
+    const scenarios = ['mimic', '10k', 'globem'];
+    const xLabels = {
+        'turn': 'Interaction Turns',
+        'token': 'Token Usage',
+        'cost': 'Inference Cost ($)'
+    };
 
-    const traces = [];
-    const models = Object.keys(data);
+    scenarios.forEach(scenario => {
+        const data = DDR_DATA.scaling[scenario];
+        if (!data) return;
 
-    models.forEach(model => {
-        const modelData = data[model];
+        const models = Object.keys(data);
+        const newX = [];
+        const newY = [];
 
-        // Normalize accuracy for marker size (10-30 range)
-        const sizes = modelData.accuracy.map(a => 8 + (a / Math.max(...modelData.accuracy)) * 15);
+        models.forEach(model => {
+            const modelData = data[model];
+            let xValues;
+
+            switch (dimension) {
+                case 'turn':
+                    xValues = modelData.turns;
+                    break;
+                case 'token':
+                    xValues = modelData.tokens;
+                    break;
+                case 'cost':
+                    xValues = modelData.costs;
+                    break;
+            }
 
-        // Normalize accuracy for opacity (0.4-1.0 range)
-        const maxAcc = Math.max(...modelData.accuracy);
-        const minAcc = Math.min(...modelData.accuracy);
-        const opacities = modelData.accuracy.map(a => 0.4 + 0.6 * (a - minAcc) / (maxAcc - minAcc || 1));
+            newX.push(xValues);
+            newY.push(modelData.accuracy);
+        });
 
-        traces.push({
-            x: modelData.entropy,
-            y: modelData.coverage,
-            mode: 'markers',
-            name: model,
-            marker: {
-                size: sizes,
-                color: DDR_DATA.modelColors[model] || '#888',
-                opacity: opacities,
-                line: {
-                    color: '#000',
-                    width: 0.5
+        // Animate the transition
+        Plotly.animate(`scaling-${scenario}`, {
+            data: newX.map((x, i) => ({ x, y: newY[i] })),
+            traces: models.map((_, i) => i),
+            layout: {
+                xaxis: {
+                    title: { text: xLabels[dimension], font: { size: 11, color: '#e2e8f0' } },
+                    type: dimension === 'cost' ? 'log' : 'linear'
                 }
-            },
-            text: modelData.accuracy.map(a => `Accuracy: ${a}%`),
-            hovertemplate: `<b>${model}</b><br>` +
-                `Entropy: %{x:.2f}<br>` +
-                `Coverage: %{y:.2f}<br>` +
-                `%{text}<extra></extra>`
-        });
-    });
+            }
+        }, animationSettings);
 
-    const layout = {
-        ...darkLayout,
-        title: {
-            text: `${dataset.toUpperCase()} - Entropy vs Coverage (Marker Size/Opacity = Accuracy)`,
-            font: { size: 18, color: '#f1f5f9' }
-        },
-        xaxis: {
-            ...darkLayout.xaxis,
-            title: { text: 'Normalized Access Entropy', font: { size: 14, color: '#e2e8f0' } },
-            range: [0.6, 1.0]
-        },
-        yaxis: {
-            ...darkLayout.yaxis,
-            title: { text: 'Coverage', font: { size: 14, color: '#e2e8f0' } }
-        },
-        showlegend: true,
-        legend: {
-            ...darkLayout.legend,
-            orientation: 'h',
-            y: -0.2,
-            x: 0.5,
-            xanchor: 'center'
-        }
-    };
+        // Update hover templates
+        const hoverLabels = {
+            'turn': 'Turn',
+            'token': 'Tokens',
+            'cost': 'Cost: $'
+        };
 
-    Plotly.newPlot('entropy-chart', traces, layout, plotlyConfig);
+        models.forEach((model, i) => {
+            Plotly.restyle(`scaling-${scenario}`, {
+                hovertemplate: `<b>${model}</b><br>${hoverLabels[dimension]}: %{x}<br>Accuracy: %{y:.1f}%<extra></extra>`
+            }, [i]);
+        });
+    });
 }
 
-document.getElementById('entropy-dataset').addEventListener('change', renderEntropyChart);
+// Dimension toggle event listeners
+document.querySelectorAll('.dim-btn:not(.probing-dim)').forEach(btn => {
+    btn.addEventListener('click', () => {
+        document.querySelectorAll('.dim-btn:not(.probing-dim)').forEach(b => b.classList.remove('active'));
+        btn.classList.add('active');
+
+        const dimension = btn.dataset.dim;
+        currentScalingDim = dimension;
+        updateScalingCharts(dimension);
+    });
+});
 
 // ============================================================================
-// RANKING COMPARISON CHART
+// RANKING COMPARISON - 3 Charts
 // ============================================================================
-function renderRankingChart() {
-    const dataset = document.getElementById('ranking-dataset').value;
-    const data = DDR_DATA.ranking[dataset];
-    if (!data) return;
-
-    // Take top 22 models
-    const models = data.slice(0, 22);
+function initRankingCharts() {
+    const scenarios = [
+        { key: 'MIMIC', id: 'mimic' },
+        { key: '10K', id: '10k' },
+        { key: 'GLOBEM', id: 'globem' }
+    ];
+
+    scenarios.forEach(({ key, id }) => {
+        const data = DDR_DATA.ranking[key];
+        if (!data) return;
+
+        const models = data.slice(0, 15); // Top 15 models
+        const traces = [];
+
+        // Connection lines
+        models.forEach((m, i) => {
+            traces.push({
+                x: [m.bt_rank, m.acc_rank],
+                y: [i, i],
+                mode: 'lines',
+                line: {
+                    color: 'rgba(148, 163, 184, 0.25)',
+                    width: 1,
+                    dash: 'dash'
+                },
+                showlegend: false,
+                hoverinfo: 'skip'
+            });
+        });
 
-    // Create traces for novelty rank (circles) and accuracy rank (diamonds)
-    const traces = [];
+        // Novelty rank points
+        traces.push({
+            x: models.map(m => m.bt_rank),
+            y: models.map((_, i) => i),
+            mode: 'markers',
+            name: 'Novelty',
+            marker: {
+                size: 10,
+                symbol: 'circle',
+                color: models.map(m => m.is_proprietary ? '#8B5CF6' : '#22C55E'),
+                line: { color: '#000', width: 0.5 }
+            },
+            text: models.map(m => `${m.model}<br>Novelty: #${m.bt_rank}<br>Win: ${m.win_rate}%`),
+            hovertemplate: '%{text}<extra></extra>'
+        });
 
-    // Connection lines
-    models.forEach((m, i) => {
+        // Accuracy rank points
         traces.push({
-            x: [m.bt_rank, m.acc_rank],
-            y: [i, i],
-            mode: 'lines',
-            line: {
-                color: 'rgba(148, 163, 184, 0.3)',
-                width: 1,
-                dash: 'dash'
+            x: models.map(m => m.acc_rank),
+            y: models.map((_, i) => i),
+            mode: 'markers',
+            name: 'Accuracy',
+            marker: {
+                size: 12,
+                symbol: 'diamond-open',
+                color: models.map(m => m.is_proprietary ? '#8B5CF6' : '#22C55E'),
+                line: { width: 2 }
             },
-            showlegend: false,
-            hoverinfo: 'skip'
+            text: models.map(m => `${m.model}<br>Accuracy: #${m.acc_rank}<br>${m.accuracy}%`),
+            hovertemplate: '%{text}<extra></extra>'
         });
-    });
 
-    // Novelty rank points (circles)
-    traces.push({
-        x: models.map(m => m.bt_rank),
-        y: models.map((m, i) => i),
-        mode: 'markers',
-        name: 'Novelty Rank',
-        marker: {
-            size: 12,
-            symbol: 'circle',
-            color: models.map(m => m.is_proprietary ? '#6A0DAD' : '#228B22'),
-            line: { color: '#000', width: 1 }
-        },
-        text: models.map(m => `${m.model}<br>Novelty Rank: ${m.bt_rank}<br>Win Rate: ${m.win_rate}%`),
-        hovertemplate: '%{text}<extra></extra>'
-    });
+        const layout = {
+            ...darkLayout,
+            xaxis: {
+                ...darkLayout.xaxis,
+                title: { text: 'Rank', font: { size: 11, color: '#e2e8f0' } },
+                range: [Math.max(...models.map(m => Math.max(m.bt_rank, m.acc_rank))) + 1, 0],
+                dtick: 2
+            },
+            yaxis: {
+                ...darkLayout.yaxis,
+                tickmode: 'array',
+                tickvals: models.map((_, i) => i),
+                ticktext: models.map(m => m.model.substring(0, 15)),
+                automargin: true
+            },
+            showlegend: true,
+            legend: {
+                ...darkLayout.legend,
+                y: -0.12
+            },
+            margin: { ...darkLayout.margin, l: 120 }
+        };
 
-    // Accuracy rank points (diamonds)
-    traces.push({
-        x: models.map(m => m.acc_rank),
-        y: models.map((m, i) => i),
-        mode: 'markers',
-        name: 'Accuracy Rank',
-        marker: {
-            size: 14,
-            symbol: 'diamond-open',
-            color: models.map(m => m.is_proprietary ? '#6A0DAD' : '#228B22'),
-            line: { width: 2 }
-        },
-        text: models.map(m => `${m.model}<br>Accuracy Rank: ${m.acc_rank}<br>Accuracy: ${m.accuracy}%`),
-        hovertemplate: '%{text}<extra></extra>'
+        Plotly.newPlot(`ranking-${id}`, traces, layout, plotlyConfig);
     });
-
-    // Calculate correlation
-    const btRanks = models.map(m => m.bt_rank);
-    const accRanks = models.map(m => m.acc_rank);
-    const correlation = calculateCorrelation(btRanks, accRanks);
-
-    const layout = {
-        ...darkLayout,
-        title: {
-            text: `${dataset} - Novelty vs Accuracy Ranking (ρ = ${correlation.toFixed(2)})`,
-            font: { size: 18, color: '#f1f5f9' }
-        },
-        xaxis: {
-            ...darkLayout.xaxis,
-            title: { text: 'Rank', font: { size: 14, color: '#e2e8f0' } },
-            range: [23, 0],
-            tickmode: 'linear',
-            dtick: 2
-        },
-        yaxis: {
-            ...darkLayout.yaxis,
-            tickmode: 'array',
-            tickvals: models.map((_, i) => i),
-            ticktext: models.map(m => m.model.replace(/-/g, ' ')),
-            automargin: true
-        },
-        showlegend: true,
-        legend: {
-            ...darkLayout.legend,
-            orientation: 'h',
-            y: -0.15,
-            x: 0.5,
-            xanchor: 'center'
-        },
-        annotations: [
-            {
-                x: 0.02,
-                y: 0.98,
-                xref: 'paper',
-                yref: 'paper',
-                text: '🟣 Proprietary  🟢 Open-Source',
-                showarrow: false,
-                font: { size: 12, color: '#94a3b8' },
-                bgcolor: 'rgba(30, 41, 59, 0.8)',
-                borderpad: 5
-            }
-        ],
-        margin: { ...darkLayout.margin, l: 180 }
-    };
-
-    Plotly.newPlot('ranking-chart', traces, layout, plotlyConfig);
 }
 
-function calculateCorrelation(x, y) {
-    const n = x.length;
-    const sumX = x.reduce((a, b) => a + b, 0);
-    const sumY = y.reduce((a, b) => a + b, 0);
-    const sumXY = x.reduce((acc, xi, i) => acc + xi * y[i], 0);
-    const sumX2 = x.reduce((acc, xi) => acc + xi * xi, 0);
-    const sumY2 = y.reduce((acc, yi) => acc + yi * yi, 0);
-
-    const numerator = n * sumXY - sumX * sumY;
-    const denominator = Math.sqrt((n * sumX2 - sumX * sumX) * (n * sumY2 - sumY * sumY));
-
-    return denominator !== 0 ? numerator / denominator : 0;
-}
-
-document.getElementById('ranking-dataset').addEventListener('change', renderRankingChart);
-
 // ============================================================================
-// TURN DISTRIBUTION CHART (Ridgeline-like)
+// TURN DISTRIBUTION - 3 Charts (Box plots)
 // ============================================================================
-function renderTurnChart() {
-    const dataset = document.getElementById('turn-dataset').value;
-    const data = DDR_DATA.turn[dataset];
-    if (!data) return;
-
-    // Sort by median (descending)
-    const sortedData = [...data].sort((a, b) => b.median - a.median);
-
-    const traces = [];
-    const binLabels = ['0-10', '10-20', '20-30', '30-40', '40-50', '50-60', '60-70', '70-80', '80-90', '90-100'];
+function initTurnCharts() {
+    const scenarios = ['mimic', '10k', 'globem'];
 
     // Family colors
     const familyColors = {
@@ -384,116 +320,73 @@ function renderTurnChart() {
         return '#888';
     }
 
-    sortedData.forEach((model, i) => {
-        const color = getModelColor(model.model);
+    scenarios.forEach(scenario => {
+        const data = DDR_DATA.turn[scenario];
+        if (!data) return;
 
-        traces.push({
-            x: model.distribution,
-            y: binLabels,
-            orientation: 'h',
-            name: `${model.model} (med=${model.median})`,
-            type: 'bar',
-            marker: {
-                color: color,
-                opacity: 0.7
-            },
-            xaxis: `x${i + 1}`,
-            yaxis: 'y',
-            hovertemplate: `<b>${model.model}</b><br>` +
-                `Turns: %{y}<br>` +
-                `Sessions: %{x}%<extra></extra>`
-        });
-    });
+        const sortedData = [...data].sort((a, b) => a.median - b.median);
 
-    // Create subplot annotations
-    const annotations = sortedData.map((model, i) => ({
-        x: 0.5,
-        y: i,
-        xref: 'paper',
-        yref: 'paper',
-        text: `<b>${model.model}</b> (median: ${model.median})`,
-        showarrow: false,
-        font: { size: 11, color: '#e2e8f0' },
-        xanchor: 'center'
-    }));
-
-    // Use a violin-like grouped bar approach instead
-    const violinTraces = sortedData.map((model, i) => {
-        const color = getModelColor(model.model);
-        const cumsum = model.distribution.reduce((acc, v, idx) => {
-            acc.push((acc[idx - 1] || 0) + v);
-            return acc;
-        }, []);
-
-        // Create x values from 0 to 100
-        const xVals = Array.from({ length: 100 }, (_, k) => k);
-        const yVals = xVals.map(x => {
-            const binIdx = Math.min(Math.floor(x / 10), 9);
-            return model.distribution[binIdx] / 10; // Scale down
+        const traces = sortedData.map((model, i) => {
+            const color = getModelColor(model.model);
+
+            return {
+                y: [model.model],
+                x: [model.median],
+                type: 'bar',
+                orientation: 'h',
+                name: model.model,
+                marker: {
+                    color: color,
+                    opacity: 0.8
+                },
+                text: [`${model.median}`],
+                textposition: 'outside',
+                textfont: { size: 9, color: '#94a3b8' },
+                hovertemplate: `<b>${model.model}</b><br>Median: ${model.median} turns<extra></extra>`,
+                showlegend: false
+            };
         });
 
-        return {
-            x: xVals,
-            y: yVals.map(v => v + i * 12), // Stack vertically
-            fill: 'tozeroy',
-            fillcolor: color + '80',
-            line: { color: color, width: 1.5 },
-            name: `${model.model} (med=${model.median})`,
-            mode: 'lines',
-            hovertemplate: `<b>${model.model}</b><br>` +
-                `Median: ${model.median} turns<extra></extra>`
+        const layout = {
+            ...darkLayout,
+            barmode: 'group',
+            xaxis: {
+                ...darkLayout.xaxis,
+                title: { text: 'Median Turns', font: { size: 11, color: '#e2e8f0' } },
+                range: [0, Math.max(...sortedData.map(d => d.median)) * 1.15]
+            },
+            yaxis: {
+                ...darkLayout.yaxis,
+                automargin: true,
+                tickfont: { size: 9 }
+            },
+            margin: { ...darkLayout.margin, l: 130 }
         };
-    });
-
-    const layout = {
-        ...darkLayout,
-        title: {
-            text: `${dataset.toUpperCase()} - Turn Count Distribution`,
-            font: { size: 18, color: '#f1f5f9' }
-        },
-        xaxis: {
-            ...darkLayout.xaxis,
-            title: { text: 'Number of Turns', font: { size: 14, color: '#e2e8f0' } },
-            range: [0, 100]
-        },
-        yaxis: {
-            ...darkLayout.yaxis,
-            title: { text: '', font: { size: 14, color: '#e2e8f0' } },
-            tickmode: 'array',
-            tickvals: sortedData.map((_, i) => i * 12 + 3),
-            ticktext: sortedData.map(m => `${m.model} (${m.median})`),
-            showgrid: false
-        },
-        showlegend: false,
-        height: 700,
-        margin: { ...darkLayout.margin, l: 200 }
-    };
 
-    Plotly.newPlot('turn-chart', violinTraces, layout, plotlyConfig);
+        Plotly.newPlot(`turn-${scenario}`, traces, layout, plotlyConfig);
+    });
 }
 
-document.getElementById('turn-dataset').addEventListener('change', renderTurnChart);
-
 // ============================================================================
-// PROBING RESULTS CHART
+// PROBING RESULTS - 3 Charts with animated mode switching
 // ============================================================================
-function renderProbingChart() {
-    const mode = document.getElementById('probing-mode').value;
-    const scenarios = ['mimic', 'globem', '10k'];
-    const scenarioTitles = { mimic: 'MIMIC', globem: 'GLOBEM', '10k': '10-K' };
+function initProbingCharts() {
+    renderProbingCharts('byTurn');
+}
 
-    const data = DDR_DATA.probing[mode];
-    if (!data) return;
+function renderProbingCharts(mode) {
+    const scenarios = ['mimic', 'globem', '10k'];
+    const scenarioIds = { 'mimic': 'mimic', 'globem': 'globem', '10k': '10k' };
 
-    const traces = [];
-    const models = Object.keys(data.mimic);
+    scenarios.forEach(scenario => {
+        const data = DDR_DATA.probing[mode]?.[scenario];
+        if (!data) return;
 
-    // Create subplots for each scenario
-    scenarios.forEach((scenario, scIdx) => {
-        const scenarioData = data[scenario];
+        const traces = [];
+        const models = Object.keys(data);
 
         models.forEach(model => {
-            const modelData = scenarioData[model];
+            const modelData = data[model];
             const xKey = mode === 'byTurn' ? 'turns' : 'progress';
             const xLabel = mode === 'byTurn' ? 'Turn' : 'Progress (%)';
 
@@ -503,111 +396,94 @@ function renderProbingChart() {
                 y: modelData.logprob,
                 mode: 'lines+markers',
                 name: model,
-                legendgroup: model,
-                showlegend: scIdx === 0,
                 line: {
-                    color: DDR_DATA.probingColors[model],
+                    color: DDR_DATA.probingColors[model] || '#888',
                     width: 2
                 },
                 marker: {
-                    size: 5,
-                    color: DDR_DATA.probingColors[model]
+                    size: 4,
+                    color: DDR_DATA.probingColors[model] || '#888'
                 },
-                xaxis: `x${scIdx + 1}`,
-                yaxis: `y${scIdx + 1}`,
-                hovertemplate: `<b>${model}</b><br>` +
-                    `${xLabel}: %{x}<br>` +
-                    `Log Prob: %{y:.2f}<extra></extra>`
+                hovertemplate: `<b>${model}</b><br>${xLabel}: %{x}<br>Log Prob: %{y:.2f}<extra></extra>`
             });
 
-            // Error band (SEM)
-            const upper = modelData.logprob.map((v, i) => v + modelData.sem[i]);
-            const lower = modelData.logprob.map((v, i) => v - modelData.sem[i]);
-
-            traces.push({
-                x: [...modelData[xKey], ...modelData[xKey].slice().reverse()],
-                y: [...upper, ...lower.slice().reverse()],
-                fill: 'toself',
-                fillcolor: DDR_DATA.probingColors[model] + '30',
-                line: { width: 0 },
-                showlegend: false,
-                legendgroup: model,
-                xaxis: `x${scIdx + 1}`,
-                yaxis: `y${scIdx + 1}`,
-                hoverinfo: 'skip'
-            });
+            // Error band
+            if (modelData.sem) {
+                const upper = modelData.logprob.map((v, i) => v + modelData.sem[i]);
+                const lower = modelData.logprob.map((v, i) => v - modelData.sem[i]);
+
+                traces.push({
+                    x: [...modelData[xKey], ...modelData[xKey].slice().reverse()],
+                    y: [...upper, ...lower.slice().reverse()],
+                    fill: 'toself',
+                    fillcolor: (DDR_DATA.probingColors[model] || '#888') + '25',
+                    line: { width: 0 },
+                    showlegend: false,
+                    hoverinfo: 'skip'
+                });
+            }
         });
-    });
 
-    const layout = {
-        paper_bgcolor: 'rgba(30, 41, 59, 0)',
-        plot_bgcolor: 'rgba(30, 41, 59, 0)',
-        font: { family: 'Inter, sans-serif', color: '#e2e8f0' },
-        title: {
-            text: `FINISH Token Avg Log Probability ${mode === 'byTurn' ? 'by Turn' : 'by Progress'}`,
-            font: { size: 18, color: '#f1f5f9' }
-        },
-        grid: { rows: 1, columns: 3, pattern: 'independent' },
-        annotations: scenarios.map((sc, i) => ({
-            text: scenarioTitles[sc],
-            font: { size: 14, color: '#e2e8f0' },
-            showarrow: false,
-            x: (i + 0.5) / 3,
-            y: 1.08,
-            xref: 'paper',
-            yref: 'paper'
-        })),
-        showlegend: true,
-        legend: {
-            orientation: 'h',
-            y: -0.15,
-            x: 0.5,
-            xanchor: 'center',
-            bgcolor: 'rgba(30, 41, 59, 0.8)',
-            font: { color: '#e2e8f0' }
-        },
-        margin: { t: 80, r: 20, b: 100, l: 60 }
-    };
-
-    // Add axis configs for each subplot
-    scenarios.forEach((sc, i) => {
-        const xKey = `xaxis${i === 0 ? '' : i + 1}`;
-        const yKey = `yaxis${i === 0 ? '' : i + 1}`;
-
-        layout[xKey] = {
-            title: { text: mode === 'byTurn' ? 'Turn' : 'Progress (%)', font: { size: 12 } },
-            gridcolor: 'rgba(148, 163, 184, 0.15)',
-            tickfont: { color: '#94a3b8' },
-            domain: [i / 3 + 0.02, (i + 1) / 3 - 0.02]
-        };
-        layout[yKey] = {
-            title: i === 0 ? { text: 'Avg Log Probability', font: { size: 12 } } : {},
-            gridcolor: 'rgba(148, 163, 184, 0.15)',
-            tickfont: { color: '#94a3b8' }
+        const layout = {
+            ...darkLayout,
+            xaxis: {
+                ...darkLayout.xaxis,
+                title: { text: mode === 'byTurn' ? 'Turn' : 'Progress (%)', font: { size: 11, color: '#e2e8f0' } }
+            },
+            yaxis: {
+                ...darkLayout.yaxis,
+                title: { text: 'Avg Log Probability', font: { size: 11, color: '#e2e8f0' } }
+            },
+            showlegend: true
         };
-    });
 
-    Plotly.newPlot('probing-chart', traces, layout, plotlyConfig);
+        Plotly.newPlot(`probing-${scenarioIds[scenario]}`, traces, layout, plotlyConfig);
+    });
 }
 
-document.getElementById('probing-mode').addEventListener('change', renderProbingChart);
+// Probing dimension toggle
+document.querySelectorAll('.probing-dim').forEach(btn => {
+    btn.addEventListener('click', () => {
+        document.querySelectorAll('.probing-dim').forEach(b => b.classList.remove('active'));
+        btn.classList.add('active');
+
+        const mode = btn.dataset.mode;
+        currentProbingMode = mode;
+
+        // Add updating class for visual feedback
+        ['mimic', 'globem', '10k'].forEach(s => {
+            document.getElementById(`probing-${s}`).classList.add('chart-updating');
+        });
+
+        setTimeout(() => {
+            renderProbingCharts(mode);
+            ['mimic', 'globem', '10k'].forEach(s => {
+                document.getElementById(`probing-${s}`).classList.remove('chart-updating');
+            });
+        }, 150);
+    });
+});
 
 // ============================================================================
 // INITIALIZE ALL CHARTS
 // ============================================================================
 document.addEventListener('DOMContentLoaded', () => {
-    renderScalingChart();
-    renderEntropyChart();
-    renderRankingChart();
-    renderTurnChart();
-    renderProbingChart();
+    initScalingCharts();
+    initRankingCharts();
+    initTurnCharts();
+    initProbingCharts();
 });
 
 // Handle window resize
+let resizeTimeout;
 window.addEventListener('resize', () => {
-    Plotly.Plots.resize('scaling-chart');
-    Plotly.Plots.resize('entropy-chart');
-    Plotly.Plots.resize('ranking-chart');
-    Plotly.Plots.resize('turn-chart');
-    Plotly.Plots.resize('probing-chart');
+    clearTimeout(resizeTimeout);
+    resizeTimeout = setTimeout(() => {
+        ['mimic', '10k', 'globem'].forEach(s => {
+            Plotly.Plots.resize(`scaling-${s}`);
+            Plotly.Plots.resize(`ranking-${s}`);
+            Plotly.Plots.resize(`turn-${s}`);
+            Plotly.Plots.resize(`probing-${s}`);
+        });
+    }, 100);
 });

index.html

@@ -1,5 +1,6 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -11,6 +12,7 @@
     <script src="https://cdn.plot.ly/plotly-2.27.0.min.js"></script>
     <link rel="stylesheet" href="styles.css">
 </head>
+
 <body>
     <!-- Hero Section -->
     <header class="hero">
@@ -19,7 +21,8 @@
             <h1>DDR-Bench</h1>
             <p class="subtitle">Deep Data Research Agent Benchmark for Large Language Models</p>
             <p class="description">
-                A comprehensive evaluation framework measuring AI agents' ability to conduct deep, iterative data exploration across medical records (MIMIC), financial filings (10-K), and behavioral data (GLOBEM).
+                A comprehensive evaluation framework measuring AI agents' ability to conduct deep, iterative data
+                exploration across medical records (MIMIC), financial filings (10-K), and behavioral data (GLOBEM).
             </p>
             <div class="stats-row">
                 <div class="stat-item">
@@ -41,7 +44,6 @@
     <!-- Navigation -->
     <nav class="nav-tabs">
         <button class="nav-tab active" data-section="scaling">📈 Scaling Analysis</button>
-        <button class="nav-tab" data-section="entropy">🔀 Entropy Analysis</button>
         <button class="nav-tab" data-section="ranking">🏆 Ranking Comparison</button>
         <button class="nav-tab" data-section="turn">🔄 Turn Distribution</button>
         <button class="nav-tab" data-section="probing">🔍 Probing Results</button>
@@ -49,88 +51,77 @@
 
     <!-- Main Content -->
     <main class="content">
-        <!-- Scaling Analysis Section -->
+        <!-- Scaling Analysis Section - 3 charts side by side -->
         <section id="scaling" class="section active">
             <div class="section-header">
                 <h2>Scaling Analysis</h2>
-                <p>Explore how model performance scales with interaction turns, token usage, and inference cost across datasets.</p>
-            </div>
-            <div class="controls">
-                <label>
-                    <span>Dataset:</span>
-                    <select id="scaling-dataset">
-                        <option value="mimic">MIMIC</option>
-                        <option value="10k">10-K</option>
-                        <option value="globem">GLOBEM</option>
-                    </select>
-                </label>
-                <label>
-                    <span>Scaling Dimension:</span>
-                    <select id="scaling-dimension">
-                        <option value="turn">Interaction Turns</option>
-                        <option value="token">Token Usage</option>
-                        <option value="cost">Inference Cost</option>
-                    </select>
-                </label>
+                <p>Explore how model performance scales with interaction turns, token usage, and inference cost across
+                    all datasets.</p>
             </div>
-            <div id="scaling-chart" class="chart-container"></div>
-        </section>
-
-        <!-- Entropy Analysis Section -->
-        <section id="entropy" class="section">
-            <div class="section-header">
-                <h2>Entropy vs Coverage Analysis</h2>
-                <p>Visualize the relationship between access entropy (exploration uniformity) and field coverage for each model.</p>
+            <div class="dimension-toggle">
+                <button class="dim-btn active" data-dim="turn">🔄 Interaction Turns</button>
+                <button class="dim-btn" data-dim="token">📊 Token Usage</button>
+                <button class="dim-btn" data-dim="cost">💰 Inference Cost</button>
             </div>
-            <div class="controls">
-                <label>
-                    <span>Dataset:</span>
-                    <select id="entropy-dataset">
-                        <option value="mimic">MIMIC</option>
-                        <option value="10k">10-K</option>
-                        <option value="globem">GLOBEM</option>
-                    </select>
-                </label>
+            <div class="charts-grid three-col">
+                <div class="chart-card">
+                    <h3>MIMIC</h3>
+                    <div id="scaling-mimic" class="chart-container-sm"></div>
+                </div>
+                <div class="chart-card">
+                    <h3>10-K</h3>
+                    <div id="scaling-10k" class="chart-container-sm"></div>
+                </div>
+                <div class="chart-card">
+                    <h3>GLOBEM</h3>
+                    <div id="scaling-globem" class="chart-container-sm"></div>
+                </div>
             </div>
-            <div id="entropy-chart" class="chart-container"></div>
         </section>
 
-        <!-- Ranking Comparison Section -->
+        <!-- Ranking Comparison Section - 3 charts -->
         <section id="ranking" class="section">
             <div class="section-header">
                 <h2>Novelty vs Accuracy Ranking</h2>
-                <p>Compare model rankings based on novelty (Bradley-Terry pairwise ranking) against traditional accuracy ranking.</p>
+                <p>Compare model rankings based on Bradley-Terry pairwise ranking against traditional accuracy ranking.
+                </p>
             </div>
-            <div class="controls">
-                <label>
-                    <span>Dataset:</span>
-                    <select id="ranking-dataset">
-                        <option value="MIMIC">MIMIC</option>
-                        <option value="10K">10-K</option>
-                        <option value="GLOBEM">GLOBEM</option>
-                    </select>
-                </label>
+            <div class="charts-grid three-col">
+                <div class="chart-card">
+                    <h3>MIMIC</h3>
+                    <div id="ranking-mimic" class="chart-container-tall"></div>
+                </div>
+                <div class="chart-card">
+                    <h3>10-K</h3>
+                    <div id="ranking-10k" class="chart-container-tall"></div>
+                </div>
+                <div class="chart-card">
+                    <h3>GLOBEM</h3>
+                    <div id="ranking-globem" class="chart-container-tall"></div>
+                </div>
             </div>
-            <div id="ranking-chart" class="chart-container"></div>
         </section>
 
-        <!-- Turn Distribution Section -->
+        <!-- Turn Distribution Section - 3 charts -->
         <section id="turn" class="section">
             <div class="section-header">
                 <h2>Turn Count Distribution</h2>
                 <p>Analyze the distribution of interaction turns across different models and datasets.</p>
             </div>
-            <div class="controls">
-                <label>
-                    <span>Dataset:</span>
-                    <select id="turn-dataset">
-                        <option value="mimic">MIMIC</option>
-                        <option value="10k">10-K</option>
-                        <option value="globem">GLOBEM</option>
-                    </select>
-                </label>
+            <div class="charts-grid three-col">
+                <div class="chart-card">
+                    <h3>MIMIC</h3>
+                    <div id="turn-mimic" class="chart-container-tall"></div>
+                </div>
+                <div class="chart-card">
+                    <h3>10-K</h3>
+                    <div id="turn-10k" class="chart-container-tall"></div>
+                </div>
+                <div class="chart-card">
+                    <h3>GLOBEM</h3>
+                    <div id="turn-globem" class="chart-container-tall"></div>
+                </div>
             </div>
-            <div id="turn-chart" class="chart-container tall"></div>
         </section>
 
         <!-- Probing Results Section -->
@@ -139,16 +130,24 @@
                 <h2>FINISH Token Probing</h2>
                 <p>Analyze the average log probability of FINISH messages across conversation turns and progress.</p>
             </div>
-            <div class="controls">
-                <label>
-                    <span>View Mode:</span>
-                    <select id="probing-mode">
-                        <option value="byTurn">By Turn</option>
-                        <option value="byProgress">By Progress (%)</option>
-                    </select>
-                </label>
+            <div class="dimension-toggle">
+                <button class="dim-btn probing-dim active" data-mode="byTurn">📊 By Turn</button>
+                <button class="dim-btn probing-dim" data-mode="byProgress">📈 By Progress (%)</button>
+            </div>
+            <div class="charts-grid three-col">
+                <div class="chart-card">
+                    <h3>MIMIC</h3>
+                    <div id="probing-mimic" class="chart-container-sm"></div>
+                </div>
+                <div class="chart-card">
+                    <h3>GLOBEM</h3>
+                    <div id="probing-globem" class="chart-container-sm"></div>
+                </div>
+                <div class="chart-card">
+                    <h3>10-K</h3>
+                    <div id="probing-10k" class="chart-container-sm"></div>
+                </div>
             </div>
-            <div id="probing-chart" class="chart-container"></div>
         </section>
     </main>
 
@@ -160,4 +159,5 @@
     <script src="data.js"></script>
     <script src="charts.js"></script>
 </body>
-</html>
+
+</html>

styles.css

@@ -19,7 +19,9 @@
 }
 
 /* Reset & Base */
-*, *::before, *::after {
+*,
+*::before,
+*::after {
     box-sizing: border-box;
     margin: 0;
     padding: 0;
@@ -40,7 +42,7 @@ body {
 /* Hero Section */
 .hero {
     background: var(--gradient-hero);
-    padding: 4rem 2rem 3rem;
+    padding: 3rem 2rem 2rem;
     text-align: center;
     position: relative;
     overflow: hidden;
@@ -53,7 +55,7 @@ body {
     left: 0;
     right: 0;
     bottom: 0;
-    background: 
+    background:
         radial-gradient(circle at 20% 50%, rgba(99, 102, 241, 0.15) 0%, transparent 50%),
         radial-gradient(circle at 80% 50%, rgba(139, 92, 246, 0.1) 0%, transparent 50%);
     pointer-events: none;
@@ -70,45 +72,45 @@ body {
     display: inline-block;
     background: rgba(99, 102, 241, 0.2);
     color: var(--primary-light);
-    padding: 0.5rem 1rem;
+    padding: 0.4rem 0.8rem;
     border-radius: 2rem;
-    font-size: 0.85rem;
+    font-size: 0.8rem;
     font-weight: 500;
-    margin-bottom: 1rem;
+    margin-bottom: 0.75rem;
     border: 1px solid rgba(99, 102, 241, 0.3);
 }
 
 .hero h1 {
-    font-size: 3.5rem;
+    font-size: 3rem;
     font-weight: 700;
     background: linear-gradient(135deg, #f1f5f9 0%, #818cf8 100%);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
-    margin-bottom: 0.75rem;
+    margin-bottom: 0.5rem;
     letter-spacing: -0.02em;
 }
 
 .subtitle {
-    font-size: 1.35rem;
+    font-size: 1.2rem;
     color: var(--text-secondary);
-    margin-bottom: 1rem;
+    margin-bottom: 0.75rem;
     font-weight: 400;
 }
 
 .description {
-    font-size: 1rem;
+    font-size: 0.9rem;
     color: var(--text-muted);
     max-width: 700px;
-    margin: 0 auto 2rem;
-    line-height: 1.7;
+    margin: 0 auto 1.5rem;
+    line-height: 1.6;
 }
 
 .stats-row {
     display: flex;
     justify-content: center;
-    gap: 3rem;
-    margin-top: 2rem;
+    gap: 2.5rem;
+    margin-top: 1.5rem;
 }
 
 .stat-item {
@@ -117,13 +119,13 @@ body {
 
 .stat-value {
     display: block;
-    font-size: 2.5rem;
+    font-size: 2rem;
     font-weight: 700;
     color: var(--primary-light);
 }
 
 .stat-label {
-    font-size: 0.9rem;
+    font-size: 0.8rem;
     color: var(--text-muted);
 }
 
@@ -132,7 +134,7 @@ body {
     display: flex;
     justify-content: center;
     gap: 0.5rem;
-    padding: 1rem 2rem;
+    padding: 0.75rem 2rem;
     background: var(--bg-card);
     border-bottom: 1px solid var(--border);
     position: sticky;
@@ -142,12 +144,12 @@ body {
 }
 
 .nav-tab {
-    padding: 0.75rem 1.5rem;
+    padding: 0.6rem 1.25rem;
     background: transparent;
     border: 1px solid transparent;
     border-radius: 0.5rem;
     color: var(--text-secondary);
-    font-size: 0.95rem;
+    font-size: 0.9rem;
     font-weight: 500;
     cursor: pointer;
     transition: all 0.2s ease;
@@ -167,9 +169,9 @@ body {
 
 /* Main Content */
 .content {
-    max-width: 1400px;
+    max-width: 1600px;
     margin: 0 auto;
-    padding: 2rem;
+    padding: 1.5rem;
 }
 
 /* Sections */
@@ -183,143 +185,173 @@ body {
 }
 
 @keyframes fadeIn {
-    from { opacity: 0; transform: translateY(10px); }
-    to { opacity: 1; transform: translateY(0); }
+    from {
+        opacity: 0;
+        transform: translateY(10px);
+    }
+
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
 }
 
 .section-header {
-    margin-bottom: 2rem;
+    margin-bottom: 1.5rem;
     text-align: center;
 }
 
 .section-header h2 {
-    font-size: 1.75rem;
+    font-size: 1.5rem;
     font-weight: 600;
     color: var(--text-primary);
-    margin-bottom: 0.5rem;
+    margin-bottom: 0.4rem;
 }
 
 .section-header p {
     color: var(--text-muted);
-    font-size: 1rem;
+    font-size: 0.9rem;
 }
 
-/* Controls */
-.controls {
+/* Dimension Toggle Buttons */
+.dimension-toggle {
     display: flex;
     justify-content: center;
-    gap: 1.5rem;
+    gap: 0.5rem;
     margin-bottom: 1.5rem;
-    flex-wrap: wrap;
 }
 
-.controls label {
-    display: flex;
-    align-items: center;
-    gap: 0.75rem;
-}
-
-.controls label span {
+.dim-btn {
+    padding: 0.6rem 1.2rem;
+    background: var(--bg-card);
+    border: 1px solid var(--border);
+    border-radius: 2rem;
     color: var(--text-secondary);
-    font-size: 0.9rem;
+    font-size: 0.85rem;
     font-weight: 500;
+    cursor: pointer;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    font-family: inherit;
 }
 
-.controls select {
-    padding: 0.6rem 1rem;
-    background: var(--bg-card);
-    border: 1px solid var(--border);
-    border-radius: 0.5rem;
+.dim-btn:hover {
+    background: var(--bg-card-hover);
     color: var(--text-primary);
-    font-size: 0.9rem;
-    cursor: pointer;
-    transition: all 0.2s ease;
-    font-family: inherit;
-    min-width: 160px;
+    transform: translateY(-1px);
 }
 
-.controls select:hover {
-    border-color: var(--primary);
+.dim-btn.active {
+    background: var(--gradient-primary);
+    color: white;
+    border-color: transparent;
+    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
 }
 
-.controls select:focus {
-    outline: none;
-    border-color: var(--primary);
-    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
+/* Charts Grid */
+.charts-grid {
+    display: grid;
+    gap: 1rem;
 }
 
-/* Chart Container */
-.chart-container {
+.charts-grid.three-col {
+    grid-template-columns: repeat(3, 1fr);
+}
+
+@media (max-width: 1200px) {
+    .charts-grid.three-col {
+        grid-template-columns: repeat(2, 1fr);
+    }
+}
+
+@media (max-width: 768px) {
+    .charts-grid.three-col {
+        grid-template-columns: 1fr;
+    }
+}
+
+/* Chart Card */
+.chart-card {
     background: var(--bg-card);
-    border-radius: 1rem;
-    padding: 1.5rem;
-    box-shadow: var(--shadow);
-    min-height: 500px;
+    border-radius: 0.75rem;
+    padding: 1rem;
     border: 1px solid var(--border);
+    box-shadow: var(--shadow);
+}
+
+.chart-card h3 {
+    font-size: 1rem;
+    font-weight: 600;
+    color: var(--text-primary);
+    margin-bottom: 0.75rem;
+    text-align: center;
+    padding-bottom: 0.5rem;
+    border-bottom: 1px solid var(--border);
 }
 
-.chart-container.tall {
-    min-height: 700px;
+/* Chart Container */
+.chart-container-sm {
+    height: 350px;
+    min-height: 300px;
+}
+
+.chart-container-tall {
+    height: 550px;
+    min-height: 500px;
 }
 
 /* Footer */
 .footer {
     text-align: center;
-    padding: 2rem;
+    padding: 1.5rem;
     color: var(--text-muted);
-    font-size: 0.9rem;
+    font-size: 0.85rem;
     border-top: 1px solid var(--border);
-    margin-top: 3rem;
+    margin-top: 2rem;
 }
 
 /* Responsive */
 @media (max-width: 768px) {
     .hero {
-        padding: 3rem 1.5rem 2rem;
+        padding: 2rem 1rem 1.5rem;
     }
-    
+
     .hero h1 {
-        font-size: 2.5rem;
+        font-size: 2rem;
     }
-    
+
     .subtitle {
-        font-size: 1.1rem;
+        font-size: 1rem;
     }
-    
+
     .stats-row {
         gap: 1.5rem;
     }
-    
+
     .stat-value {
-        font-size: 2rem;
+        font-size: 1.5rem;
     }
-    
+
     .nav-tabs {
-        padding: 0.75rem 1rem;
+        padding: 0.5rem 0.75rem;
         gap: 0.25rem;
     }
-    
+
     .nav-tab {
-        padding: 0.5rem 1rem;
-        font-size: 0.85rem;
+        padding: 0.5rem 0.75rem;
+        font-size: 0.8rem;
     }
-    
+
     .content {
         padding: 1rem;
     }
-    
-    .controls {
-        flex-direction: column;
-        align-items: stretch;
-    }
-    
-    .controls label {
-        flex-direction: column;
-        align-items: flex-start;
+
+    .dimension-toggle {
+        flex-wrap: wrap;
     }
-    
-    .controls select {
-        width: 100%;
+
+    .dim-btn {
+        padding: 0.5rem 1rem;
+        font-size: 0.8rem;
     }
 }
 
@@ -335,3 +367,13 @@ body {
 .js-plotly-plot .plotly .modebar-btn:hover path {
     fill: var(--text-primary) !important;
 }
+
+/* Smooth transitions for chart updates */
+.chart-container-sm,
+.chart-container-tall {
+    transition: opacity 0.2s ease;
+}
+
+.chart-updating {
+    opacity: 0.7;
+}