Slides adjust

thesis_output/presentation/charts.js

@@ -89,43 +89,58 @@ function createTrialsChart() {
   });
 }
 
-function createTextlineChart() {
-  const ctx = document.getElementById('chartTextline');
-  if (!ctx || charts.textline) return;
-  charts.textline = new Chart(ctx, {
+function createImpactChart() {
+  const ctx = document.getElementById('chartImpact');
+  if (!ctx || charts.impact) return;
+  const params = [
+    'use_doc_unwarping',
+    'textline_orientation',
+    'use_doc_orient_classify',
+    'text_det_thresh',
+    'text_det_box_thresh',
+    'text_rec_score_thresh'
+  ];
+  const correlations = [0.879, -0.535, -0.712, 0.428, 0.311, -0.268];
+  const absValues = correlations.map(Math.abs);
+  // Sort by absolute value descending
+  const indices = absValues.map((_, i) => i).sort((a, b) => absValues[b] - absValues[a]);
+  const sortedParams = indices.map(i => params[i]);
+  const sortedCorr = indices.map(i => correlations[i]);
+  const colors = sortedCorr.map(v => v > 0 ? RED : BLUE);
+  const borderColors = sortedCorr.map(v => v > 0 ? '#C04030' : BLUE_DARK);
+
+  charts.impact = new Chart(ctx, {
     type: 'bar',
     data: {
-      labels: ['False', 'True'],
+      labels: sortedParams,
       datasets: [{
-        label: 'CER medio (%)',
-        data: [4.73, 1.74],
-        backgroundColor: [GRAY, BLUE],
-        borderColor: ['#aaa', BLUE_DARK],
-        borderWidth: 2,
-        borderRadius: 8,
-        barPercentage: 0.5
+        data: sortedCorr,
+        backgroundColor: colors,
+        borderColor: borderColors,
+        borderWidth: 1.5,
+        borderRadius: 4,
+        barPercentage: 0.65
       }]
     },
     options: {
       ...commonOptions,
+      indexAxis: 'y',
       scales: {
-        y: {
-          beginAtZero: true,
-          max: 6,
-          title: { display: true, text: 'CER (%)', font: { family: 'Calibri', size: 13 } },
-          grid: { color: '#f0f0f0' }
-        },
         x: {
-          title: { display: true, text: 'textline_orientation', font: { family: 'Calibri', size: 13, weight: 'bold' } },
+          min: -1, max: 1,
+          title: { display: true, text: 'Correlación con CER (rojo = perjudica, azul = mejora)', font: { family: 'Calibri', size: 10 } },
+          grid: { color: (ctx) => ctx.tick.value === 0 ? '#666' : '#f0f0f0' }
+        },
+        y: {
           grid: { display: false },
-          ticks: { font: { family: 'Calibri', size: 16, weight: 'bold' } }
+          ticks: { font: { family: 'Consolas, monospace', size: 11 } }
         }
       },
       plugins: {
         legend: { display: false },
         tooltip: {
           callbacks: {
-            label: (ctx) => `CER: ${ctx.parsed.y}%`
+            label: (ctx) => `Correlación: ${ctx.parsed.x > 0 ? '+' : ''}${ctx.parsed.x.toFixed(3)}`
           }
         }
       }
@@ -321,7 +336,7 @@ function createGPUChart() {
 const chartCreators = {
   benchmark: createBenchmarkChart,
   trials: createTrialsChart,
-  textline: createTextlineChart,
+  impact: createImpactChart,
   correlations: () => { createCorrelationChart(); createImportanceChart(); },
   validation: createValidationChart,
   gpu: createGPUChart