Fifa World Cup
In dem Kurs „Programmiertes Entwerfen 2“ ging es darum, Zusammenhänge größerer Datenmengen mithilfe von Form, Farbe und Ordnungsprinzipien sichtbar zu machen. Dabei war wichtig, die Daten ohne Zuhilfenahme von bildhaften Elementen interaktiv darzustellen. Alphanumerische Zeichen wie Text und Zahlen sollten so sparsam wie möglich verwendet werden. Umso wichtiger war es, gezielt Farbe, Form und Position einzusetzen.
Das Ziel
Das Ziel des Kurses bestand darin, eine interaktive Datenvisualisierung zu konzipieren, welche mindestens drei verschiedene Darstellungen des Datensatzes beinhalten sollte. Dabei war es von Bedeutung, die einzelnen Seiten interaktiv miteinander zu verknüpfen. Die Website wurde mit HTML, CSS und Javascript programmiert. Nach einigen kleinen „Vorübungen“ musste ein geeigneter Datensatz gefunden werden, welcher genügend Parameter beinhalten sollte, um interessante Grafiken darstellen zu können.
Datensatz
Da ich ein begeisterter Fußballfan bin und selber auch gerne Fußball spiele, entschied ich mich dazu, einen Datensatz auszusuchen, welcher dementsprechende Daten beinhaltet. Dabei stieß ich auf einen Datensatz, der jedes einzelne Fußball WM-Spiel mit dazugehörigen Daten impliziert. Dazu gehörten das Datum, Stadion, Stadt, Organisator, Zuschaueranzahl, Tore und Teamnamen. Im Laufe des Projektes wurde dieser Datensatz durch Längen- und Breitengrade und Durchschnittstemperatur des jeweiligen Landes vervollständigt.
Konzept
Im ersten Screen entschloss ich mich dazu, die unterschiedlichen Teilnahmeanzahlen der einzelnen Länder darzustellen. Im zweiten Screen habe ich mich dazu entschieden, das Sieg-Niederlage-Unentschieden-Verhältnis des jeweilig ausgewählten Landes darzustellen. Dabei wurde stets das WM Jahr berücksichtigt, da sich das Verhältnis der einzelnen Länder im Laufe der Partizipationen änderte. Im dritten Screen entschied ich mich für eine Darstellung, welche aufzeigen soll, ob das jeweilige Land bei warmen Temperaturen besser oder schlechter gespielt hat und ob die Temperatur ausschlaggebend für die Leistung war.
Weltkarte
Auf dem ersten Screen werden alle Länder angezeigt, die jemals an einer Weltmeisterschaft teilgenommen haben. Die Größe der Kreise sagt dabei aus, wie oft das jeweilige Land schon teilgenommen hat. Bewegt man den Slider, verändert man den Zeitraum der Weltmeisterschaften. Man sieht wie sich die Größe der Kreise ändert oder neue Kreise dazu kommen. Hovert man über einen Kreis also über ein Land, sieht man unten links neben dem Slider welches Land sich dort befindet.
Sieg & Niederlage
Klickt man auf eines dieser Länder, bekommt man das Sieg- Niederlage- Unentschieden-Verhältnis des Landes mithilfe eines „Donut-Diagramms“ angezeigt. Verändert man den Zeitraum, sieht man auch wie sich das Verhältnis des Landes verändert.
Temperatur der Länder
Klickt man auf das Donut-Diagramm, gelangt man zum dritten Screen. Hier werden auf der x-Achse wieder alle Länder angezeigt, die jemals bei einer WM teilgenommen haben, jedoch sind diese von links nach rechts anhand der Durchschnittstemperatur sortiert. Auf der y-Achse befinden sich die WM-Austragungsorte, ebenfalls sortiert von kalt (unten) nach warm (oben). Somit erkennt man auf den ersten Blick, ob die Temperatur die Leistung des jeweiligen Landes beeinflusst hat.
Partner
-
Kurs
Programmiertes Entwerfen 2
Semester
Interaktionsgestaltung 2
2020/21