18.02.2014

Tools für interaktive Grafiken

Michael Hörz stellt Datawrapper, Google Charts, easel.ly und  infogr.am vor.


Lange hatten Journalisten bei Online-Infografiken keine große Wahl: Entweder mussten sie technisch sehr versiert sein oder Tools verwenden, die oft überfrachtet oder ästhetisch grenzwertig waren. Inzwischen gibt es eine Reihe von Alternativen.


Datawrapper

Für die schnelle Visualisierung einer kleinen Tabelle bietet sich Datawrapper an, hinter dem die Datenjournalisten Mirko Lorenz und Nicolas Kayser-Bril sowie der Visualisierungs-Spezialist Gregor Aisch stehen. Getragen wird Datawrapper vom Bildungswerk der Zeitungen (ABZV).

Die Arbeit damit ist simpel. Man beginnt damit, den gewünschten Teil einer Tabelle zu kopieren und in das Anfangs-Feld von Datawrapper einzufügen („Daten hochladen“). Mein Beispiel zeigt die Altersverteilung aller Bundestagskandidaten 2013 in 5-Jahresgruppen. Die Daten werden als Tabelle erkannt und können visualisiert werden. In meinem Beispiel ist die erste Möglichkeit, ein horizontales Balkendiagramm, genau richtig. So lässt sich die Altersverteilung auf einen Blick erkennen: Die meisten Kandidaten sind zwischen 1961 und 1965 geboren.


Die Anzahl der Möglichkeiten und Einfärbungen ist bewusst reduziert, etwa auf Balken- und Tortendiagramme oder Verlaufslinien. Bei Bedarf lassen sich die Farben aber schnell selbst anpassen. Nun fehlt noch ein Beschreibungstext, der kurz erklärt, was hier zu sehen ist. Das ist besonders bei Angaben zu den Einheiten oder bei mehreren Quellen wichtig.

Im letzten Schritt geht es zum „Veröffentlichen“. Hier lässt sich die Größe der Grafik noch einmal einfach anpassen. Das Wichtigste aber ist der Code-Schnipsel, mit dem sich die Grafik als iFrame in so ziemlich jede Seite einbetten lässt.


Google Charts

Auch Google bietet mit Charts zahlreiche Visualisierungsmöglichkeiten. Das Verfahren setzt gewisse HTML-Kenntnisse voraus, allerdings keine zu großen. In einer schnellen Einleitung dokumentiert Google, wie sich eine Tortengrafik erstellen lässt – und wie daraus schnell ein Balkendiagramm wird. Der Nutzer ersetzt einfach die vorgegebenen Werte in dem Code-Schnipsel durch seine eigenen. Das folgende Beispiel habe ich in wenigen Minuten nach der verlinkten Google-Vorlage erstellt:

Mit einer winzigen Änderung wird aus der Torte ein Balkendiagramm. Insgesamt reichen die Möglichkeiten deutlich weiter, so lassen sich etwa Visualisierungen mit Daten erstellen, die direkt aus Google-Tabellen oder anderen Quellen kommen.


easel.ly

Das Tool easel.ly ist geeignet für das einfache und ansprechende Umsetzen bestimmter Infografiken. Vor allem Abläufe und Flussgrafiken (Flowcharts) beherrscht es gut, weniger gut eignet es sich für die Visualisierung von Zahlen. Der Ablauf ist sehr simpel: Eine ziemlich große Reihe von Standardvorlagen („Vhemes“ = Visual Themes, Beispiel) lässt sich auf die Online-Arbeitsfläche ziehen und anpassen. Jedes Symbol kann man durch Anklicken anpassen oder auch entfernen. Ebenso kann man weitere Symbole und Piktogramme hinzufügen. Am Ende der Bearbeitung speichert man die Grafik online und kann sie per HTML-Schnipsel einbetten.

Das System easel.ly hat ganz klar seine Grenzen in der grafischen Korrektheit. Denn Symbole werden nicht automatisch skaliert, wenn man den zugrundeliegenden Zahlen ändert. Vielmehr ist dies völlig unabhängig voneinander, wie etwa die Vorlage „Oil“ demonstriert. Die Öltropfen für den Verbrauch pro Kontinent sind nahezu gleich groß, obwohl sich die Werte deutlich unterscheiden.


infogr.am

Wer nun Daten in umfangreicheren Infografiken darstellen will, sollte statt easil.ly lieber infogr.am verwenden. Die Arbeit damit ist ähnlich an wie mit datawrapper.de und easil.ly. Daten lassen sich leicht eingeben, die entsprechenden Elemente sind durch direktes Anklicken veränderbar. Infogr.am setzt auf eine Grundweiche zwischen Infografiken und Visualisierungen. In beiden Fällen kann man immer in das Daten-Menü wechseln, ein deutlicher Unterschied zu easil.ly.

Als Beispiel habe ich eine – nicht völlig ernst gemeinte – Infografik mit einer Reihe von Daten zur Lebenserwartung und Gesundheitsdaten erstellt.

Auch infogr.am hat seine Grenzen, diese zeigen sich etwa bei der eingefügten Karte von absoluten Gesundheitsausgaben pro Kopf. Die Farben richten sich nicht nach der Höhe des Werts, sondern nach der Reihenfolge der Tabelle. Die Farben sind anpassbar, jedoch ist das bei einer größeren Zahl von Ländern ganz und gar nicht sinnvoll – das sollte automatisch funktionieren. Die anderen einfügbaren Visualisierungselemente funktionieren gut, wenn man von der Farbwahl absieht.

Neuerdings beherrscht auch Datawrapper Kartendarstellungen, allerdings ist dieses Element offiziell noch in der Live-Erprobung. Brauchbare Ergebnisse produziert es jetzt schon, der Ablauf ist aber noch nicht so glatt.

Insgesamt zeigen diese Beispiele: Wenn man in Grundzügen mit Daten umgehen kann und die Darstellung ein wenig nachjustiert, ist einiges möglich ohne einen Webdesigner oder Grafiker bemühen zu müssen.

0 Kommentare zu diesem Artikel


  1. Mit Easel.ly (http://textspielnet.wordpress.com/2013/11/21/grafiken-gestalten-im-netz-teil-3-infografiken-erstellen-mit-easel-ly/) und Infogr.am (http://textspielnet.wordpress.com/2013/11/29/grafiken-gestalten-im-netz-teil-4-diagramme-erstellen-mit-infogr-am/) habe ich mich auch schon ausführlich auseinandergesetzt. Für Infografiken kann ich aber auch die Tools Cacoo und Pictochart empfehlen. Infogr.am gibt für meinen Geschmack zu wenig Gestaltungsfreiheit. Pictochart dagegen nutze ich recht gern.