Implementation

Wir werden versuchen die Visualisierung primär mittels d3 und Java-Script durchzuführen. Welche Programme noch zusätzlich von uns benutzt werden, um die Visualisierung umzusetzen, wird zu einem späteren Zeitpunkt von uns hier ergänzt. Zusätzlich werden wir noch auf die Spotify-Web-API zurückgreifen. Ansonsten haben wir nicht vor noch weitere Tools zu verwenden. Es kann jedoch sein, dass wir für vereinzelte Nebenaufgaben weitere (kleine) Tools mitverwenden werden (z.B. d3-tip für Tooltips). Für die Datenbeschaffung wurde noch node.js verwendet.

Milestones

under construction

Mockups

Prototyp 1

Der Bereich "select features" hat zwei Funktionen, einerseits soll eine Übersicht über die Daten geboten werden, andererseits soll es eine Möglichkeit geben den Filter für die Detailansicht einzustellen. Die Lieder werden in einem Parallelkoordinatensystem dargestellt, wobei jede Achse einem Audiofeature entspricht. Die Farbe der Linien soll dem Genre entsprechen. Auf den Achsen sind Brushes mit denen man die gewünschten Audiofeatures für die Detailansicht einstellen kann. Die Auswahl soll ein wenig hervorgehoben werden.

Im Bereich "suitable songs" werden die gefilterten Daten (rosa Line) in einer Detailansicht dargestellt. Die Lieder werden mit Cover, Titel, Albumname und Künstler angezeigt. Andere Details wie Popularity und Releasedate können auch noch angezeigt werden. Damit nicht zu viele Lieder aufeinmal angezeigt werden, soll man über Buttons durch das Ergebnis blättern können.

Außerdem soll man ein einzelnes Lied auch über Spotify suchen können. Das kann dann im Bereich "select features" als Referenz dargestellt werden (grüne Linie).

Vorteile
Durch die Visualisierung über Parallelkoordinaten lassen sich die gesamten Daten recht kompakt darstellen und mit den Brushes können auch gleich die gewünschten Features eingestellt werden. Dadurch ist mehr Platz für die Detailansicht auf der rechten Seite.
Nachteile
Insgesamt besteht unser Datensatz aus ca 22000 Liedern. Falls das zu viel ist, müsste man noch einen "Vorab" Filter einbauen, der zum Beispiel nach dem Release Datum filtert.

Prototyp 2

Am oberen Rand sieht man einen “search for song” - Bereich, mit dem nach bestimmten Titeln innerhalb unserer Datenbank suchen kann. Darunter findet man die “Overview”. In diesem Balken sind alle Lieder nach ihrer Lauflänge sortiert eingezeichnet und der anzuzeigende Bereich kann mittels der Schiebefelder (Doppelpfeil links-rechts) eingegrenzt werden.

An der linken Seite befindet sich der Auswahlbereich für die Audio-Features. Diese können um bestimmte Features erweitert oder verringert werden. Dieser Auswahlbereich beinhaltet die gleichen Funktionen wie bereits weiter oben im Lo-Fi Prototyp 1 beschrieben.

Gleich daneben befindet sich ebenfalls wie im Lo-Fi Prototyp 1 eine Übersicht über die gefilterten Songs. Diese werden farblich unterschieden und je nach Anzahl der ausgewählten Features im Balkendiagramm angezeigt. Wählt man zwei anzuzeigende Features aus werden im Balkendiagramm zwei Balken für den jeweiligen anzuzeigenden Bereich dargestellt. Wählt man vier aus werden immer vier Balken nebeneinander, jeweils immer farblich unterschieden, dargestellt. Darunter befindet sich noch ein “Next” - Button mit dem durch die ausgewählten Lieder durchgescrollt werden kann. Es werden immer vier Songs auf einmal angezeigt, mit Titel, Album und Artist.

Im Balkendiagramm werden die Daten letztendlich angezeigt. Die jeweiligen Audiofeatures lassen sich durch die jeweiligen Symbole unterscheiden. Fährt man mit der Maus über ein Symbol, oder über einen Balken, soll der jeweilige Name angezeigt werden (also acousticness, energy, usw.).

Außerdem richtet sich, wie bereits weiter oben beschrieben, die Balkenmenge immer nach den gewünschten anzuzeigenden Audio-Features.

Vorteile
Es lässt sich relativ einfach durch die Overview manövrieren, da alle Daten sichtbar sind und mittels der stufenlosen Schieber (Doppelpfeile) können präzise Daten ausgewählt werden.
Man kann zwei Lieder sehr gut unmittelbar miteinander vergleichen.
Nachteile
Es können nicht mehrere Blöcke von Daten ausgewählt werden, sondern immer nur jeweils einer. Möchte man z.B. die 3min-Lieder mit den 10min-Liedern vergleichen muss man einen relativ großen Block von Daten auswählen.

