Author: dominik.bluemel

Dies ist Teil 2 meiner Erfahrung mit Flourish. Nachdem in Teil 1 schon klar wurde, dass Flourish wohl DAS perfekte Tool für interaktive Datenvisualiserungen ist, möchte ich mich hier genauer mit den nativen Animationsmöglichkeiten dieser Grafiken auseinandersetzen. Soviel vorweg: Auch die sind super!

Viele Wege führen nach Rom

Grundsätzlich kann man in Flourish über mehrere Wege an eine animierte Grafik kommen. Einerseits bieten ein paar Grafiken eine direkte Animation an, diese sind: Bar Charts, Line Charts, Pie Charts und diverse Sportgrafiken. Aber auch alle anderen können über Umwege animiert werden. Flourish bietet nämlich neben dem Standardoutput auch die Möglichkeit an eine “Story” zu bauen. Das bedeutet eine eingebettete Slideshow, durch die man ganz einfach mehrere verschiedene Grafiken auf einmal einbetten kann. Nimmt man aber immer wieder dieselbe Grafik und spult diese leicht verändert durch die Slideshow entsteht ebenfalls eine kleine Animation. Diese ist natürlich nicht so sauber wie die nativen Möglichkeiten, ist aber praktisch sollte man unbedingt etwas außerhalb der nativen Charts animieren wollen.

Flourish bietet außerdem die Funktion an verschiedene Grafiken direkt als Scrollytelling-Geschichte einzubetten. Dieses Feature ist aber kostenpflichtig und daher nicht für den Einzelanwender gedacht, weshalb ich dieses nicht ausprobieren konnte.

Animierte Linien und sich verschiebende Kreise

Für meinen Versuch habe ich auf beide Arten eine Animationsgrafik erstellt. Wie auch schon für interaktive Grafiken sind die Einstellungs- und Veränderungsmöglichkeiten der Charts quasi unendlich. Als erstes habe ich mich an einer nativen Animation versucht und dafür einen Line Chart Race mit den Daten aller Nationalratswahlen seit 1945 gefüttert. Das Ergebnis kann sich meiner Meinung nach sehen lassen und einerseits mit den Prozentergebnissen und andererseits mit der jeweiligen Rangfolge angesehen werden.

Als Slideshow habe ich die bereits in Teil 1 gezeigte Verteilung der Staatsbürgerschaften von in Österreich lebenden Menschen statt mit Blasen auf einem Donut dargestellt und die einzelnen Jahre hintereinander abspielen lassen. Sieht nicht so flüssig und dynamisch aus wie die native Variante, hat aber den Vorteil, dass der Leser jederzeit pausieren und weiter in die Tiefe gehen kann. Leider funktioniert diese Einbettung in WordPress nicht, weshalb ich nur den Link unten teilen kann.

Slideshow

Fazit

Flourish kann wirklich alles. Auch wenn sich die Slideshows nicht perfekt dafür eignen Animationen herzustellen, sondern eher dafür mehrere Grafiken um ein Thema geschickt zu verpacken, macht sich sogar diese Notlösung nicht schlecht. Die nativen Animationsgrafiken sind top, schnell, einfach und anpassbar. Einzig das Feature die Grafiken direkt in immersives Scrollytelling zu verpacken fehlt noch um nie wieder eine andere Software verwenden zu müssen, aber dazu gibt es ja immerhin viele andere Programme, die sich darauf spezialisiert haben. Dazu aber in den nächsten BlogPosts mehr. Mit Flourish endet die Suche nach weiteren Anwendungen zur Datenvisualisierung, denn es ist zu gut um es nicht zu benutzen.

Das dritte und letzte Online-Tool zur Datenvisualisierung, das ich mir angesehen habe ist Flourish, eine Canva-Tochter mit immensem Funktionsumfang. Diese hat mich auf allen Ebenen überzeugt.

Über Flourish

Flourish Studio ist ein kostenloses Online-Tool zur Datenvisualisierung aus dem UK. Es gibt zwar zwei Bezahlvarianten “Publisher” und “Enterprise”, diese sind jedoch bereits für größere Newsrooms und Organisationen gedacht und nicht für den Einzelanwender. Damit könnte man sich zum Beispiel eigens gebrandete Templates bauen, die die eigene CI beinhalten. Alles andere ist aber bereits in der Gratis-Version vorhanden, Veröffentlichung inklusive.

