Visualisierung

Moodboard
Nachdem ich mich mit meinen Daten beschäftigt hatte, sind die ersten Skizzen entstanden. Zur Inspiration habe ich auch nach bereits vorhandenen Visualisierungsmöglichkeiten gesucht und mir ein Moodboard erstellt.

Skizzen

Ich habe dann begonnen, weitere Skizzen in Figma umzusetzen, um auch direkt mit Farben zu arbeiten und um es sich besser vorstellen zu können. Hierbei habe ich zuerst mit Scatter Plots herumprobiert und versucht, einige Parameter darzustellen, indem ich die Transparenz, die Farbe, die Größe und die beiden Achsen genutzt habe. Da ich jedoch noch nicht mit den echten Daten gearbeitet habe, stimmen die Werte hier noch nicht. Ich habe dann auch gemerkt, dass es mit den realen Werten in dieser Ansicht nicht viel Sinn ergibt, da viele Datenpunkte fast an den gleichen Stellen liegen würden und das Gesamtbild dadurch nicht übersichtlich und sinnvoll wäre. Nachdem ich diese Idee verworfen habe, habe ich mir nochmal genauer Gedanken darüber gemacht, wie ich so viele Parameter wie möglich in einer sinnvollen Ansicht darstellen kann.

Finale Idee

Dabei kam ich dann auf meine finale Idee, die Parameter, für die ich mich entschieden habe, übereinander angeordnet wie eine Art gestapeltes Balkendiagramm darzustellen. Jedoch sollen es keine Balken sein, sondern Kreise, um sie besser miteinander vergleichen zu können. Ich habe mich entschieden, die Länder ebenfalls als Punkte anzuzeigen, welche in einer Linie nach dem Score geordnet werden. An diesen Länderpunkten sollen sich dann die Parameterpunkte anordnen. Da ich positive (social support, freedom, positivity) und negative (corruption, negativity) Parameter habe, habe ich mich entschieden, die positiven oberhalb der Länderpunkte zu platzieren und die negativen separat nach unten. Somit erkennt man auch auf den ersten Blick, welches Land mehr negative Punkte hat und welches mehr positive. Daran kann man auch gleich Ausreißer erkennen, wenn ein Land zum Beispiel viele negative Punkte hat und trotzdem weit vorne im Score steht oder andersherum.

Diese Ansicht zeigt jeweils immer ein Jahr und man soll zwischen den verschiedenen Jahren mithilfe von Jahresbuttons wechseln können. Außerdem können die Parameter durch die Legende angeklickt werden, um den jeweiligen Parameter gesondert ansehen zu können. Dabei werden für eine bessere Vergleichbarkeit der Länder die jeweiligen Punkte an den Länderpunkten in einer Linie angeordnet.

Ich habe bereits in dieser Phase mehrere Farbvarianten ausprobiert. Das Ziel war, die negativen Parameter auch nochmal durch Farbe von den positiven zu unterscheiden. Außerdem sollten die Länderpunkte, welche nach der Platzierung des Happiness Scores angeordnet sind, eine Farbskala besitzen, die erkennen lässt, welche Länder den besseren Score haben und welche in der Platzierung hinten liegen. Zudem war mein Plan, später noch eine weitere Ansicht zu haben, auf der dieselben eingefärbten Länderpunkte auf der Weltkarte angeordnet sind. Besonders da war es wichtig, dass die Farben so gewählt sind, dass man erkennt, welche Länder einen guten oder schlechten Score haben. Dabei sollten auch keine Farben untergehen.

Nachdem ich einige Farbvarianten erstellt hatte, habe ich mich zuerst einmal für diese Farbvariante entschieden und mit dieser angefangen zu programmieren:

Hierbei habe ich mich für eine Farbskala von Gelb über Hellgelb, Helllila, Lila bis zu Dunkellila entschieden. Hier hat mir besonders gut gefallen, dass man direkt erkennt, dass die gelblichen Punkte positiver sind als die lila Punkte. Außerdem haben alle Farbabstufungen einen sehr guten Kontrast zueinander und können gut unterschieden werden.

Anfangs wollte ich einen hellen Hintergrund haben, aber ich habe festgestellt, dass durch den dunklen Hintergrund die Farben viel intensiver und leuchtender wirken. Das hat auch den Kontrast der einzelnen Farben untereinander verbessert, weshalb ich dann zu einem dunklen Hintergrund umgestiegen bin.

Nachdem ich die erste Ansicht auch durch die Programmierung umgesetzt hatte, habe ich mich nochmal den Farben gewidmet. Das Problem war, dass die Parameterpunkte auch in Lila- und Gelbtönen gehalten waren, da die Idee war, auch hier diese Farben für positiv und negativ zu nutzen. Allerdings habe ich gemerkt, dass dies zu Verwirrung führen könnte, da zum Beispiel “Corruption” fast die gleiche Farbe hatte wie die hintersten Länderpunkte. In meiner Legende war diese Farbe dann mit “Corruption” beschriftet. Das hätte zu Missverständnissen führen können, da die hinteren Punkte ja auch diese Farbe hatten, aber allgemein nicht direkt etwas mit Korruption zu tun haben. Deshalb war das Ziel, für die Länderpunkte und die Parameter zwei unterschiedliche Farbschemata festzulegen. Wenn ich die Farbskala der Länderpunkte verändert habe, musste ich auch immer parallel schauen, ob diese Farben dann auch auf der Weltkarte so funktionieren.

