Auseinandersetzung mit Form, Farbe und Ordnungsprinzipien, um Zusammenhänge in größeren Datenmengen sichtbar zu machen.
Thema: Datenvisualisierung
Die Daten werden ohne Zuhilfenahme von bildhaften Elementen (Piktogramme, Fotografien, …) interaktiv dargestellt. Alphanumerische Zeichen (Text, Zahlen) sollen so sparsam wie möglich verwendet werden. Umso wichtiger wird es, gezielt Farbe, Form und Position einzusetzen, um
Mengen sichtbar zu machen,
Kategorien zu kodieren,
Gruppen zu bilden,
Zeitabläufe nachverfolgbar zu machen,
…
Die Darstellung von Daten zwingt schon an sich zu einer parametrischen Denkweise. D.h. die grafischen Elemente müssen flexibel gedacht werden, so dass sie unterschiedliche Zahlenwerte und Bedeutungen annehmen können. Das Denken in Varianten ist also essenziell. Zudem erlauben unterschiedliche Gesamtdarstellungen neue Einblicke in die Zusammenhänge innerhalb der Daten. Durch Interaktion können weitere Zusammenhänge vom Nutzer entdeckt werden.
Große und komplexe Datenmengen nur mit simplen Formen wie Kreisen und dazu noch Farben darstellen. Was im ersten Moment sehr abstrakt und schwer umsetzbar klingt, war genau unsere Aufgabe im Kurs „Programmiertes Entwerfen 2”.
Aufgabenstellung
Die Aufgabe war es, sich einen Datensatz aus diversen Quellen zu suchen, zu diesem Datensatz fragen zu stellen, diese Fragen durch eigens erstellte Datengrafiken zu beantworten und das im Anschluss mit HTML, CSS und JS zu programmieren. Dabei gab es gewisse Einschränkungen wie die Komplexität des Datensatzes oder die Formen beziehungsweise die Darstellungsart der Datengrafik. So musste der Datensatz eine gewisse Tiefe und Umfang mit sich bringen und viele Darstellungen die bereits bekannt sind, wie Liniendiagramme, konnten wir mit der Hilfe unserer gegebenen Tools einfach nicht umsetzen.
Ideenfindung
Da es natürlich zu fast jedem Thema Datensätze gibt, wurde sehr viel recherchiert und aussortiert. So stand neben dem Datensatz über Videospiele, noch einer über Kryptowährungen oder einer über die Plattform „Twitch“ zur Verfügung. Jedoch war der Datensatz über Videospiele der einzige Datensatz, der die nötige Tiefe mit sich brachte.
Prozess
Es war sehr schnell klar was dargestellt werden soll. Da sich der Datensatz um Videospiel dreht und es viele Entwickler und Spieleplattformen gibt, wurde nochmals eine Überkategorie angelegt. So entstanden die „Bubbles“ in denen alle Spiele, von jeder Plattform von der jeweiligen Firma zusammengefasst wurde. SO gibt es die Nintendo „Bubble“, die Sony „Bubble“ und weitere. Es sollten 3 Datengrafiken entstehen und es war schon ziemlich schnell klar, dass eine Darstellung sich auf die veröffentlichten Spiele pro Jahr drehen soll, eine andere um die Genres pro Jahr und die letzte um die diversen Spieleplattformen pro Jahr.
Prototyp
Zum Schluss entstand dabei ein funktionsfähiger Prototyp. Alles hier wurde mit der Hilfe von HTML, CSS, JS, der Gmynd.js Library und chroma.js programmiert.