Im Grunde ist der Funktionsumfang von Flourish grenzenlos. Von einfachen Linien- und Barcharts über Karten, Scatterplots, Piktogramme, Wählerstromdiagramme bis zu Fußballaufstellungen und Heatmaps gibt es Templates für alles was das Herz begehrt. Das Beste daran: nicht nur die einzelnen Diagrammarten scheinen schier grenzenlos auch die Anpassungsmöglichkeiten gehen ins Unermessliche. Jede Farbe, jede Schriftart, jeder Zeilenabstand, jede Anordnung, jedes Pop-Up und jeder Hover sind von A-Z anpassbar. Aber damit nicht genug. Sogar dieser alte WordPress-Blog kann mit den Einbettungslinks von Flourish arbeiten und alle Grafiken behalten ihre Interaktivität. Während meines Tests habe ich mir keine einzige Grafik vorstellen können, die man nicht im Handumdrehen hätte erstellen können. Daten importieren, Zeilen und Spalten festlegen, formatieren, fertig.

Da Flourish aber nicht nur interaktive sondern auch animierte Grafiken und direkt in einem Guss entstehende “Daten-Geschichten” anbietet, möchte ich diesem Programm zwei BlogPosts widmen. In diesem hier werden zwei weitere Beispiele für interaktive Grafiken gezeigt, die mit bisherigen Softwares unmöglich gewesen wären. Die zugehörigen Daten habe ich einfach random vom StatCube der Statistik Austria geladen. Im zweiten Teil, schaue ich mir die Weiterführung dessen an, worum es in meiner Masterarbeit eigentlich gehen soll: Wie bekomme ich diese tollen Grafiken nun in eine fesselnde Geschichte. Aber dazu später mehr.

Piktogramme, Blasen und mehr

Als erstes habe ich mir ein Blasen Diagramm mit Unterkategorien genauer angesehen, in diesem habe ich die Bevölkerungsdaten Österreichs aus dem Jahr 2023 visualisiert. Darin zu sehen die Staatsbürgerschaft der österreichischen Bevölkerung, die großen Blasen demonstrieren Kontinente, die kleineren unterteilen diese. Durch Hovern über die Grafik, kann man genaue Zahlen auslesen und durch eine Selektion oben, kann man genauer auf einen Kontinent eingehen.

Im zweiten Schritt habe ich ein Piktogramm erstellt, das die österreichische Bevölkerung nach ihrem höchsten Bildungsabschluss aufschlüsselt. Durch hovern über die jeweiligen Kolumnen, kann man mehr Informationen erfahren, etwa die Aufteilung nach Geschlechtern.

Fazit

Flourish kann alles, und zwar wirklich alles. Hätte ich mit diesem Programm begonnen, hätte ich mir den ganzen Blog sparen können. Es ist unfassbar welche Power hinter dieser Gratis-Anwendung steckt. Inwieweit man mit Flourish nun auch den nächsten Schritt gehen und Grafiken animieren oder gar direkt in Storytelling integrieren kann, möchte ich als nächstes herausfinden. Bis dahin ist aber klar, ein weiteres Tool zur Datenvisualisierung braucht es nicht.

Das zweite Online-Tool, das ich mir in Hinblick auf meine Masterarbeit genauer angesehen habe ist Knight Lab. Soviel vorweg: Es war nicht gut.

Über Knight Lab

