update animation

charts.js

@@ -765,6 +765,20 @@ function initRankingCharts() {
         return;
     }
     renderRankingCharts('novelty', false);
+
+    // Add fade-in animation for ranking charts
+    setTimeout(() => {
+        ['mimic', '10k', 'globem'].forEach((id, index) => {
+            const chart = document.getElementById(`ranking-${id}`);
+            if (chart) {
+                chart.style.opacity = '0';
+                chart.style.transition = `opacity 0.6s ease-out ${index * 150}ms`;
+                requestAnimationFrame(() => {
+                    chart.style.opacity = '1';
+                });
+            }
+        });
+    }, 100);
 }
 
 // Ranking mode toggle event listener
@@ -936,13 +950,39 @@ function initTurnCharts() {
             showlegend: false
         };
 
-        Plotly.newPlot(`turn-${scenario}`, traces, layout, plotlyConfig);
+        Plotly.newPlot(`turn-${scenario}`, traces, layout, plotlyConfig).then(() => {
+            // Animate fill areas growing from baseline
+            const graphDiv = document.getElementById(`turn-${scenario}`);
+            if (!graphDiv) return;
+
+            // Get all fill paths and animate them
+            const paths = graphDiv.querySelectorAll('.scatterlayer .trace path');
+            paths.forEach((path, index) => {
+                const len = path.getTotalLength();
+                if (len > 0) {
+                    path.style.transition = 'none';
+                    path.style.strokeDasharray = len + ' ' + len;
+                    path.style.strokeDashoffset = len;
+                    path.style.opacity = '0';
+
+                    // Staggered animation
+                    const delay = index * 50;
+                    requestAnimationFrame(() => {
+                        path.style.transition = `stroke-dashoffset 0.8s ease-out ${delay}ms, opacity 0.4s ease-out ${delay}ms`;
+                        path.style.strokeDashoffset = '0';
+                        path.style.opacity = '1';
+                    });
+                }
+            });
+        });
     });
 }
 
 // ============================================================================
 // PROBING RESULTS - 3 Charts with animated mode switching
 // ============================================================================
+let probingChartsInitialized = false;
+
 function initProbingCharts() {
     // Check if data is loaded
     if (typeof DDR_DATA === 'undefined' || !DDR_DATA.probing) {
@@ -950,6 +990,33 @@ function initProbingCharts() {
         return;
     }
     renderProbingCharts('byProgress');
+
+    // Add line drawing animation for initial render
+    if (!probingChartsInitialized) {
+        probingChartsInitialized = true;
+        setTimeout(() => {
+            ['mimic', 'globem', '10k'].forEach((scenario, scenarioIndex) => {
+                const graphDiv = document.getElementById(`probing-${scenario}`);
+                if (!graphDiv) return;
+
+                const paths = graphDiv.querySelectorAll('.scatterlayer .trace .lines path');
+                paths.forEach((path, index) => {
+                    const len = path.getTotalLength();
+                    if (len > 0) {
+                        path.style.transition = 'none';
+                        path.style.strokeDasharray = len + ' ' + len;
+                        path.style.strokeDashoffset = len;
+
+                        const delay = scenarioIndex * 100 + index * 60;
+                        requestAnimationFrame(() => {
+                            path.style.transition = `stroke-dashoffset 0.8s ease-out ${delay}ms`;
+                            path.style.strokeDashoffset = '0';
+                        });
+                    }
+                });
+            });
+        }, 200);
+    }
 }
 
 function renderProbingCharts(mode) {
@@ -1128,7 +1195,31 @@ function initErrorChart() {
         margin: { t: 50, r: 20, b: 100, l: 50 }
     };
 
-    Plotly.newPlot('error-chart', traces, layout, plotlyConfig);
+    // Start with zero-height bars for animation
+    const initialTraces = [{
+        ...traces[0],
+        y: data.map(() => 0),  // Start at 0
+        text: data.map(() => '')  // Hide text initially
+    }];
+
+    Plotly.newPlot('error-chart', initialTraces, layout, plotlyConfig).then(() => {
+        // Animate bars growing from 0 to target values
+        setTimeout(() => {
+            Plotly.animate('error-chart', {
+                data: traces,
+                traces: [0]
+            }, {
+                transition: {
+                    duration: 800,
+                    easing: 'cubic-out'
+                },
+                frame: {
+                    duration: 800,
+                    redraw: true
+                }
+            });
+        }, 200);
+    });
 }
 
 // ============================================================================
@@ -1145,6 +1236,8 @@ const ENTROPY_MODELS = [
 
 let currentEntropyScenario = '10k';
 
+let entropyChartsInitialized = false;
+
 function initEntropyCharts() {
     if (typeof ENTROPY_DATA === 'undefined') {
         // Retry if data not loaded yet
@@ -1164,6 +1257,25 @@ function initEntropyCharts() {
 
     // Initial render
     renderEntropyCharts('10k');
+
+    // Add scatter point animation for initial render
+    if (!entropyChartsInitialized) {
+        entropyChartsInitialized = true;
+        setTimeout(() => {
+            for (let i = 0; i < 6; i++) {
+                const chart = document.getElementById(`entropy-model-${i}`);
+                if (chart) {
+                    chart.style.opacity = '0';
+                    chart.style.transform = 'scale(0.95)';
+                    chart.style.transition = `opacity 0.5s ease-out ${i * 100}ms, transform 0.5s ease-out ${i * 100}ms`;
+                    requestAnimationFrame(() => {
+                        chart.style.opacity = '1';
+                        chart.style.transform = 'scale(1)';
+                    });
+                }
+            }
+        }, 100);
+    }
 }
 
 function renderEntropyCharts(scenario) {