Benutzer Blog:Nekky-chan/Visualisierung von Daten in portablen Infoboxen

Der Originalblog Visualizing data in Portable Infoboxes wurde im englischen Portability Hub von dem Benutzer Flightmare verfasst und veröffentlicht und von den deutschen Portabilitäts-Pionieren für das deutsche Portabilitäts-Wiki übersetzt.

Hallöchen Allerseits! Dieser Blog zeigt euch einige Tricks zum Erstellen von Infoboxen, welche repräsentative (dynamische) Daten in einer alternativen Form darstellen können. Eine tolle Eigenschaft der portablen Infoboxen ist der einfache Wechsel in ein horizontales Layout, um einen langweiligen Strang an Zahlenwerten interessanter zu gestalten. Trotzdem gilt: „Ein Bild sagt mehr als tausend Worte“, und möglicherweise ist es auch tausende von Dateneinträgen wert.

Die Idee dazu stammt aus einigen Experimenten, um Schaubilder in einer Infobox darzustellen. Dabei waren die Spiele Pokémon X & Y eine große Quelle der Inspiration. Die finalen Ergebnisse können im nachfolgend betrachtet werden

Hexagonale Statistiken

Infobox mit oktagonaler Statistik

Inspiriert durch Pokémon wurden die ersten Schaubilder dementsprechend in einer Pokémon-Infobox umgesetzt. Kurz darauf wurde das gleiche in mehreren anderen Infoboxen umgesetzt, wie in der im Bild angezeigten Transformers-Infobox zu sehen. Anstatt acht Werte als reinen Text in einer horizontalen Ausrichtung zu zeigen, wurden diese in einem oktagonalen Schaubild dargestellt. Das ermöglicht die wichtigsten Schlüsselstärken (sowie auch Schwächen) des Charakters visuell hervorzuheben, ohne dabei die Werte lesen und interpretieren zu müssen. Ihr könntet auch die beiden besten Welten miteinander kombinieren und deren Werte in einem Schaubild darstellen aber das Beispiel sollte hier möglichst einfach bleiben.

Historischer Datenverlauf

Infobox mit Preishistogram

Einige Daten passen viel besser zu einem Graphen. Wahrscheinlich möchtet ihr die historischen Daten eines Objektes zeigen. Im Dota-Hut-Beispiel wurden die Wert des beliebten Gabe-Huts genutzt. Doch diesmal hat man etwas mit dynamischen Daten ausprobiert. Das Hut-Beispiel ist momentan keine dynamische Infobox. Aber diese Idee könnt ihr ganz einfach erweitern, um die statischen Linien durch Valves zugehörige APIs zu ersetzten. Wie genau das funktioniert würde den Umfang dieses Beitrags jedoch sprengen, weshalb evtl. in einem weitere Beitrag weiteres dazu folgen wird.

Jetzt wird’s technisch

Der Schlüssel zu diesen Graphen und Schaubildern ist das HTML5 Canvas-Element. Aktuell unterstützen die portablen Infoboxen diese Technik noch nicht nativ. Der navigation-Tag gibt uns allerdings die Möglichkeit, Canvas über JavaScript zu inkludieren.

<navigation>
<span id='stat-data' style='display:none' data-info='{"Kraft": {{{Stärke|1}}}, "Geschick": {{{Geschick|1}}}, "Intelligenz": {{{Intelligenz|1}}}, "Geschwindigkeit": {{{Geschwindigkeit|1}}}, "Ausdauer": {{{Ausdauer|1}}}, "Feuerkraft": {{{Feuerkraft|1}}}, "Rank": {{{Rank|1}}}, "Courage": {{{Courage|1}}}}'>
</span>
</navigation>

Und

$('#stat-data').append('<canvas id="canvas" width="256" height="256" style="margin: 0 auto;" />');

Durch die Formatierung der sechs Datenwerte des Hexagons im JSON-Format, können wir diese ganz einfach unserem JavaScript-Code überreichen:

var stats = JSON.parse( $('#stat-data').attr('data-info') );

Canvas

Canvas ist ein HTML5-Element mit vordefinierter Größe, in dem mithilfe von JavaScript Bilder abgebildet werden können. Anstatt einer Bilddatei nutzen wir JavaScript, um unsere Formen und Linien in diesem Canvas-Element zu erstellen. Es ähnelt einem vereinfachten Zeichenprogramm. Beispiel des Zeichnens einer Linie in einem 288 Pixel mal 192 Pixel großen Canvas-Element. Dieses Beispiel wurde im oben gezeigten Preishistogramm verwendet:

var ctx = canvas.getContext("2d");
 
    /*draw axes*/
    ctx.beginPath();
    ctx.moveTo(32,32);
    ctx.lineTo(32,160)
    ctx.lineTo(256,160);
    ctx.lineWidth = 2;
    ctx.strokeStyle = 'black';
    ctx.stroke();

Wie ihr sehen könnt, müsst ihr nur die X- und Y-Koordinaten einfügen, um eine einfache Linie zu zeichnen. Das kann später erweitert werden durch das Einsetzen von Variablen, die aus jeder beliebigen Quelle hergeholt werden können (bspw. historische Preisdaten aus der Steam-API). Das Oktagonbeispiel wurde auf demselben Weg erstellt wie der Graph. Man fügte lediglich etwas trigonometrische Mathematik zur Gleichung hinzu.

Quellen

Ihr findet beide Infoboxen, die ich verwendet habe in diesen Quellen:

• Hexagonale Statistik:
  • Infobox Vorlage
  • JavaScript Quelle (Achtung, Mathe!)
• Histogramm:
  • Infobox Vorlage
  • JavaScript Quelle (Einfaches Beispiel)

Zum Weiterlesen

• MDN Canvas Verweis
• W3Schools Canvas Verweis

Auch einen Dank an Kopcap94 für den letzten Schliff an dieser Arbeit. Ich möchte sehr gerne von all euren (neuen) Ideen in Verwendung von <canvas> in Infoboxen hören! Kann jemand Verwendung für das allmächtige Kreisdiagramm finden?

---

Übersetzung: Bryan