Knight Lab ist eine Initiative der amerikanischen Northwestern University und stellt einfach nutzbare Baukästen für digitales Storytelling zur Verfügung. Derzeit werden sechs verschieden Baukästen unterstützt. Diese sind: Juxtapose (bei dem man mithilfe eines Sliders Fotos vergleichen kann), Scene (das eine Geschichte im Google-Street-View Stil ermöglicht), Soundcite (das die Integration von Audio in Textabschnitten ermöglicht), Storyline (mit dem man Graphen interaktiv beschriften kann), StoryMap (mit dem man Punkte auf Karten mit Text versehen kann) und TimeLine (das wie man vermuten würde Geschichten mit einer zugrundeliegenden Timeline als Navigationsmöglichkeit anbietet). Wie auch schon in Datawrapper können alle Ergebnisse dann entweder als Fotos oder Embed-Code exportiert werden. Da für mein Thema, die Datenvisualisierung, im Grunde nur zwei der Baukästen Sinn machen (StoryLine und StoryMap) habe ich mir diese beiden genauer angesehen und ausprobiert. Die Ergebnisse waren erstaunlich schlecht.

StoryMap: Geschichten in Karten erzählen

StoryMap war von beiden Baukästen noch jener, der eher ein ansehnliches Ergebnis liefern konnte. Dabei kann man, ähnlich wie in Microsoft Powerpoint Slides bauen, die aus Bild, Titel und Text bestehen und diese dann über eine Adresse lokalisieren. Das Tool baut daraus dann eine interaktive Karte, mit der man entweder geführt von einer Slide auf die nächste kommt und auf der Karte sehen kann wo man sich gerade befindet, oder direkt auf der Karte an eine Stelle springen kann. Auch wenn das Ergebnis recht ansehnlich ist, Gestaltungsspielraum bleibt kaum. Weder die Farben, noch das Layout lassen sich groß verändern. Das Standard-Design ist klassisch, aber ist gerade in den Farben fad.

Als Topic habe ich mich für Fußball entschieden und versucht die teuersten Fußballer der Welt auf der Karte mit ihren Geburtsorten darzustellen. Das Ergebnis ist okay, gerade das Layout der Karte ist aber einfallslos und lässt sich nur in noch schlechtere Designs ändern. Da sich WordPress, wie auch schon bei Datawrapper, weigert die jeweiligen Embed-Codes schön darzstellen, habe ich die folgende Bildschirmaufnahme gemacht um die StoryMap zu zeigen.

Storyline: Beschriftungen eines Graphen

Das zweite Tool von Knight Lab, Storyline, soll Storytelling und Liniendiagramme vereinen, macht dies aber äußerst rustikal. Konnte man bei der StoryMap als eine der wenigen Einstellungen zumindest noch die Schriftart verändern bleiben individuelle Einstellungen hier komplett auf der Strecke, was schade ist, da das Standarddesign kaum unansprechender sein könnte. Auch die Funktionsweise ist eher unorthodox. Als Daten zugrunde liegt der Storyline ein Google Sheet, das man öffentlich freigeben und verlinken muss. In vier Spalten (Datum, Daten, Titel der Anmerkungen, Anmerkungen) gestaltet man dann die Storyline. Im Tool muss man dann nur noch zuweisen welche Spalten was beinhalten, mehr geht aber leider auch nicht. Alles in allem enttäuschend.

Als Thema habe ich hier die Preisentwicklung des Bitcoin recycled, da ich diese Daten sowieso schon vom Datawrapper Versuch hatte und ein Preis sich einfach gut visualisieren lässt. Für neue Datensätze, die ich in meinen zukünftigen Programmen verwenden kann, bin ich natürlich immer offen^^ Da sich diese Grafik in WordPress gleich gar nicht (und nicht nur schlecht) einbetten lässt, auch hier wieder ein Video.

Fazit

So gut und professionell Knight Lab auch scheint – angeblich würden die größten US-Medienhäuser es für ihre Geschichten nutzen – so schlecht und absolut unbrauchbar ist es in der Realität. Nicht nur Individualisierungsmöglichkeiten sind quasi kaum vorhanden, auch das Standard-Design ist unansprechend. Für mich ein klares No-Go in Hinblick auf meine weitere Arbeit.

In diesem Blogpost soll es um Datawrapper gehen, die erste Software, die ich mir im Zuge meiner Recherchen genauer angeschaut habe. Aber was ist Datawrapper überhaupt, was kann es, und was konnte ich damit realisieren? Ein Thread.

Über Datawrapper

