500 Greatest Songs Of All Time - Datenvisualisierung

Interface/Interaction selection

Die Aufgabe

Das Ziel dieses Kurses Varianten von Datengrafiken zu erstellen und diese schrittweise mit einer Fülle an Variantenbildung parametrisiert zu entwickeln. Dabei sollten erst statische Grafiken, dann animierte und zuletzt interaktive entstehen.

Themenfindung

Irgendwann während meiner Rechercher zum Thema (das erst die Entwicklung der Bluesmusik von 1900-1970 visualisieren sollte) bin ich auf die Rolling Stone Magazine Seite gestoßen. Das Magazin 2004 fünf Listen herausgebracht hatte. Eine davon war die der „500 Greatest Songs Of All Time“. Der Rolling Stone veröffentlichte die Liste mit den aus ihrer Sicht 500 besten Songs aller Zeiten. Heiß diskutiert und mit vielen Kontroversen war diese Liste das Ergebnis einer Abstimmung von Musikern, Produzenten und Kritikern, die eine Jury von insgesamt 172 Personen bildeten. Jeder konnte 50 Stimmen abgeben, welche Songs (nach ihrer Meinung) die wichtigsten der gesamten Musikgeschichte waren. Mit abgestimmt haben unter anderen Ozzy Osbourne, Art Garfunkel, Elvis Costello, Joni Mitchell und Berry Gordy. Dabei erschien vielen Unzufriedenen besonders auffällig, dass einige Mitglieder, die bekannt waren, sich selber hätten wählen können.

Datenbank

Ausgehend von der Liste mit Song und Position, habe ich eine Datenbank in „Google docs“ erstellt. Wie schon erwähnt wurden Band, Album, Jahr, Genre und Land hinzugefügt. Dabei wurde als grundlegende Liste nicht die Ausgabe von 2004, sondern die überarbeitete Version von April 2010 verwendet. Auf 10 Seiten wurde die Liste ausgedruckt und in zahlreichen Stunden die fehlenden Parameter und Informationen herausgesucht. Zu der Datenbank existiert außerdem eine Statistik, die ich im ganzen Projektprozess immer wieder versucht habe, visuell auszudrücken. Nachdem die Liste fertig war wurde sie nach verschiedenen Ordnungen als „ .csv“ Datei exportiert.

Probleme gab es bei der Schreibweise. Es war stehts darauf zu achten nichts doppelt zu verwenden, Sonderzeichen zu vermeiden, sowie Leerzeichen. Länder, Bands und Genres sollten ebenfalls zusammenpassen und die gleiche Bezeichnung tragen wie im Code. Zahlreiche Überarbeitungen waren somit vorprogrammiert.

Farbcodierung

Die Farbcodierung war mitunter das schwierigste Themenfeld dass ich bei diesem Projekt zu bearbeiten hatte. Nicht nur dass die Visualisierung als ganzes harmonisch sein sollte, jeder der vier Ringe der jeweils einen Parameter symbolisieren sollte, sollte ebenfalls in sich ein Farbkonzept beeinhalten dass wiederrum harmonisch, aussagekräftig, übersichtlich und funktional ist.

Da es hier den Rahmen sprengen würde, wenn ich bei jeden einzelnen Parameter die Farbcodierung erklären würde, steht unten die Dokumentation bereit.

Farbcodierung Jahre

Processing

Zur Umsetzung habe ich mich für Processing entschieden. Vorallem bei dieser großen Datenmenge und zur gestaltung der interaktiven Datenvisualisierung war diese Sprache, das beste Werkzeug.

Der ganze Code wurde auf einem einfachen „PieChart“ Sketch aufgebaut.

Im nächsten Schritt habe ich den Kreis mithilfe eines Arrays in 500 Teile geteilt. Außerdem erstellte ich für jeden Parameter der Datenbank ein eigenes Array (d.h. eine Liste) in die später die Datenbank eingelesen wurde.

Gezeichnet wurde mittels einer „arc“ - Funktion ein Kreis mit 500 Segmenten. Dies stellt das Herzstück des gesamten Codes dar.

Interface Rank

Interface Jahre

Interaktion & Interface

Interface Herkunft

Die  erste Interaktion die ich programmiert habe, war die Umschaltung der verschiedenen Datenbanken untereinander. Das heißt im Klartext, dass der user die Möglichkeit hat, die vier Kreise entweder nach Rank, Genre, Origin (Herkunft der Band) oder nach dem Jahr zu ordnen. Hierbei spielt die Farbcodierung eine wichtige Rolle, denn der Benutzer ist hier in der Lage bereits informationen herauszulesen. Im Beispiel der Jahre, Teilte ich den Kreis mittels Farbcodierung in Jahrzehnte ein. Somit sind die Songs bei einer Ordnung primär nach Jahren bereits nach Jahrzehnten visuell sortiert. Dieses System ist auf die anderen Parameter natürlich übertragbar.

Als zweite elementare Interaktion habe ich einen art Slider geschaffen, der es ermöglicht, durch eine nur ein Pixel dünne Linie, einen einzelnen Song herauszugreifen und die Informationen darüber anzeigen zu lassen. Hierbei braucht man nur die Maus auf der x- oder y-Achse zu bewegen um einmal den Slider visuell um 330 Grad zu bewegen.

Das wichtigste am Interface, war mir die Thematik und die Informationen spielerisch zu vermitteln. Abgesehen von Titel und Bezeichnungen, steht dem user durch den Slider eine dynamische Informationsquelle zur Verfügung. Der Betrachter hat die Möglichkeit durch die Interaktionen die Informationen direkt anzeigen zu lassen. Die Farbcodierung wird je nach Ordnung links von der Visualisierung angezeigt. Die Songinformationen rechts. Durch eine mittige Anordnung der Visualisierung bleibt diese zwar immer im Vordergrund, wird aber durch die Informationen die der user gerade benötigt ergänzt.

Für die Gestaltung habe ich darauf geachtet möglichst minimalistisch und funktional zu bleiben.

Auf eine Auflösung von 1920x1200 px ist die Anwendung optimiert, Schriftgrößen variieren zwischen 24 Pt und 13 Pt. Dabei wurde außerdem darauf geachtet, wichtigere Informationen hervorzuheben.

Alle Songs