Copyright

©Dimitri Klink

Bei der Datenvisualisierung habe ich mich dafür entschieden, die verschiedenen Einstellungsmöglichkeiten einer GoPro Hero 5 Black darzustellen. Ich habe die GoPro gewählt, da ich sie selber noch nicht oft benutzt habe und deswegen die vielfältigen Einstellungsmöglichkeiten nicht kannte.

Zunächst habe ich mir von der [GoPro Webseite](https://gopro.com „GoPro Webseite“) das dazugehörige [Handbuch](https://de.gopro.com/content/dam/help/hero5-black/manuals/HERO5Black_UM_ENG_REVB_Web.pdf „Handbuch“) heruntergelanden und es durchgearbeitet. Nachdem ich dann aber die Menüpunkte am Screen der GoPro durchgegangen bin, stellte ich fest, dass im [Handbuch](https://de.gopro.com/content/dam/help/hero5-black/manuals/HERO5Black_UM_ENG_REVB_Web.pdf „Handbuch“) nur ein Teil der Einstellungsmöglichkeiten vereinfacht abgebildet war und nicht die Realität widerspiegelte. Daraufhin habe ich angefangen, die tatsächliche Struktur mithilfe einer JSON Datei festzuhalten. Zunächst wollte ich jede variable Einstellungsmöglichkeit erfassen, merkte aber dann dass, wenn ich alle Parameter berücksichtige, ich manuell damit nicht fertig werde. Zudem würde jegliche Übersicht verloren gehen.

Nach einem Feedbackgespräch mit Prof. Constanze Langer entschied ich mich dafür auf einem Plakat nur die Struktur abzubilden und auf einem Zweiten ein paar ausgewählte Parameter mit allen Einstellungsmöglichkeiten, die für die Videoaufzeichnung entscheidend sind, abstrakt darzustellen.

Copyright

©Dimitri Klink

Etwa im selben Zeitraum lass ich auch den Artikel: [„The 38 best tools for data visualization“](http://www.creativebloq.com/design-tools/data-visualization-712402 „The 38 best tools for data visualization“) vom [creativebloq](http://www.creativebloq.com „creativebloq“). Dabei stieß ich auf [D3.js](https://d3js.org „d3.js“) und [RAWGraphs](http://rawgraphs.io „RAWGraphs“). [D3.js](https://d3js.org „d3.js“) ist eine Java-Script basierte Bibliothek, mit der es möglich ist, Datensätze automatisiert zu visualisieren. [RAWGraphs](http://rawgraphs.io „RAWGraphs“) ist eine Web-App, die den Umgang mit [D3.js](https://d3js.org „d3.js“) vereinfacht. Mit diesen beiden Tools war es mir möglich den Datensatz mit den ausgewählten Videoparametern und den verschiedenen Einstellungsmöglichkeiten automatisiert in einer kreisförmigen SVG-Grafik ausgeben zu lassen. Zu Beginn hatte ich hier noch Schwierigkeiten einen redundanzfreien Datensatz für die Web-App aufzubereiten.

Copyright

©Dimitri Klink

Nachdem alle Datensätze und Strukturen erfasst wurden und das Endformat bekannt war, begann ich in Illustrator das ersten der beiden Plakate zu setzen. Ich habe mich für eine einfache typografische Lösung mit einem Dahinterliegendem 12 spaltigen Raster entschieden. Vertikal sind die obergeordneten Menüpunkte aufgelistet und horizontal die dazugehörigen Untermenüpunkte. Eine vereinfachte piktografische Menüstruktur ist bereits im Benutzerhandbuch der GoPro abgebildet, deswegen entschied ich mich bewusst gegen diese Lösung.

Copyright

©Dimitri Klink

Für das zweite abstraktere Plakat habe ich die exportierte SVG-Grafik aus der [RAWGraphs](http://rawgraphs.io „RAWGraphs“) Web-App in genau dasselbe Raster eingefügt und bearbeitet. Da die radiale Grafik nur eine Hintergrundfarbe hatte und ich auf den zugehörigen Text verzichten wollte, mussten die verschiedenen Einstellungsmöglichkeiten durch die Farbe differenzierbar sein. Insgesamt waren 35 Farbtöne notwendig um die verschiedenen Parameter, die in sechs Gruppen und somit auch sechs Kreisen unterteilt waren zu unterscheiden.

Copyright

©Dimitri Klink

Nachdem ich für die Einstellungen zunächst komplett verschiedene Farben benutzt habe, merkte ich, dass es zu viel war und die Grafik nicht mehr harmonisch wirkte. Deshalb habe ich hier Ästhetik der Funktionalität übergeordnet und habe ausschließlich drei benachbarte Farbegruppen und deren unterschiedliche Farbtöne verwendet. Diese lassen sich nicht mehr so deutlich auf den ersten flüchtigen Blick unterscheiden, sehen aber viel harmonischer aus. Um den Farbcode zu entschlüsseln, war eine Legende unter der radial Farbcodierung notwendig, die ich im selben Stil des ersten Plakates setzte. Um eine weitere Verbindung zwischen den zwei Plakaten zu schaffen, habe ich nicht nur den gleichen Typografiestil verwendet, sondern auch das schlichte weiß als Hintergrundfarbe für beide Plakate benutzt, da sie gut mit der bunten Kreisgrafik harmoniert.

Ich bin mit dem Ergebnis meiner Datenvisualisierung relativ zufrieden. Ich hätte etwas mehr Zeit damit verbringen können eine besser differenzierbare Farbharmonie zu entwickeln und ein paar weitere komplexere Einstellungsparameter mit in die Kreisgrafik einzubeziehen, aber das könnte ich theoretisch in einer weiteren Plakatreihe tun und andere Wechselwirkungen darstellen.