Datawrapper ist ein deutsches Online-Tool zur Datenvisualisierung, das speziell für Journalisten und Medienhäuser entwickelt wurde. Durch die leichte Bedienbarkeit hat es sich über die letzten Jahre als DAS Tool für Journalisten positioniert und ist unter anderem bei Mediengranden wie der New York Times oder der Süddeutschen Zeitung in Verwendung. Datawrapper ist kostenlos (solange man zumindest mit einem kleinen Wasserzeichen in der Fußnote leben kann) und denkbar einfach. Die Funktionalität reicht von klassischen Charts aller Art (Balken, Linien, Scatterplot etc.) über Tabellen bis hin zu Karten, dabei sind alle Grafiken interaktiv und über ein Baukastensystem gut individualisierbar. Für mein Experiment habe ich mich an allen drei Arten versucht.

Tabellen in Datawrapper

Beweisstück A ist untenstehende Tabelle. Dieser zugrunde liegen Finanzdaten, die ich aus dem Web gescraped habe. Bilder sind über HTML tags integrierbar und die Daten selbst lassen sich entweder als Rohdaten, Linien oder Boxen in der Tabelle visualisieren. Im Grunde ist mir die Tabelle ziemlich genau so gelungen, wie ich sie mir vorgestellt habe, auch wenn die Formatierung der Bilder sehr nervenaufreibend war. Die Tabelle ist die einzige Grafik, die nicht interaktiv ist. Es gäbe aber auch kaum Daten, die nicht gezeigt werden.

Charts in Datawrapper

Beweisstück B ist die Grafik der Mandatsverteilung im neuen Nationalrat, via Dropdown-Menü kann zwischen der alten und neuen Verteilung gewechselt werden. Alles in allem eine sehr einfache Grafik, die als einzige wirklich in Minuten erstellt war – Download der Daten, Integration, Auswahl des Charts, einfärben der Flächen, fertig. Das Ergebnis ist basic, reicht aber im Alltag völlig aus.

Karten in Datawrapper

Beweisstück C, und damit auch das mit Abstand aufwendigste der drei Projekte ist die Visualisierung einer alten Recherche von mir über fehlende Busse im steirischen Amateurfußball und dem damit einhergehenden unnötigen CO2-Ausstoß. Die Grundkarte selbst war in Datawrapper bereits vorhanden, kann aber, sollte man eine sehr außergewöhnliche brauchen, hochgeladen werden. Die Lokalisierung der Punkte hat in meinem Fall über die Längen und Breitengrade der Orte funktioniert. Theoretisch kann Datawrapper aber auch eine Spalte mit Ortsnamen erkennen und selbst nach Adressen und Koordinaten suchen. Die Karte selbst ist dann völlig individualisierbar (Form, Größe und Farbe der Punkte, Hover-Effekte, Kategorien etc.). Das hat es für die Komplexität der Grafik dann doch recht einfach gemacht diese zu erstellen.

Fazit

Meine Erfahrung mit Datawrapper war durchwegs positiv, vom Upload der Daten über die finale visuelle Gestaltung läuft alles sehr smooth und intuitiv, zur Not gibt es auch ein paar Tutorials, die über Probleme hinweghelfen. Jedoch is Datawrapper nicht perfekt. Einerseits ist mit Datawrapper nur der Export als PNG oder als Einbettung möglich. Soll die Grafik interaktiv sein muss es also zwangsläufig die Einbettung sein und diese läuft, wie man an den beiden Grafiken oben sehen kann so naja. Zumindest in dieser Version von WordPress war es mir nicht möglich die Grafiken irgendwie zu skalieren, weder nach der Einbettung noch im Code, da WordPress meine iFrame Codes immer umwandelt. Ob da ein WordPress-Plugin abhilfe schaffen kann weiß ich nicht, zumindest für diesen Blog liefert Datawrapper aber nicht die besten Ergebnisse. Zweiter und viel definitiverer Nachteil ist aber der Funktionsumfang, während interaktive Grafiken sehr gut funktionieren, werden Animationen nämlich gar nicht unterstützt. Balken, die sich aufbauen, oder Fahrten auf einer Timeline sind also nicht möglich.

Vorwort

