Du hast deinen AdBlocker an?

Es wäre ein Traum, wenn du ihn für t3n.de deaktivierst. Wir zeigen dir gerne, wie das geht. Und natürlich erklären wir dir auch, warum uns das so wichtig ist. Digitales High-five, deine t3n-Redaktion

Entwicklung & Design

Webdevelopment: 10 Wege zur Datenvisualisierung jenseits von Balken und Kuchen

Statische und dynamisch-interaktive Datenvisualisierungen sind beliebt. Sie können unterhalten, den Spieltrieb des Betrachters bedienen und durch kreative und unkonventionelle Umsetzungen überraschen. Dank jeder Menge Tools, Webservices und Bibliotheken bekommen Entwickler hilfreiche Baukästen an die Hand, um schnell eigene Visualisierungen umzusetzen. Ein Überblick von t3n.de-Gastautor Tobias Kut.

Infografiken, Flash-Anwendungen und Netzwerkvisualisierungen werden derzeit in Massen über Twitter & Co verschickt. Während sich Grafiker bei umfänglichen Infografiken wie der Web Trend Map austoben können, schlägt spätestens in Punkto Interaktivität die Stunde der Entwickler, Programmierer und Webdesigner. Zwar können durch einige Werkzeuge auch Programmierunkundige Visualisierungen zusammenklicken, um Ordnung und Lesbarkeit in große Datensammlungen zu bringen, sind technische Kenntnisse allerdings mehr als hilfreich und zudem Türöffner zur individuellen Umsetzung.

Die hier gelisteten Services bieten Lösungen, die über die üblichen Torten, Balken und Liniendiagramme hinausgehen, sind kostenlos und häufig Open Source. Je nach Anwendung sind keine bis sehr gute Kenntnisse der gewählten Sprache Voraussetzungen. Da die Liste nur eine Auswahl derzeit populärer Anwendungen darstellen kann, freuen wir uns über Eure Erfahrungen mit weiteren Systemen, Anwendungen und Bibliotheken in den Kommentaren.

JavaScript

Protovis

Streamgraphs sind nur eine von diversen statischen und interaktiven Visualisierungsformen die Protovis bietet.

Protovis, ein Projekt der Stanford University, nutzt Javascript und SVG zur Darstellung unterschiedlichster Visualisierungen. Kürzlich in Version 3.2 erschienen, findet der Anwender umfassende Möglichkeiten für statische und interaktive Visualisierungen sowie Raum für eigene Anpassungen. Protovis steht unter BSD-Lizenz und hat gegenüber anderen Umgebungen wie etwa Processing den Ruf, vergleichbare Resultate mit einfacherem Code umzusetzen.

The Javascript Infovis Toolkit

RGraph ist eine Darstellungsvariante die The JavaScript Infovis Toolkit bietet. Fokus der Toolbox sind animierte Datenvisualisierungen

The Javascript Infovis Toolkit von Entwickler Nicolas Garcia Belmonte hat kürzlich die Alpha Version 2.0 der Werkzeugkiste für die Erstellung interaktiver Grafiken, u.a. von Treemaps, Rgraphs und Netzwerkvisualisierungen, veröffentlicht. Unter der Prämisse Web Standards-gerechte Visualisierungen zu ermöglichen, hat die Toolbox mit der aktuellen Version neue Grafik-Formen und eine neue API erhalten. Die Dokumentation wurde ebenfalls überarbeitet.

Flash/ActionScript

Flare

Flare bietet umfassende Möglichkeiten zur Visualisierung und interaktiven Aufbereitung von Daten

Flare ist eine ActionScript-Bibliothek, die ein breites Spektrum an Visualisierungen abdeckt: von einfachen Graphen bis hin zu komplexen Animationen und Interaktionsmöglichkeiten. Auf der Webseite stehen umfangreiche Demos zur Verfügung und geben einen guten Eindruck, was alles umgesetzt werden kann. Flare ist Open Source, steht unter BSD-Lizenz und findet auch im professionellen Bereich häufig Anwender.

Elastic Lists

socialmediaplanner.de greift auf elastic lists zurück um die dahinterliegende Datentabelle für den Anwender leichter und angenehmer nutzbar zu machen.

Elastic Lists ist eine spezielle Anwendung, um Datensammlungen ein Navigationsinterface zu geben und „facet browsing“ zu ermöglichen. Der Anwender bekommt eine Oberfläche, die durch einfaches Klicken die dargestellten Tabellenwerte aufbereitet und dynamisch anpasst. Die Anwendung kann zudem die Metadaten gewichten und Sparklines darstellen. Elastic Lists wurde von Moritz Stefaner entwickelt und kürzlich unter Open Source Lizenz gestellt.

Revisit

Revisit stellt ähnlich einer Twitterwall Tweets zu einem oder mehreren Begriffen dar, hebt aber Konversationen und Retweets hervor und animiert Veränderungen.

Visualisierungen durch Revisit sollten unter Twitternutzern bereits bekannt sein. Ebenfalls von Moritz Stefaner konzipiert und zusammen mit Elastic Lists unter Open-Source-Lizenz veröffentlicht, stellt die Anwendung ähnlich einer Twitterwall Tweets zu bestimmten Suchbegriffen dar. Allerdings werden Konversationen und Retweets besonders hervorgehoben und durch Animation in den Fokus gerückt.

Webservices

