Gastbeitrag von Sarah Noll.

Der primäre Wahrnehmungssinn des Menschen ist das Sehen. Vieles in unserer Umgebung wird hauptsächlich über die Augen wahrgenommen. Zusätzlich reagieren wir auf Bilder im Vergleich zur Textform schneller und fokussieren sie als Erstes. Wir können aber die Aufnahme von Texten erleichtern und verbessern, wenn sie strukturiert angezeigt werden. Noch besser ist die Informationsaufnahme, wenn Daten mit Hilfe von Grafiken und Diagrammen visualisiert und veranschaulicht werden. Diese ermöglichen uns, Fakten einfacher darzustellen und einprägsamer zu verarbeiten. Durch sie können große Datenmengen schneller verglichen werden.

Der Aufbau der Datenstruktur spielt eine große Rolle bei der Datenvisualisierung. Denn welche Darstellungsarten die Informationsaufnahme unterstützen und welche die Aufnahme negativ beeinflussen, hängt bedeutend von der Datenstruktur ab.

Beispielszenario

Im nachfolgenden Beispiel soll die Datenstruktur eines Servers, auf dem Softwarekomponenten installiert wurden, veranschaulicht werden.
Dieser Server beinhaltet mehrere Container und beliebig viele instanziierte Komponenten, die in einem Container oder direkt auf dem Server installiert wurden. Die hierarchische Struktur
setzt voraus, dass als Elternelement nur genau ein Server oder Container in Frage kommt.

Tabelle 1: Beispieldaten

Das weitere Vorgehen besteht darin, sich mit den unterschiedlichen Datenvisualisierungsarten auseinanderzusetzen. Dafür werden zuerst einmal Ideen gesammelt und Mockups erstellt. Ein Mockup ist ein erster Entwurf, der dazu dient, anhand eines konkreten Beispiels ein Gefühl für das Ergebnis zu erhalten und weitere Anforderungen ermitteln zu können. Hierbei sollten auch auf den ersten Blick ausgefallen oder außergewöhnlich wirkende Varianten erprobt werden. Die Schwierigkeit besteht darin herauszufinden, welche Gestaltungsweise den Anforderungen gerecht wird. Um aus der Vielzahl der Möglichkeiten die geeignete herauszufiltern, hilft es Pro und Contra abzuwägen.

Diagrammtypen

Mit einem Ringdiagramm oder Sunburst können überschaubare Datensätze leicht verständlich und schnell aufgenommen werden. Jedoch ist es gänzlich kontraproduktiv,
wenn man eine komplexe Struktur vereinfachen möchte. Es eignet sich auch nicht für die Darstellung jedes Schemas. Außerdem nimmt ein Ringdiagramm durch die runde Anordnung
viel Platz ein.

Abbildung 1: Sunburst Graph

Für die Darstellung von Strukturen sind Netzpläne besser geeignet, sie eignen sich jedoch nicht um Informationen schnell erkennbar darzustellen. Der Sinn des Netzes ist die Struktur der Daten vereinfacht darzustellen. Ein einfacher Überblick gelingt häufig aber nicht, wenn in diesem Diagramm nicht reduzierte Daten verwendet werden. Für die Beschriftung ist begrenzter Platz vorhanden. Um diesem Platzmangel entgegen zu wirken, kann durch Form und Farbe der Knoten differenziert werden. Bei größeren Datenmengen lassen sich Duplikate der Elemente nicht vermeiden, da sonst die Linienführung zu einem unübersichtlichen Wirrwarr wird und den Aufbau des Graphen zu Nichte macht.

Abbildung 2: Netzplan

Eine Tree Map veranschaulicht die Mengenverteilung. Sie besteht aus einem großen Rechteck, das wiederum aus vielen kleinen Rechtecken besteht. Die Fläche der einzelnen Rechtecke
wird mithilfe eines Faktors bestimmt. Beispielsweise lässt sich bei der Darstellung von Ländern die Einwohnerzahl als Referenz nehmen.

Abbildung 3: Tree Map

Ein Ebenen-Diagramm (Beispiel siehe Abbildung 4) kann eine hierarchische Struktur gut darstellen und hilft dabei, diese schnell zu erfassen. Problematisch kann hier sehr schnell die Darstellungsbreite werden, wenn eine bestimmte Datenmenge pro Ebene überschritten wird. Ebenso können Platzkomplikationen bei der Beschriftung auftauchen. Generell ist ein solches Diagramm sehr leicht verständlich und gut strukturiert.

Bei Schwierigkeiten hilft es eine kurze Skizze aufzuzeichnen und sich gegebenenfalls Inspiration durch Beispiele zu holen. Ein innovativer Lösungsansatz ist die Kombination zweier Darstellungstypen, z. B. Tree Map und Ebenen-Diagramm.

Hat man dann mehrere Mockups erstellt, kann man sich weitere Meinungen einholen und die Vor-und Nachteile diskutieren. Die optimierten Änderungen werden in die Mockups eingearbeitet.
Da das Ebenen-Diagramm für das Beispielszenario der Datenvisualisierung am Geeignetsten ist, wird dieses Mockup als Prototyp umgesetzt.

Der Prototyp

Die Prototypenerstellung erfordert zunächst einmal die Festlegung eines kompakten Datenformats, wie z.B. JSON, XML oder CSV. Es erleichtert die Arbeit, wenn man bei der Erstellung des Prototyps bereits das Konzept für die Einbindung im Hinterkopf hat.

Anschließend wird eine Methode zum Parsen ausgewählt, damit man aus den Daten die als Textformat vorliegenden Objekte instanziieren kann und diese für die Manipulation zur Verfügung stehen.

Abbildung 4: Darstellung der Daten als Ebenen-Diagramm

Oft lässt sich bei der Erstellung des Prototyps das Mockup nicht exakt umsetzen und es müssen Kompromisse eingegangen werden. Dies kann aus unterschiedlichen Gründen vorkommen, weil zum Beispiel technische Probleme oder Probleme in der Usability auftauchen. Solche Differenzen können durch Änderungen verschiedener Komponenten behoben werden. Bei der Erstellung werden detaillierte Erkenntnisse über die Funktionalität gesammelt, sodass weitere Verbesserungen umgesetzt werden können.

Um eine bessere Übersichtlichkeit zu gewährleisten und dem Platzmangel vorzubeugen, werden als Kompromiss in der Abbildung 4 die Instanzen über, anstatt in das Server-Feld platziert und die Beschriftung mittels eines Tooltips angezeigt. Eine weitere Änderung sieht vor, bei größeren Datenmengen eine Mindestgröße einzuführen. Zum Schluss wird die Visualisierungskomponente in das System zur Erprobung eingebunden. Bei der Entwicklung können weitere Optimierungen und Kompromisse erarbeitet werden.

Fazit

Es erfordert einen gewissen Aufwand um Daten geeignet zu visualisieren, aber der Mehrwert lohnt sich. Veranschaulichte Daten ermöglichen dem Anwender eine
bequeme und schnelle Informationsaufnahme.

Die technische Komponente wurde hier bewusst weggelassen, da sie je nach Situation sehr individuell ist und auch unterschiedliche Variationen möglich sind. Die Einbindung
des Prototyps ist ebenfalls spezifisch.

Links

• Weitere Beispiele für Datenvisualisierungen:
  • visual.ly
  • anonymousbi.wordpress.com
  • visualcomplexity.com
• Bibliothek für die Umsetzung:
  • D3 Gallery

The post Von der Tabelle zum Bild – Ein konzeptioneller Einstieg in die Datenvisualisierung appeared first on NovaTec Blog.