Auseinandersetzung mit Form, Farbe und Ordnungsprinzipien, um Zusammenhänge in größeren Datenmengen sichtbar zu machen. Das Ergebnis ist ein programmierter, klickbarer Prototyp.
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.
Jedes Jahr wird ein sogenannter “World Happiness Report” veröffentlicht. Darin wird unter Anderem für die teilnehmenden Länder, mittels verschiedener Faktoren, ein “Happiness Score” errechnet. Dieser “Happiness Score” wurde in diesem Projekt verschiedenen Werten gegenübergestellt um mögliche Zusammenhänge sichtbar zu machen.
Datensatz
Zunächst musste ein passender Datensatz zusammengestellt werden, dazu wurde nach weiteren Daten gesucht, die Kontraste und interessante Zusammenhänge aufzeigen konnten. Am Ende bestand dieser aus 141 verschiedenen Ländern die die folgenden Daten besitzen:
Happiness Score
Population
geographische Position
Suizidraten
nicht religiöser Bevölkerungsanteil
Darstellungen
Nun musste für diese Daten geeignete Darstellungsmöglichkeiten gefunden werden.
Um einen möglichst verständlichen Einstieg zu bieten, wurde als Startscreen eine Kartendarstellung gewählt, die durch die typische Weltkarten-Verteilung der einzelnen Elemente, als solche erkannt wird.
Jedes Land wird hier mittels eines Kreises dargestellt. Die Größe der Elemente entspricht dabei der Population des jeweiligen Landes, während der “Happiness Score” einem Wert auf einer, dem Thema entsprechend gewählten, Farbskala entspricht.
Diese Darstellung ermöglicht einerseits die Verteilung von “Happiness” in einzelnen Regionen zu sehen und andererseits eine übergeordnete, globale Tendenz.
Der zweite Screen zeigt die bereits bekannten Elemente von der Karten-Darstellung, jedoch nach “Happiness Score” sortiert und unterteilt. Jedes Land ist sowohl mit einem Element links vertreten, das dem nicht religiösen Teil der Bevölkerung, und einem rechts, das wiederum dem religiösen Teil entspricht. Um die beiden Elemente zueinander zuordnen zu können, werden diese durch einen Hover hervorgehoben und, wie auch bei den anderen Darstellungen wird dabei der Name des Landes angezeigt.
Dadurch werden nicht nur wieder die Verteilung der gesamten Weltbevölkerung zu einem bestimmten Grad an “Happiness” gezeigt, sondern auch, ob es eine Korrelation zwischen besonders (nicht) religiös geprägten Ländern und einer gewissen “Happiness” gibt.
Als letztes gibt es noch eine Darstellung der Suizidraten in einem Land. Diesmal durch eine Animation, die von jedem farbigen Element ausgeht. Die Elemente entsprechen, sowie zuvor auch, je einem Land, und die Farbe dem jeweiligen “Happiness Score”, nach welchem die Elemente in dieser Darstellung auch wieder sortiert sind.
Je höher die Suizidrate in einem gewissen Land liegt, desto öfters wird von dem farbigen Element eine Animation ausgelöst.
Dies dient dazu mögliche Zusammenhänge zwischen einem gewissen Raum an “Happiness Scores” und zB.: sehr hohen oder niedrigen Suizidraten zu erkennen.
Code
Da diese Projekt nicht nur ein Prototyp in einem Design Tool, wie Figma sein sollte, wurde das ganze als Website programmiert. Daher floss auch entsprechend viel Zeit und Mühe dahinein Funktionen zu schreiben, die für ein funktionierendes Layout sorgen, unter anderem die Berechnung von Positionen um Abstände richtig einhalten zu können und das Bestimmen der Ländergrößen, sodass Überschneidungen verhindert werden.
Bei Interesse lässt sich der Code hier finden: https://github.com/Niklas-Flaig/NiklasFlaig_DarstellenSimulation
Kommentare
flo
Niklas
Niklas
Hinterlasse einen Kommentar