Bei Datengrafiken geht es darum, interessante Zusammenhänge in größeren Datenmengen sichtbar zu machen. In diesem Projekt durften keine alphanumerischen Zeichen (Text, Zahlen) oder bildhafte Elemente verwendet werden. Umso wichtiger wird die gezielte Verwendung von Farbe, Form, Position, Animation und Interaktion, um die Information zu kodieren und zu strukturieren.
Dieses Projekt wird begleitet vom Fach Programmiersprachen 2 (Dozent: Fabian Rauch). Die Studierenden sollten die interaktive Datengrafik so komplett und funktionsfähig wie möglich mit Web-Technologien, insbesondere Javascript, umsetzen.
Als Datensatz habe ich die top 5000 Filme auf TMDb (the movie data base) gewählt, um einen Einblick zu bekommen wie sich die Filmwelt in den letzten 60 Jahren entwickelt hat.
Zum selber ausprobieren einfach rechts auf Zur Demonstration klicken, viel Spaß!
Erklärung
Startet man das Programm kommt man zunächst in die erste Ansicht. Hier sieht man alle Filme dargestellt durch Kreise. Geordnet sind diese auf der X-Achse nach dem Erscheinungsjahr von 1960-2016 und auf der Y-Achse nach der Durchschnittsbewertung. Die Kreise haben eine geringe Opacity wodurch sie sich überlagern und hellere Punkte entstehen wo zwei Filme im gleichen Jahr erschienen sind und die gleiche Bewertung besitzen. Die Größe der Kreise ist abhängig von den Ausgaben die für den jeweiligen Film getätigt wurden.
Drückt man auf die rechte Hälfte des Screens werden die Kreise Gelb eigefärbt und verändern ihre Größe, man befindet sich jetzt im Einnahmen-Modus. Die Größe trifft nun Aussage über die Einnahmen des Films und nicht mehr über die Ausgaben.
Mit den Pfeiltasten nach links oder rechts kann man in die anderen zwei Hauptansichten wechseln.
Über die Pfeiltaste nach rechts kommt man in die Ansicht der Genres. X- und Y-Achse sind dabei gleich belegt wie in Ansicht 1. Jedes der Rechtecke steht für alle Genres aller Filme die im gleichen Jahr rausgekommen sind und die gleiche Bewertung haben. Es werden also alle Genres zusammengenommen und herausgefiltert, welches Genre in dem entsprechenden Jahr bei der entsprechenden Bewertung vorherrschend war. Dieses Genre wird dann durch die Genrefarbe ausgegeben: Action-blau, Fantasy/Sci Fi-grün, Drama-rot, Horror/Thriller-grau, Comedy-gelb, Western-braun.
Neben der Ansicht aller Genres gibt es auch die Möglichkeit Genres für sich anzuschauen. In der Ansicht einzelner Genres gibt die Helligkeit des Rechtecks an, wie häufig das ausgewählte Genre in auf seiner Position vorkommt.
Über die Pfeiltaste nach links kommt man in die letzte der drei Hauptansichten. In den Farben die schon aus dem ersten Screen bekannt sind, werden hier zwei Graphen dargestellt. Der gelbe Graph zeigt die Einnahmen aller sich im Datensatz befindender Filme im Zeitraum von 1960-2016, der blaue Graph zeigt die Ausgaben die für diese Filme getroffen wurden.
Wie in der zweiten Hauptansicht gibt es auch hier die Möglichkeit sich die Graphen für ein spezifisches Genre aufzurufen, die Bedienung ist dabei identisch.
Zum selber ausprobieren einfach auf Zur Demonstration klicken, viel Spaß!
Hinterlasse einen Kommentar