Programmiertes Entwerfen

Spotify usage data

Das Semesterprojekt in Programmiertem Entwerfen 2 befasst sich mit der Datenvisualisierung. Dabei spielt Form, Farbe, Anordnung und Animation eine entscheidende Rolle. Auf Beschriftungen muss verzichtet werden.

Vorarbeit

Es erforderte einen ziemlichen Aufwand, meine Daten von Spotify zu bekommen. Parallel dazu entstanden die ersten Ideen, wie die Primärfarbe der Albumcover zu verwenden, um eine Unterscheidbarkeit der Songs darzustellen ohne Bilder zu verwenden. Ebenfalls legte ich drei Perspektiven fest, wie meine Daten visualisiert werden können. Die Sortierung der Daten und welche überhaupt in der Visualisierung Verwendung finden, stand im nächsten Schritt zur Debatte.

Daten sortieren

Zusätzlich zu den bereits vorhandenen Daten von Spotify benötigte ich noch weitere von externen Datenbanken. Eine Wetterdatenbank um die Temperatur der Tage zu bekommen und Zusatzinformationen von Spotify waren von Nöten.

Zusatz Informationen von Spotify

Um die Coverbilder der Tracks mit dem Datensatz abgleichen zu können, musste ich mit der Spotify API arbeiten. Da ohne Spotify IDs jedoch nichts funktioniert, musste ich zuallererst meinen Datensatz um die Spotify IDs manuell erweitern. Diese waren leider aus unerklärlichen Gründen nicht im Datensatz enthalten.
Als ich alle IDs hatte, war ich bereit für die Spotify API, diese jedoch nicht für mich. Etliche Versuche scheiterten. Kurz vorm Aufgeben gelang mir dann doch noch das Abfischen der Coverbilder mithilfe von node.js und der Embedded-URL von Spotify.

Nun codete ich ein Tool um aus dem Coverbilder der einzelnen Songs den primären Farbton bestimmen konnte. Dies gelang mir mit Hilfe der JavaScript Library ColorThief.

Finaler Datensatz

Daten von Spotify

  • Datum
  • Uhrzeit
  • Gespielte Zeit
  • Track
  • Album
  • Artist

Zusätzliche Daten

  • Temperatur pro Tag
  • Spotify ID
  • Coverbild

Finale Umsetzung

3 Perspektiven

An 84 von 89 Tagen habe ich Musik gehört. Zehn Prozent meiner Lebenszeit wird von Musik begleitet.

Demo

Info

Das Projekt war eine Einzelarbeit und wurde von Prof. Benedikt Groß betreut.

Projekt