Nach vielen Versuchen, die Farben anzupassen, fiel die Entscheidung auf diese Farben:

Tatsächlich habe ich für die Länderpunkte eine leicht überarbeitete Farbskala vom Anfang gewählt, weil diese am besten auf der Weltkarte funktioniert hat. Die positiven Parameter sind in Orangetönen gehalten, die untereinander einen guten Kontrast haben, sodass man die Grenze zum nächsten Parameter gut erkennen kann, ohne dass die Farben ineinander laufen. Die negativen Parameter sind in Blautönen. Somit wird auch die Unterscheidung von positiv und negativ noch durch die warmen und kalten Farben unterstrichen. Auch im Zusammenhang mit den Farben der Länderpunkte machen diese Farben Sinn, da sie im weitesten Sinne wie Mischfarben der Parameter funktionieren. Sind die Länder weiter hinten in der Platzierung, haben sie wahrscheinlich mehrere negative, also bläuliche Punkte, was zu einem Lila führt. Das gleiche gilt für die weiter vorne Platzierten und die orangenen und gelben Punkte.

Platzierungen und Buttons

Im nächsten Schritt habe ich die Legende überarbeitet und die Jahresbuttons, die Überschrift sowie den Toggle-Button für die weitere Ansicht hinzugefügt.

Am Anfang waren diese Elemente noch sehr unordentlich platziert. Ich habe dann die Punktegrafik statt mittig nach unten verschoben und die weiteren Elemente ordentlich im oberen Bereich des Bildschirms angeordnet. Somit sind die klickbaren Elemente (Legende, Jahreszahlen, Toggle-Button) in guter Reichweite, um durch die Grafik zu navigieren. Außerdem habe ich die Jahresbuttons schlichter gehalten, die Konturen entfernt und die Schriftfarbe grau gewählt. Wenn ein Jahr ausgewählt ist, ändert sich die Schriftfarbe in Weiß, um klar zu zeigen, in welchem Jahr man sich befindet.

Wenn man über die Länderpunkte fährt, erscheint durch das Hovern ein Tooltip, in dem der Ländername und der Happiness Score angezeigt werden. Hier habe ich mich gezielt dafür entschieden, nur diese zwei Informationen anzuzeigen, sodass man nicht von Informationen erschlagen wird.

Für die Weltkarte habe ich die Länderpunkte, wie bereits erwähnt, in denselben Farben wie zuvor gehalten. Hier war das Ziel, schnell einen guten Überblick über die Länder und ihre Platzierung zu erhalten. Durch die geografische Platzierung kann man auch direkt Bereiche erkennen, in denen hauptsächlich Länder mit einem hohen Score oder einem niedrigen Score liegen. Dadurch kann man auch sehr gut Ausnahmefälle erkennen, wenn in einem Bereich hauptsächlich dunkellilafarbene Punkte zu sehen sind und dann mittendrin ein gelber Punkt liegt oder andersherum. Da man hier am besten den ersten Überblick über mein Thema bekommt, habe ich mich dann dazu entschieden, diese Ansicht als meine erste festzulegen und die andere Ansicht als “Details” durch den Toggle-Button als zweite Ansicht.

Auch hier befinden sich wie in der anderen Ansicht meine Legende und der Toggle-Button an derselben Stelle. Die klickbaren Jahreszahlen sind jedoch unten mittig platziert, da sie in dieser Ansicht die Hauptinteraktionselemente sind.

Bei der Weltkarte habe ich mir dann überlegt, was das Interessanteste ist, was man bei meinem Datensatz sehen will. Das wäre, wie sich der Score für die einzelnen Länder verändert hat. Hat sich ein Land verschlechtert oder verbessert? Wo liegen große Unterschiede zwischen den verschiedenen Jahren? Deshalb habe ich überlegt, wie ich das am besten darstellen kann. Das Jahr 2023 ist mein aktuellstes Jahr, weshalb es am interessantesten ist, wie sich die Länder von den jeweiligen Jahren zum aktuellsten verändert haben. Dafür habe ich die Differenz des Scores vom jeweiligen ausgewählten Jahr zu 2023 ausgerechnet und in Form von leicht transparenten Konturen um die Länderpunkte dargestellt. Sie wirken wie ein Schein um die Punkte. Wenn die Differenz positiv ist, es sich also verbessert hat, hat die Kontur die Farbe Gelb. Hat sich der Score verschlechtert, hat die Kontur die Farbe Lila. Durch die Transparenz sind die Länderpunkte immer noch gut erkennbar, auch wenn sich Konturen überlappen. Da es besonders interessant ist, welche Länder eine besonders große Differenz haben, habe ich die Konturstärke angepasst. Die Länder mit einer großen Differenz haben eine größere Kontur, Länder mit einer sehr geringen Differenz eine kleinere. Dadurch stechen die Länder mit größeren Veränderungen hervor.

Durch das Hovern über die Länderpunkte erscheint hier ebenso ein Tooltip, im gleichen Stil wie in der anderen Ansicht. Hier wird immer der Score von 2023, der Score des ausgewählten Jahres und die Differenz angezeigt.