Olympic Medalists

Olympic Medalists

Sandy Kübler

Der Fokus des Kurses Programmiertes Entwerfen 2 liegt auf der Auseinandersetzung mit Form, Farbe und Ordnungsprinzipien, um Zusammenhänge von Datenmengen sichtbar zu machen. Ziel ist die Codierung einer interaktiven Datenvisualisierung eines zuvor gewählten Datensatzes mit Hilfe von JavaScript und jQuery. Für dieses Projekt wurden außerdem die gmynd.js und chroma.js Libraries verwendet.


Programmiertes Entwerfen 2

IG2


Supervision
Prof. Hartmut Bohnacker

Datenvisualisierung

Themenfindung

Der erste Schritt des Projektes bestand darin, einen geeigneten Datensatz zu finden. Thematisch waren keine Grenzen gesetzt, jedoch sollte dieser komplex sein und genügend Parameter besitzen. Nachdem ich einen Pool an interessanten Themen, aber unzureichenden Daten hatte, stieß ich auf den Datensatz “120 years of Olympic history”. Überzeugt hatte er mich aufgrund der vielen Dimensionen und den Möglichkeiten, die sich daraus ergeben.

Datensatz

Der Datensatz behandelt die modernen Olympischen Spiele der letzten 120 Jahre, von Athen 1896 bis Rio 2016. Ingesamt sind es 271.117 Einträge zu Athleten, die an diesen Spielen teilnahmen, aufgeteilt in 15 Spalten. Diese riesige Datenmenge bereitete mit anfangs große Probleme, weshalb ich damit begann, den Datensatz zu bereinigen. Ich entschied zudem, mich nur auf die Medaillengewinner:innen zu beschränken und konnte die Anzahl der Einträge auf 39.784 reduzieren. Anschließend entfernte ich lückenhafte Daten und solche, die für meine Datengrafik nicht benötigt wurden und konvertierte den Datensatz von einer CVS-Datei in eine JSON-Datei. Somit blieben folgende Parameter übrig:

  • ID
  • Sex
  • Age
  • Height
  • Weight
  • NOC
  • Year
  • Season
  • City
  • Medal

Da ich für eine geplante Darstellung Kontinentaldaten benötigte, fügte ich diese mitHilfe der mergeData()-Funktion hinzu und erhielt diesen Datensatz:

Konzept

Nachdem der Datensatz erfolgreich aufbereitet und reduziert wurde, begann die Suche nach Zusammenhängen und daraus resultierenden Fragen. Das Ziel war es, sowohl allgemeine Informationen zu den Olympischen Spielen einzubeziehen, als auch gezielt den Fokus auf die Medaillengewinner:innen zu setzen.

Es entstanden erste Entwürfe, die als Grundlagen für weitere Visualisierungen dienten und nach und nach mit zusätzlichen Informationsebenen ergänzt wurden.

Erste Skizzen zu den drei Screens
Erste Entwürfe zu den drei Screens
Screen 1: Spirale

Grundidee:

Die Idee hinter diesem Screen ist die Darstellung aller bisherigen Olympischen Spiele. Nach einer ersten Auseinandersetzung mit meinem Datensatz fiel mir auf, dass sich die Anzahl der Medaillengewinner:innen über die Jahre stark erhöht hatte und es auch Ausfälle gab. Zudem änderte sich der Rhythmus, in dem die Sommer-und Winterspiele stattfanden.

Anfangs basierte die Anordnung der Punkte auf einem Kreis, jedoch sind die Olympischen Spiele kein sich wiederholender Zyklus. Heißt, auf das Spiel in Rio der Janeiro 2016 folgt nicht das Spiel in Athen 1896. Aus diesem Grund ordnete ich die Punkte in einer Spirale an.

Für die programmatische Umsetzung der Spirale verwendete ich eine forEach-Schleife, um jeden Punkt zu zeichnen. Dafür definierte ich einen Mittelpunkt und den Winkel, in dem die Punkte angeordnet werden sollen. Deren Radius wird über den game.count festgelegt, welcher jedoch nicht die Anzahl der Spiele meint, sondern die Anzahl der Medaillengewinner:innen. Durch eine if-Abfrage der Saison werden Sommer- und Winterspiele getrennt dargestellt, sodass sie sich nicht überlappen.

Screen 2: Karte

Grundidee:

Dieser Screen soll die Teams zeigen, die an allen Olympischen Spielen teilgenommen haben, die Anzahl der Gewinner:innen in diesen Teams und welche Medaillen sie gewonnen haben. Dafür wählte ich eine Kartenansicht, da so die Verteilung am besten zu sehen ist. Die Farbcodierung beruht auf dem Anteil der Medaillen eines Teams.

Da zwischen einer Ansicht der Sommer-und Winterspiele gewechselt werden kann, gibt es die Funktion drawSummerMap() und drawWinterMap(). Auch für diese Codierung wählte ich eine forEach-Schleife, bei der der Radius der Punkte ebenfalls von der Anzahl der Gewinner:innen bestimmt wird.