Prototyp 3

Mit dem dritten Prototyp haben wir versucht die Vorteile beider Prototypen, ohne ihren Nachteile, zu vereinen und Verbesserungen zu verankern.

Links ist ein Bereich wie bei Prototyp 1 mit dem man einen Song als Referenz im Parallelkoordinatensystem darstellen kann (grüne Linie). Außerdem kann man hier verschiedene Filter einstellen. Alle Songs die dem Filter entsprechen werden ein wenig hervorgehoben und rechts unten angezeigt.

Rechts oben ist eine Treemap, die als Übersicht über die Daten dient. Die Blätter entsprechen den Genres. Mit einem Klick auf ein Blatt wird das jeweilige Genre ausgewählt (roter Rahmen), die Songs der Auswahl werden im Parallelkoordinatensystem dargestellt (hellrosa und rosa Linien) und in der Liste rechts unten angezeigt (hellrosa Covers mit Titel, Album, usw…). Mit einem weiteren Klick auf das Genre wird die Überkategorie ausgewählt und bei einem weiteren Mausklick wieder die nächste Überkategorie, solange bis es keine Überkategorie mehr gibt. Wenn man sich am Ende dieses Kreislaufes befindet wird das einzelne Blatt ausgewählt über dem sich gerade der Mauszeiger befindet (oder anders formuliert wo man das letzte mal hingeklickt hat). Dann wird dieses Blatt ausgewählt. Zum Beispiel wählt man den Bereich "folk black metal" aus, mit einem weiteren Klick "black metal", dann "metal" und danach werden alle Genres ausgewählt. Wenn man die Umschalttaste beim Klicken drückt soll das nächst kleinere Genre ausgewählt werden. Das soll heißen man geht den vorhin beschriebenen Kreislauf in die andere Richtung. Mehrere Bereiche sollen wie gewohnt mit der Steuerungstaste und Mausklick markiert werden können.

Im rechten unteren Bereich kann man einzelne Songs auswählen (schwarz eingerahmt). Diese werden im Parallelkoordinatensystem hervorgehoben (rosa Linien). So lassen sich mehrere Lieder ähnlich wie im Prototyp 2 direkt miteinander vergleichen.

Vorteile & Nachteile

+
Prototyp 1 Die Übersicht und der Filter sind beim Prototyp 1 in einem Bereich und benötigen somit weniger Platz als beim Prototyp 2.
Durch die Verwendung von Parallelkoordinaten können die Zusammenhänge in den Audiofeatures gleich erkannt werden.
Prototyp 2 Filterung über die Lauflänge ist hier möglich.
Lieder können direkt miteinander verglichen werden.
Prototyp 3 Einfache Navigation durch die Daten über die Treemap.
Zusammhänge in den Audiofeatures lassen sich durch die Verwendung von Parallelkoordinaten relativ einfach erkennen.
Es können mehrere Lieder direkt miteinander verglichen werden.
-
Prototyp 1 Lieder lassen sich nicht direkt miteinander vergleichen.
Prototyp 2 Es lassen sich keine Informationen über den Bereich des Genres ermitteln.
Direkte Zusammenhänge lassen sich nicht von Haus aus klar erkennen (so wie im Paralleldiagramm vom Prototyp 1).
Prototyp 3 Es werden mit der Treemap und den Parallelkoordinaten zwei ungewohnte Darstellungen verwendet.

User Scenarios

Miriam

Miriam hat die Band "Thy Catafalque" entdeckt, und hat sich sofort in die Band verliebt. Vorallem gefällt ihr das Lied "Köd Utánam". Sie hat noch nie Musik dieser Art gehört und möchte jetzt ähnliche Bands bzw. Lieder finden.

Prototyp 1

Dafür geht Miriam auf unsere Seite und sucht nach dem Lied. Das Lied wird im Bereich "select features" angezeigt. Nun kann sie sehen wie die Audiofeatures ihres neuen Lieblingsliedes sind. Sie stellt den Filter so ein, dass die grüne Linie ganz gut abgedeckt wird, wobei die Lieder ruhig ein bisschen mehr Energy haben dürfen. Das Tempo ist ihr aber relativ egal.

Jetzt kann Miriam im Bereich "suitable songs" die Lieder sehen die dem Filter entsprechen. Vielleicht ist ja eines nach ihrem Geschmack dabei.

Prototyp 2

Zu allererst muss Miriam das gewünschte Lied einmal finden. Dies lässt sich noch annähernd einfach mit der search-Funktion bewältigen. Wenn sie nun einen Filter hinzugibt, muss dieser so eingestellt werden, dass ihr Lied nicht gleich wieder aussortiert wird. Sollte sie das geschafft haben, muss sie dies für alle gewünschten zusätzlichen Filter ebenfalls schaffen. Also einen Filter nach dem anderen manuell einstellen. Als Referenz dient ihr immer der ursprünglich ausgewählte Song. Dies stellt durchaus eine Herausforderung dar. Also einfach wäre dies schon mal nicht.