Eigentlich scheint die Masterarbeit noch in weiter Ferne, dennoch sind diese Zeilen (und neun weitere Blogposts) wohl unvermeidbar. Denn gerade für mich, als Quereinsteiger, gestaltet sich die genaue Themenfindung, so früh in einem neuen Studium, als sehr schwer. Deshalb habe ich mich dazu entschieden diese Blogposts zu nutzen, um zu probieren, um zu basteln, um zu downloaden und vielleicht auch um zu verzweifeln. Um Dinge zu machen, die ich sonst wahrscheinlich bis ins vierte Semester aufgeschoben hätte, weil ich ein chronischer Prokrastinierer bin. Keine dicken Wälzer, keine ewige Theorie: Ich will ins Tun kommen, und irgendwie bin ich auf diese Entscheidung stolz.

Thema

„Irgendwas mit Medien“, wollte ich damals vor vier Jahren studieren… „irgendwas mit Daten“, wäre derzeit wohl der passendste Titel für meine Masterarbeit – ein Kreis, von dem ich selbst nicht wusste, dass er sich so schließen würde. Im Grunde ist meine Auslegung aber klar: ich möchte weiterhin journalistisch arbeiten, ich möchte Stories bauen, die ins Auge springen und Leute mit meinen Geschichten fesseln. Dafür braucht es Animationen, Grafiken und Interaktivität. Meine drei ursprünglichen Themen waren daher mich näher mit Animationen für Erklärvideos auseinanderzusetzen, hinter verschiedene Tools zur Datenvisualisierung zu klemmen, oder Scrollytelling genauer unter die Lupe zu nehmen. In den Gesprächen mit Roman ist mir aber klar geworden, dass man diese Themen auch vermengen kann.

Derzeitiger Stand und damit auch Startschuss für die kommenden „Ausprobier“-Blogposts ist die Idee Animation mit Datenvisualiserungen zu verbinden, um etwa sich aufbauende Grafiken oder interaktive Karten zu bauen, die den Lesefluss erleichtern und komplexe Themen leicht aufbereiten.

Vorgehensweise

Die nächsten neun Blogposts sollen also davon handeln auf verschiedenste Arten die besten Datenvisualisierungen der Welt hinzuzaubern (oder es zumindest zu versuchen). Dazu würde ich drei verschiedene Herangehensweisen ausprobieren.

Plug and Play Lösungen

Bereits jetzt gibt es diverse Online-Tools die Top-Ergebnisse ohne Design- oder Codingkenntnisse versprechen. Als ersten Schritt erachte ich es für sinnvoll diese auszuprobieren, um ein Gefühl dafür zu bekommen, was einfach und kostengünstig machbar ist und vor allem auch ein Problembewusstsein dafür zu entwickeln was nicht geht und wo der Kreativität bei solchen Programmen ein Ende gesetzt wird.

Design Lösungen

Im zweiten Schritt möchte ich mich an zwei Programme wagen: After Effects und Blender. Ziel ist es durch die Standardfunktionen (oder im Falle von Blender auch Plugins) zu versuchen jene Probleme die bei Online-Tools auftauchen zu beseitigen und selbst Visualisierungen von Grund auf zu bauen. Die Wahl der beiden Programme liegt rein am Curriculum, da beide Programme sowieso in diversen Kursen gelehrt werden und es zeittechnisch schwierig werden könnte weitere Applikationen für mich zu entdecken.

Coding Lösungen

Im letzten Schritt möchte ich mich genauer mit Coding zur Datenvisualisierung auseinandersetzen. Meine Präferenz dahingehend wäre R, jedoch beginnt bald die Lehrveranstaltung Designing with Code und zum Zwecke der Einfachheit werde ich mich vermutlich an die dort verwendete Software anpassen um zwei Fliegen mit einer Klappe zu schlagen und auch zeittechnisch nicht zu sehr auszuarten.

Fazit

Alles in allem werden auf diesem Blog in Zukunft also viele Erkenntnisse und Enttäuschungen im Umgang mit allen wichtigen Programmen rund um Datenvisualiserungen geteilt werden. Über Ideen, falls jemand schon genauer mit etwas gearbeitet hat, freue ich mich natürlich sehr!