Wiki/chardist: Difference between revisions

Revision as of 18:35, 6 October 2025

Displayed in the chart below is the relative distribution of characters (top x-axis) across various illustrated editions of Adventures of Huckleberry Finn cataloged on this webpage. Each colored bar represents a different character, while the y-axis lists the editions in chronological order. At the bottom, the second x-axis shows the total number of illustrations in these editions.

Please note that many illustrations feature multiple characters. Therefore, adding the individual values of all characters appearing in a single edition will yield a number greater than 100%.

Canvas-Größe: 0 x 0

Canvas verfügbar: ❌

@@ Line 8: / Line 8: @@
 <html>
-<!-- Chart Container -->
 <div class="chart-container">
    <canvas id="lineChart"></canvas>
+  <div id="canvas-size" style="margin-top:5px; font-size:0.9em; color:gray;">
+    Canvas-Größe: <span id="canvas-width">0</span> x <span id="canvas-height">0</span>
+  </div>
+  <div id="debug-marker" style="margin-top:2px; font-size:0.9em; color:red;">
+    Canvas verfügbar: <span id="canvas-ready">❌</span>
+  </div>
 </div>
+<script>
+  // Debug-Elemente
+  const canvas = document.getElementById('lineChart');
+  const wSpan = document.getElementById('canvas-width');
+  const hSpan = document.getElementById('canvas-height');
+  const marker = document.getElementById('canvas-ready');
+  // Polling-Funktion, bis Canvas sichtbar ist
+  function checkCanvas() {
+    if (!canvas) return requestAnimationFrame(checkCanvas);
+    const rect = canvas.getBoundingClientRect();
+    wSpan.textContent = Math.round(rect.width);
+    hSpan.textContent = Math.round(rect.height);
+    if (rect.width > 0 && rect.height > 0) {
+      marker.textContent = '✅';
+      startChart();
+    } else {
+      requestAnimationFrame(checkCanvas);
+    }
+  }
+  // Chart starten
+  function startChart() {
+    if (window.chartStarted) return; // Verhindert Doppelstart
+    window.chartStarted = true;
+    // Chart.js laden
+    mw.loader.load('https://cdn.jsdelivr.net/npm/chart.js', 'text/javascript', function() {
+      console.log("Chart.js geladen:", typeof Chart);
+      const ctx = canvas.getContext('2d');
+      const data = {
+        labels: ['Kemble (1885)', 'Schröder (1898)', 'Hirth (1920)', 'Trier (1936)', 'Harder (1938)', 'Kellerer (1938)', 'Busoni (1940)','Bebié (1944)'],
+        datasets: [
+          { label: 'Huck', data: [47.40,50.98,72.22,54.29,93.10,50.00,54.10,69.81], backgroundColor:'red', borderColor:'red', borderWidth:1, barPercentage:0.8 },
+          { label: 'Jim', data: [17.92,29.41,22.22,28.57,44.83,18.18,26.23,17.00], backgroundColor:'blue', borderColor:'blue', borderWidth:1, barPercentage:0.8 },
+          { label: 'Pap Finn', data: [5.78,7.84,5.56,5.71,6.90,9.09,4.92,1.88], backgroundColor:'green', borderColor:'green', borderWidth:1, barPercentage:0.8 },
+          { label: 'King/Duke', data: [13.29,13.73,16.67,20.00,17.24,9.09,16.39,3.77], backgroundColor:'orange', borderColor:'orange', borderWidth:1, barPercentage:0.8 },
+          { label: 'Tom', data: [11.56,7.84,19.44,11.43,24.14,9.09,11.48,13.21], backgroundColor:'black', borderColor:'black', borderWidth:1, barPercentage:0.8 },
+          { label: 'Others', data: [38.73,29.41,36.11,31.43,17.24,31.82,22.95,13.21], backgroundColor:'pink', borderColor:'pink', borderWidth:1, barPercentage:0.8 },
+          { type: 'scatter', label:'Total # of Illustrations', data:[173,51,36,35,29,22,61,53], borderColor:'purple', borderWidth:3, xAxisID:'x2', pointStyle:'cross', pointRadius:8, pointHoverRadius:10, showLine:false }
+        ]
+      };
+      const config = {
+        type:'bar',
+        data:data,
+        options:{
+          indexAxis:'y',
+          responsive:true,
+          plugins:{ legend:{ display:true }, tooltip:{ mode:'index', intersect:false } },
+          interaction:{ mode:'nearest', axis:'y', intersect:false },
+          scales:{
+            y:{ display:true, title:{ display:true, text:'Illustrator (Year)' }, stacked:false, barThickness:30 },
+            x:{ display:true, position:'top', title:{ display:true, text:'% of Illustrations Featuring Character' }, min:0, max:100 },
+            x2:{ display:true, position:'bottom', title:{ display:true, text:'Total # of Illustrations' }, min:0, max:180, grid:{ drawOnChartArea:false } }
+          }
+        }
+      };
+      new Chart(ctx, config);
+    });
+  }
+  // Start Polling
+  requestAnimationFrame(checkCanvas);
+</script>
 </html>

Wiki/chardist: Difference between revisions

From Illustrations in German Translations of Mark Twain's Works

Revision as of 18:35, 6 October 2025