Mittlerweile gibt es einige Webservices, die Usern auch ohne Programmierkenntnisse die Möglichkeit bieten, Mashups zu erstellen oder Datensätze anderweitig graphisch umzusetzen. Der Preis dafür ist das Hosting der Daten und fertigen Anwendungen auf fremden Servern. Wer damit kein Problem hat, kann auf die folgenden populären Webdienste zugreifen.

Many Eyes

Visualisierung der Bösewichte bei Doctor Who.

Many Eyes wurde von IBM ins Leben gerufen. Während jeder User die Möglichkeit hat, mit den öffentlich zur Verfügung gestellten Datensätzen zu experimentieren, sie zu bewerten und zu diskutieren, erhalten registrierte Nutzer auch eine Upload-Funktion für eigene Datensätze. Da der Grundgedanke der Anwendung Social Data Visualization ist, stehen diese Datensätze allen Anwendern zur Verfügung, geschützte Visualisierungen oder selbstgehostete Umsetzungen sind nur auf Anfrage möglich. Die Visualisierungen werden über Java Applets dargestellt und reichen von Karten-Mashups, verschiedenen Textvisualisierungen bis zu Treemaps und Bubble Charts. Many Eyes wird häufig in einem Zug mit Swivel.com genannt, das zwar einen ähnlichen Sharing-Ansatz verfolgt, sich aber auf Chart-Grundformen beschränkt.

Google Charts Tools

Beispiel für eine interaktive Visualisierung mit dem Google-Tool.

Natürlich bietet auch Google mit den Charts Tools und insbesondere mit der Visualization API ein eigenes System zur grafischen, interaktiven Darstellung von Datensätzen. Besonders erwähnenswert sind dabei die Motion Charts, die in einer Animation Veränderungen auf einer Zeitachse visualisieren. Die grafischen Möglichkeiten und Visualisierungstypen sind allerdings vielfältig. Fertige Charts lassen sich als Gadget in Google Docs einbinden oder auch per JavaScript auf die eigene Webseite stellen.

Tools

Processing

140 Characters von @stirman ist eine einfache Umsetzung in Processing und zeigt u.a. die Verbindungen der ersten 140 Twitter-Mitarbeiter.

Processing ist eine eigenständige Open-Source-Entwicklungsumgebung und Programmiersprache, die stark an Java angelehnt ist. Die Anwendung richtete sich ursprünglich an Lehrende und Programmieranfänger, hat darüber hinaus aber weite Verbreitung und Akzeptanz im professionellen Einsatz gefunden. Durch zahlreiche Bibliotheken lässt sich die Anwendung zusätzlich erweitern. Standard-Exportformat ist ein JavaApplet.

Tableau Public

Beispiel einer interaktiven Visualisierung mit Tableau.

Tableau Public ist eine freie Einstiegs-Desktopversion der kostenpflichtigen Unternehmenssoftware. Mit Hilfe der Anwendung lassen sich Daten ähnlich wie bei den Webdiensten ManyEyes und Swivel ohne viel Programmierkenntnis aufbereiten. Die Visualisierung wird am heimischen Rechner zusammengeklickt, auf die öffentlichen Tableau-Server hochgeladen und per Embed auf die eigene Seite gestellt. Auch wenn die Einstiegshürden niedrig sind, muss natürlich im Vorfeld die Frage gestellt werden, ob das Hosting der Anwendung auf externen Servern akzeptabel ist.

Gephi

Das Desktop-Tool Gephi fokussiert sich auf die Abbildung komplexer Netzwerkstrukturen und wird in weiten Bereichen, von der Biologie über die Textanalyse bis zur Visualisierung von Facebook-Kontaktnetzwerks eingesetzt. Die Anwendung ist Open Source und wird aktuell u.a. durch die Teilnahme am Google Summer of Code stark weiterentwickelt. Der Vorteil des Programms liegt in der niedrigen Einstiegshürde, der Erweiterbarkeit durch diverse Plugins und den umfassenden Möglichkeiten Netzwerke zum Beispiel durch Clustering und diverse Filter zu analysieren.

Voraussetzungen

Alle genannten Anwendungen sind nichts ohne geeignete Daten. Der Weg dorthin, die Datengewinnung und -aggregation, ist ein eigenes Kapitel, aber am Ende gilt: Die Daten müssen strukturiert sein. Als Faustregel zur Visualisierung und der Datennutzung mit den hier genannten Helfern gilt daher: Liegt der Datensatz als JSON, XML, csv, tsv oder in ähnlichen Formaten vor, ist die erste Hürde bereits genommen. Je nach gewählter Anwendung und gewünschter Ausgabeform ist unter Umständen jedoch noch einiges an Vorarbeit und Tabellenjonglage nötig, um eine zur Weiterverarbeitung geeignete Datenbasis zu erhalten.

Über den Gastautor

Tobias Kut arbeitet als Online Redakteur in München und übernimmt für ausgewählte Projekte das Content Management. Seine Interessenschwerpunkte liegen in den Bereichen Open Source Content Management sowie Datenjournalismus und -visualisierung. Im Netz bloggt er unter www.tobiaskut.de und twittert als @OSandCMS

Bitte beachte unsere Community-Richtlinien

Eine Reaktion
Felix Stoll

Für Flex gibt es das Data Viz Framework <a href="http://www.axiis.org/&quot; Axiis, welches ebenfalls eindrucksvolle Visualisierungen möglich macht.

Du musst angemeldet sein, um einen Kommentar schreiben zu können.

Jetzt anmelden

Finde einen Job, den du liebst