Da die Position der Punkte auf der longitude und latitude eines jeden Teams bzw. Landes beruht, habe ich insbesondere Varianten der Farbkodierung gebildet. Hier testete ich verschiedene Farbräume (RGB, CMY und Lab) aus, sowie unterschiedliche Helligkeitsabstufungen. Letztendlich entschied ich mich für den Lab-Farbraum und eine sehr geringe Helligkeitsabstufung, da ich die Brillanz der Farben erhalten wollte.

Screen 3: Scatter Plot

Grundidee:

Dieser Screen soll die Eigenschaften der Gewinner:innen zeigen und die Verteilung von Männern und Frauen. Dafür standen drei Parameter zur Verfügung:

  • Height
  • Weight
  • Age

Überhalb der x-Achse sind alle weiblichen Athleten anzutreffen, unterhalb alle männlichen. Der x- und y-Achse sind Parameter zugeordnet, welche sich je nach Ansicht wechseln. So gibt es drei Möglichkeiten:

  1. Alter (x) – Größe (y)
  2. Alter (x) – Gewicht (y)
  3. Gewicht (x) – Größe (y)

Für die Umsetzung gliederte ich die Gewinner:innen zuerst in 20 Segmente. Dabei werden Personen, die identische Eigenschaften (Größe, Gewicht oder Alter) haben in ein Segmente zusammengeführt.

Um diese segmente in einer forEach-Schleife einzubauen und sie als Parameter für die x- oder y-Achse zu verwenden, gibt es die Funktionen getDataSubset() und addToFilters(). Mithilfe von addToFilters() können die Parameter festgelegt werden, die für eine Ansicht benötigt werden (z.B. Alter und Größe). Anschließend werden diese currentFilters zusammen mit dem Geschlecht und gewissen Berechnungen kumuliert, sodass ein neues Array an Daten entsteht.

Dieses Array wird dann für die letzte Darstellung verwendet, wie hier für die Funktion drawAgeAndHeight().

Insgesamt gibt es drei Ansichten, die über die oben genannten Parameter bestimmt werden. Zwei Parameter sind der x-und y-Achse zugeordnet, der dritte Parameter bestimmt die Farbkodierung.

Farben und Farbcodierung

Da die Punkte auf allen Screens unterschiedliche Bedeutungen besitzen, ist auch die Farbcodierung sehr individuell.

Screen 1:

Die Farben des ersten Screens sind inspiriert von den Olympischen Ringen. Die Olympischen Spiele fanden auf insgesamt vier Kontinenten statt, jedem der vier Kontinente ist eine Farbe zugeordnet. Diese sollten ein harmonisches Gesamtbild erzeugen, jedoch klar voneinander zu unterscheiden sein.

Screen 2:

Wie vorhin bereits erwähnt, basieren die Farben des zweiten Screens auf einer Farbmischung. Diese Farbmischung wird durch die Anzahl an Medaillen, die ein Team gewonnen hat, beeinflusst. Jeder Medaille wurde eine Grundfarbe zugewiesen, nach Vorbild des CMY-Farbraumes. So ist Gold ein goldähnlicher Gelbton, Silber ein kühles Blau und Bronze ein leuchtendes Magenta. Für die Farbwiedergabe wird die chroma.js Library verwendet, sodass eine Umwandlung der Farben in den Lab-Farbraum möglich ist. Dieser wird benötigt, um die Leuchtkraft der Farben ohne großen Aufwand abzuschwächen. Je nachdem wie viele Gold- Silber oder Bronzemedaillen ein Team gewonnen hat setzt sich eine individuelle Farbe aus den Grundfarben zusammen.

Screen 3:

Der Farbumfang und die Codierung des letzten Screens ist weitaus einfacher und reduzierter. Hier wird, unter Verwendung von chroma.js, eine einzige Farbe in fünf Helligkeitsabstufungen unterteilt, um den dritten Parameter zu visualisieren. Um eine Doppelbelegung der Farben und eine daraus resultierende Verwirrung zu vermeiden, entschied ich mich für einen hellen und leuchtenden Rotton.

Typografie

Bei der Wahl der Typografie entschied ich mich für die “Caros” in den Schriftgrößen 30, 24 und 18pt. Sie überzeugte mich aufgrund ihres klaren Schriftbildes und der guten Leserlichkeit. Zudem basiert sie auf geometrischen Grundformen, was ich aufgrund der reinen Verwendung von Kreisen in meiner Datengrafik sehr passend fande.

Interaktion und Animation

Um Betrachter:innen der Datengrafik Aufschluss über die Informationen zu geben, welche sich hinter den Punkten verbergen, erscheint bei einem Mouseover in der linken unteren Ecke Text. Dieser Text ist auf allen drei Screens anzutreffen. Für ein zusätzliches visuelles Feedback sind die Punkte zudem animiert. Sobald ein Mouseover stattfindet, vergrößern sie sich leicht.

Prototyp

Das fertige Ergebnis ist hier zu sehen: