exact python match

charts.js

@@ -80,6 +80,14 @@ document.querySelectorAll('.nav-tab').forEach(tab => {
 // ============================================================================
 // SCALING ANALYSIS - 3 Charts with animated dimension switching
 // ============================================================================
+
+// Exact axis ranges from Python scripts
+const SCALING_Y_RANGES = {
+    'mimic': [5, 40],    // Python: y_min=5, y_max=40
+    '10k': [0, 85],      // Python: y_min=0, y_max=85
+    'globem': [0, 50]    // Python: y_min=0, y_max=50
+};
+
 function initScalingCharts() {
     const scenarios = ['mimic', '10k', 'globem'];
 
@@ -103,31 +111,32 @@ function initScalingCharts() {
                     width: 2
                 },
                 marker: {
-                    size: 5,
+                    size: 6,
                     color: DDR_DATA.modelColors[model] || '#888'
                 },
-                hovertemplate: `<b>${model}</b><br>Turn: %{x}<br>Accuracy: %{y:.1f}%<extra></extra>`
+                hovertemplate: `<b>${model}</b><br>Turn: %{x}<br>Accuracy: %{y:.2f}%<extra></extra>`
             });
         });
 
-        // Calculate Y-axis range (similar to Python: round to nearest 5)
-        const allAccuracies = models.flatMap(m => data[m].accuracy);
-        const yMin = Math.max(0, Math.floor(Math.min(...allAccuracies) / 5) * 5);
-        const yMax = (Math.floor(Math.max(...allAccuracies) / 5) + 1) * 5 + 5;
+        // Use exact Y-axis range from Python
+        const yRange = SCALING_Y_RANGES[scenario] || [0, 100];
+        const maxTurn = Math.max(...models.flatMap(m => data[m].turns));
 
         const layout = {
             ...darkLayout,
             xaxis: {
                 ...darkLayout.xaxis,
                 title: { text: 'Number of Interaction Turns', font: { size: 11, color: '#e2e8f0' } },
-                dtick: 5,  // 5 turn intervals
-                range: [0, Math.max(...models.flatMap(m => data[m].turns)) + 2]
+                dtick: 10,  // 10 turn intervals (matching Python's auto)
+                range: [0, maxTurn + 5],
+                tick0: 0
             },
             yaxis: {
                 ...darkLayout.yaxis,
                 title: { text: 'Accuracy (%)', font: { size: 11, color: '#e2e8f0' } },
                 dtick: 5,  // 5% intervals
-                range: [yMin, yMax]
+                range: yRange,
+                tick0: yRange[0]
             },
             showlegend: true
         };
@@ -173,25 +182,35 @@ function updateScalingCharts(dimension) {
             newY.push(modelData.accuracy);
         });
 
+        const maxX = Math.max(...newX.flat());
+
         // Calculate proper axis settings for each dimension
         const xAxisSettings = {
             'turn': {
-                dtick: 5,
+                type: 'linear',
+                dtick: 10,
                 tickformat: null,
-                range: [0, Math.max(...newX.flat()) + 2]
+                range: [0, maxX + 5],
+                tick0: 0
             },
             'token': {
-                dtick: 5000,
+                type: 'linear',
+                dtick: 10000,
                 tickformat: ',.0f',
-                range: [0, Math.max(...newX.flat()) * 1.05]
+                range: [0, maxX * 1.05],
+                tick0: 0
             },
             'cost': {
+                type: 'log',
                 dtick: null,  // auto for log scale
-                tickformat: '$.2f',
-                range: null  // auto for log scale
+                tickformat: '$.3f',
+                range: null,  // auto for log scale
+                tick0: null
             }
         };
 
+        const settings = xAxisSettings[dimension];
+
         // Animate the transition
         Plotly.animate(`scaling-${scenario}`, {
             data: newX.map((x, i) => ({ x, y: newY[i] })),
@@ -199,10 +218,11 @@ function updateScalingCharts(dimension) {
             layout: {
                 xaxis: {
                     title: { text: xLabels[dimension], font: { size: 11, color: '#e2e8f0' } },
-                    type: dimension === 'cost' ? 'log' : 'linear',
-                    dtick: xAxisSettings[dimension].dtick,
-                    tickformat: xAxisSettings[dimension].tickformat,
-                    range: xAxisSettings[dimension].range,
+                    type: settings.type,
+                    dtick: settings.dtick,
+                    tickformat: settings.tickformat,
+                    range: settings.range,
+                    tick0: settings.tick0,
                     exponentformat: 'none'
                 }
             }
@@ -218,12 +238,13 @@ function updateScalingCharts(dimension) {
         models.forEach((model, i) => {
             const hoverFormat = dimension === 'token' ? '%{x:,.0f}' : (dimension === 'cost' ? '$%{x:.4f}' : '%{x}');
             Plotly.restyle(`scaling-${scenario}`, {
-                hovertemplate: `<b>${model}</b><br>${hoverLabels[dimension]}: ${hoverFormat}<br>Accuracy: %{y:.1f}%<extra></extra>`
+                hovertemplate: `<b>${model}</b><br>${hoverLabels[dimension]}: ${hoverFormat}<br>Accuracy: %{y:.2f}%<extra></extra>`
             }, [i]);
         });
     });
 }
 
+
 // Dimension toggle event listeners
 document.querySelectorAll('.dim-btn:not(.probing-dim)').forEach(btn => {
     btn.addEventListener('click', () => {