Wenn Miriam nun alle Filter in den gewünschten Anzeigebereich gebracht hat, dann muss sie den Overviewbereich ganz öffnen, damit alle Lieder angezeigt werden. Nun sollten jedoch alle Lieder, die in den gewünschten Bereich fallen angezeigt werden. Außerdem kann sie vorsichtig den Anzeigebereich der jeweiligen Audiofeatures vergrößern oder verkleinern, um die Bandbreite der Suche zu verändern.

Prototyp 3

Miriam kann nach dem Lied suchen. Dieses Lied wird in den Parallelkoordinatensystem als Referenz dargestellt und sie kann die Filter entsprechend einstellen. Nun hat sie eine Liste von Liedern deren Audiofeatures eine ähnliche Ausprägung haben wie die des Referenzliedes.

Sie könnte auch das Genre des Liedes herausfinden und dieses in der Treemap auswählen. Wenn alle Filter ganz offen sind, bekommt sie eine Liste aller Lieder desselben Genres.

Oskar

Oskar ist der Meinung, dass Metal eine immer sehr negative Stimmung hat und diskutierte deswegen schon oft mit Miriam. Jetzt möchte er wissen, ob Miriams Lieblingsgenre wirklich immer so negativ ist.

Prototyp 1

Dafür geht Oskar auf unsere Seite und muss nun die Farbe finden mit der Metallieder im Bereich "select features" gekennzeichnet sind. Wenn er die Farbe herausgefunden hat, kann er im Parallelkoordinatensystem sehen auf welchem Bereich Metal auf der "valence"-Achse verteilt ist. So kann er sehen ob Metal wirklich nur ganz links auftritt oder ob es auch positive Metallieder gibt.

Prototyp 2

Oskar hat nur eine Möglichkeit mit diesem Prototypen herauszufinden, ob Metal immer eine negative Stimmung hat. Er lässt sich von Miriam vereinzelt Metalsongs nennen, die ihrer Meinung nach positiv sind. Diese kann er dann exemplarisch suchen und im Balkendiagramm überprüfen, ob diese Lieder positiv oder negativ sind. Eine andere Möglichkeit, diese Aufgabe bei allen Metalsongs gleichzeitig zu überprüfen, ist mit diesem Prototypen nicht möglich. Es können jedoch mehrere Songs manuell ausgesucht werden und mit der Barchart verglichen werden.

Prototyp 3

Um die Stimmung von Metal zu sehen, wählt Oskar in der Treemap das Genre Metal aus. Er kann im Parallelkoordinatensystem die Verteilung von Metalsongs auf der "valence" Achse sehen und erhält somit gleich die gewünschte Information.

Sonja

Sonja ist im Gegensatz zu Oskar der Meinung, dass man zu energiegeladenen House Liedern besser tanzen kann als zu weniger geladenen House Liedern. Sie würde gerne herausfinden ob diese Regel stimmt.

Prototyp 1

Dafür muss Sonja die Farbe von Houseliedern herausfinden. Wenn sie die Farbe herausgefunden hat, kann sie im Parallelkoordinatensystem die Verteilung auf der "energy" Achse und die Verteilung auf der "danceable" Achse vergleichen, um die energiegeladenen House Lieder zu erkennen muss sie den Filter auf der "energy" Achse verwenden.

Sie kann auch (umständlicher) exemplarisch nach Liedern suchen. Jedes Lied wird einzeln als Linie dargestellt. Sie muss sich die vorherigen Lieder aber immer merken, da nur ein Lied als Referenz dargestellt werden kann. So kann sie nach etwas längerer Arbeit herausfinden ob die Regel stimmt.

Prototyp 2

Für die Frage, ob energiegeladene House Lieder tanzbarer sind als weniger geladene House Lieder würde Sonja vermutlich so vorgehen. Sie kann sich bestimmte Houselieder aussuchen und sieht diese mittels farblicher Kodierung. Danach betrachtet sie diese Lieder über die Barchart und kann so sehr gut die einzelnen Lieder miteinander vergleichen.

Prototyp 3

Mit folgender Vorgehensweise kann sie herausfinden, ob energiegeladenere House Lieder “tanzbarer” sind oder nicht. Sonja wählt zunächst das Genre in der Treemap aus. Danach kann sie den Filter auf der “energy”-Achse auf den rechten Bereich einstellen. Sie kann jetzt an den hervorgehobenen Linien die Verteilung auf der "danceable" Achse sehen. Wenn sie den "energy" Filter auf den linken Bereich einstellt, werden die ruhigeren House Lieder hervorgehoben.