Datenvisualisierung: Auseinandersetzung mit Form, Farbe und Ordnungsprinzipien, um Zusammenhänge in größeren Datenmengen sichtbar zu machen. Das Ergebnis ist ein programmierter, interaktiver Prototyp.
Die Daten werden ohne Zuhilfenahme von bildhaften Elementen (Piktogramme, Fotografien, …) interaktiv dargestellt. Alphanumerische Zeichen (Text, Zahlen) sollen so sparsam wie möglich verwendet werden. Umso wichtiger wird es, gezielt Farbe, Form und Position einzusetzen, um
Mengen sichtbar zu machen,
Kategorien zu kodieren,
Gruppen zu bilden,
Zeitabläufe nachverfolgbar zu machen,
…
Die Darstellung von Daten zwingt schon an sich zu einer parametrischen Denkweise. D.h. die grafischen Elemente müssen flexibel gedacht werden, so dass sie unterschiedliche Zahlenwerte und Bedeutungen annehmen können. Das Denken in Varianten ist also essenziell. Zudem erlauben unterschiedliche Gesamtdarstellungen neue Einblicke in die Zusammenhänge innerhalb der Daten. Durch Interaktion können weitere Zusammenhänge vom Nutzer entdeckt werden.
Is there a recipe for success in the music industry?
Mit meiner Datenvisualisierung “Top 100 Songs” möchte ich eine transparente Datenbasis der letzten Jahre aus der Musikindustrie schaffen. Durch provokante Fragen wie “Gibt es ein Erfolgsrezept in der Musikindustrie?” möchte ich den Betrachter ansprechen und ihm anschließend die maximale Kontrolle über die Visualisierung und Datenverarbeitung geben. Ich bin überzeugt, dass meine Datenvisualisierung Ansätze bieten kann und möglicherweise sogar direkt Tipps für Song-Creators für ihren nächsten Hit bereitstellen kann.
Disclaimer: optimierte Darstellung = 2560 x 1600 Jetzt anschauen
Projektumsetzung
Meine Detaillierte Projektumsetzung gibt es in meiner Dokumentation oder im Bereich Code auf GutHub. Anschließend möchte ich auf interessante Schritte blicken.
Bevor wir nun zu meinen Funktionen blicken, ein kleines Video meiner Layout-Varianten in Form von Wireframes.
Description
Neben Funktionen wie dem Durchnavigieren in der Menüleiste oder dem Hovern über einen Kreis, um einen Hover-Effekt auszulösen, sowie einer einfachen Klickfunktion zum Anzeigen der Informationen, sind mir besonders folgende Funktionen wichtig.
1. Long Press
Durch langes Drücken auf einen Kreis erscheint eine zweite Karte auf dem Bildschirm, um einen Vergleich zwischen zwei beliebigen Liedern schaffen zu können. Dies ermöglicht es, genaue Werte zweier Musikstücke miteinander zu vergleichen.
2. Double Click
Mit einem einfachen Doppelklick erlangt man eine selektierte Auswahl des gewünschten Genres. Somit kann man sich auch auf ein Genre fokussieren und es in den verschiedenen Fragen / Filteroptionen anschauen.
3. Auto Play
Neben einer sehr theoretischen Visualisierung ist mir besonders bei diesem Thema der praktische und emotionale Teil wichtig. Durch einen Klick auf die Karte des Leides gelangt man direkt auf YouTube, um das Lied anzuhören.
Code
Ein wichtiger und zeitintensiver Schritt meiner Datenvisualisierung ist die Performance meiner Animationen. Eine ruckelnde Animation würde die Begeisterung des Betrachters zerstören. Daher entscheide ich mich für eine Umstrukturierung des Codes und wechsle auf die Library GreenSock, um eine maximale Performance in der Animation zu gewährleisten.
Dokumentation
Die gesamten Ideen, die präzise Umsetzung und die verarbeiteten Daten sind in meiner Dokumentation über meine Datenvisualisierung nochmals aufbereitet. Zur Dokumentation
