Themenfindung

Um geeignete Themen für meine Datenvisualisierung zu finden, beginne ich zunächst mit einer Recherche zu Themen, die mich persönlich besonders interessieren. Dabei sind mir folgende Themen ins Auge gefallen:

Internetnutzung

Die Internetnutzung ist meiner Ansicht nach ein faszinierendes Thema, wenn es darum geht, herauszufinden, wo qualitativ hochwertiges Internet verfügbar ist und ob es tatsächlich genutzt wird. zum Datensatz

Internet Geschwindigkeit

Natürlich ist es folglich auch spannend zu erkunden, wo sich weltweit das “perfekte” und schnelle Internet verbirgt. zum Datensatz

Gender Pay Gap Dataset

Eine weitere Option ist der “Gender Pay Gap”. Allerdings stellte sich dies für mich schnell als uninteressant heraus, da es bereits stark in den Netzwerken diskutiert wird. zum Datensatz

Most Streamed Songs

Aufgrund meiner langjährigen musikalischen Laufbahn als Cellist und meiner anhaltenden Begeisterung für Musik, die ich auch heute noch täglich konsumiere, liegt mir dieses Thema besonders am Herzen. Mich fasziniert schnell die Frage, was eigentlich die Mehrheit der Menschen hört. zum Datensatz

Datensatz

Nach meiner Überlegungsrunde zur Themenfindung ist nun klar, dass ich einen Datensatz benötige, der die Top-Songs der letzten Jahre widerspiegelt. Die Suche gestaltet sich schwieriger als gedacht, aber nach eingehender Recherche finde ich schließlich einen passenden Datensatz auf Kaggle. Dieser erfüllt meine Anforderungen, da er ausreichend Informationen zu den Songs enthält, keine Lücken aufweist und einen spannenden Zeitraum abdeckt. Hier ein ausschnitt von einem Songs:

Schnell wird klar, dass der Datensatz zwar ausreichend Informationen zu einem Song enthält, es jedoch an Verständnis mangelt. Aus diesem Grund widme ich mich dem Verständnis des Datensatzes und erstelle eine Liste mit Übersetzungen (Beschreibungen).

Kaggle: zum Datensatz

Fragen

Ich fange an die Datenbank in Exel zu sortieren und Tendenzen zu erkennen. Mit Keywords wie “durchschnitt” versuche ich spannende Informationen herauszufinden. Doch da alleine mit Aussagen wie “Durchschnitt” ich wenig erreichen kann, setze ich mich nun an konkrete Fragen

Bei den Fragen ist es mir wichtig, dass sie meine Eigenschaften aus der Datenbank spannend präsentieren können.

Nach einigen Versuchen habe ich mich für eine zentrale Frage entschieden, die dem Thema besondere Aufmerksamkeit verleiht, sowie für drei begleitende Leitfragen, die das Thema zusätzlich unterstreichen sollen.

Hauptfrage: is there a recipe for success in the music industry? Mir ist bewusst das diese Frage vielleicht fast schon ein wenig zu hoch gegriffen ist, nicht desto trotzt bin ich der Überzeugung, dass ich mit meinen Leitfragen Tendenzen darstellen kann.

Leitfrage A: Do songs with higher valence also have an equal amount of energy? In dieser Frage möchte ich untersuchen, ob es möglich ist, einen Song zu erhalten, der trotz geringer Energie eine freundliche Wirkung auf den Hörer hat.

Leitfrage B: Are there genres that dominate? Hier möchte ich herausfinden, welche Genres es gibt, die in der Musikwelt eindeutig überzeugen und somit beinahe eine garantierte Popularität versprechen, sobald ich einen neuen Song veröffentliche.

Leitfrage C: Are there any keys that are particularly danceable? Zum Abschluss möchte ich die Frage aufwerfen, ob es in der Tonleiter bestimmte Tonarten gibt, die besonders geeignet sind, um zum Tanzen einzuladen. Dies könnte beispielsweise relevant sein, wenn ich plane, einen neuen Club-Song zu veröffentlichen.

Konzept

Bei der Wahl der Visualisierungsansätze für die einzelnen Konzepte verwende ich die Datenbankeigenschaften als Überschriften. Ebenfalls fange ich an zu jedem Thema Varianten zu bilden und behalte stets die Frage im Kopf: Wie kann ich die jeweiligen Fragen am besten zum Ausdruck bringen, damit sich der Betrachter eine eigene Meinung bilden kann. Die Top Varianten sehen wie folgt aus:

valence & enegry

Bei “Valence & Energy” arbeite ich mit einer “Map”. Die Achsen des Koordinatensystems sollen die Eigenschaften Valence & Energy besitzen. Der Fokus bei den Varianten liegt vor allem auf den Formen. Wie groß sollen die einzelnen Elemente sein: viereckig oder rund? Und farbig oder einfärbig? Ich entscheide mich für die Versionen 4, 5 und 6, da sie mit ihren natürlichen Grundformen (Kreise) meiner Meinung nach besser zur Musikindustrie passen als Vierecke. Ebenfalls entscheide ich mich für gefüllte Kreise, die je nach Danceability größer oder kleiner sind und ihre Farbe entsprechend dem Genre erhalten. Gefüllt, da ich denke, dass umgefüllte Kreise nur mit ihrer Umrahmung Schwierigkeiten beim Anklicken aufweisen könnten. Vielleicht könnten Betrachter versuchen, den Rand anzuklicken, was es unnötig kompliziert machen würde.

genre

Bei den Genres ist es mir wichtig, die Gewichtung zum Ausdruck zu bringen. Daher arbeite ich viel mit großen Flächen oder dem Gesetz der nahen Gruppierung, um eine Struktur zu schaffen. Zunächst gefallen mir Version 1 oder 6 sehr gut, jedoch entfällt bei diesen Ansichten das Anklicken einzelner Songs, weshalb die Grafik uninteressant wird. Daher gefällt mir der Visualisierungsansatz 2 sehr gut, da er durch die Nähe der einzelnen Punkte eine Gruppierung aufweist, aber dennoch jeden einzelnen Song in Form eines Kreises widerspiegelt.

key & danceability

Bei der Ansicht “Keys & Danceability” ist es mir wichtig, einen Vergleich herstellen zu können. Daher wird schnell klar, dass Version 5 sich schlecht eignet, um einzelne Keys zu vergleichen, weshalb ich sie schnell wieder verwerfe. Der Ansatz 3 gefällt mir sehr gut, da er eine geordnete Struktur mit sich bringt und die Vergleichbarkeit dadurch vereinfacht. Allerdings ist unklar, wie dies technisch umgesetzt werden soll, dass die Punkte immer von unten gestapelt werden. Daher entscheide ich mich für den Mittelwert zwischen 2 und 3. Eine Auflistung der Punkte in den jeweiligen Keys mit einer eher mittig ausgerichteten Darstellung. Mit diesem Visualisierungsansatz bin ich sehr zufrieden, da er auch aus weiterer Distanz sehr interessant aussieht und mit Musik in Verbindung gebracht werden kann.

Agenda

Schnell wird mir klar, dass die Konzepte komplizierte und auf den ersten Blick vielleicht unverständliche Achsen oder Visualisierungen haben könnten. Daher entscheide ich mich zunächst für eine Agenda. Um die bestpassendste zu finden, entscheide ich mich für Variantenbildung. Angefangen mit einer sehr klassischen und ikonographieintensiven Darstellung bis hin zu abstrakten Texteingaben wie “+” und “-“. Ich entscheide mich zunächst für die letzte Variante, da sie wenig Platz einnimmt, sich an meine Grundformen anschmiegt und leicht zu verstehen ist. Gerade bei den Varianten in der Mitte ist der benötigte Platz zu groß und sie wirken auch schnell sehr komplex. Ebenfalls möchte ich den Fokus auf das Wichtigste legen und alles “Nice-to-have” entfernen.

Nach langem Hin und Her überlegen, entschiede ich mich doch gegen eine Agenda, da sie zu sehr illustriert aussieht und damit aus meinem Gesamtkonzept herausstechen würde. Die benötigten Informationen zum Verständnis der Datengrafik sind nun im Text untergebracht.

Typografie

Bei der Typografie meiner Datenvisualisierung habe ich bewusst auf eine serifenlose Schriftart zurückgegriffen. Diese passt meiner Meinung nach besser zu den grundlegenden Formen, die ich verwende und verleiht dem Gesamtbild eine schlichte Eleganz, ohne dabei zu sehr in den Vordergrund zu treten. Als Schriftart habe ich mich für Poppins von Google Fonts entschieden, da sie unaufdringlich und ruhig wirkt und somit das Diagramm harmonisch ergänzt.

Serifenhaltige Typografie

Poppins

Farben

Zunächst stellt sich mir die Frage, wie ich meine Farben in Szene setzen und welcher Bedeutung ich ihnen Ausdruck verleihen möchte. Ich entschiede mich für die Farbcodierung: Genres.

Freihand

Zunächst zeichne ich auf Figma 11 graue Rechtecke und weise jedem anschließend eine Farbe zu. Schnell wird mir bewusst, dass die Anzahl der benötigten Farben die Herausforderung erhöht. Jedoch bin ich unzufrieden mit dem Ergebnis, da die Farben zu wenig gesättigt und pastellfarben wirken. Da die Musikindustrie meiner Meinung nach eng mit Emotionen und Energie verbunden ist, sind kräftigere und leuchtendere Farben erforderlich.

Marken

Nach einer Recherche über die derzeit angesagten Musik-Streaming-Dienste beginne ich damit, markante Farben aus den Logos und Benutzeroberflächen zu übernehmen. Anschließend ordne ich die einzelnen Farben in einer bestimmten Reihenfolge an und passe sie an. Doch schnell weiche ich wieder in Richtung dezenter, pastellfarbener Töne ab.

Farbkreis

Nun möchte ich mich erneut intensiver mit dem Farbkreis beschäftigen. Doch zuallererst überlege ich mir eine Methode, nach der ich vorgehen möchte. Ich entscheide mich für eine klare Reihenfolge der Genres, die ich berücksichtigen werde. Hierbei orientiere ich mich daran, welche Genres einander am nächsten liegen und somit auch im Farbkreis benachbart sind. Des Weiteren ist mir bewusst, dass die Genres mit dem größten Gewicht in der Datenbank eine optimale Platzierung benötigen, da sie später das Gesamtbild dominieren werden. Nachdem ich die Genres positioniert habe, drehe ich den Kreis noch leicht, bis ein stimmiges Bild entsteht.

Layout

Beim Experimentieren und Gestalten des Layouts entscheide ich mich für Wireframes, da durch ihre schlichte Darstellung die volle Aufmerksamkeit auf die Positionierung und Gewichtung der Inhalte liegt und nicht auf den konkreten Inhalten.

Startseite

Bei der Startseite habe ich mich zunächst für eine schlichte Variante entschieden, bestehend aus einer kleinen Überschrift und einem kurzen Text, die mittig platziert sind. Allerdings bin ich mit diesem Layout unzufrieden, da weder Quellen und Dokumentationen sauber als Hyperlinks eingebunden werden können, noch lässt sich meine einleitende Frage klar von dem Text trennen. Nach einigen Versuchen bin ich auf Variante zwei gestoßen. Hierbei habe ich eine größere Überschrift gewählt und eine klare Trennung und Strukturierung auf der rechten Seite umgesetzt. Dadurch entsteht eine ordentlichere Darstellung, die es ermöglicht, die einleitende Frage, Beschreibung, Quellen und Autor deutlich voneinander abzugrenzen.

Unterseiten

1. Als erste Variante entscheide ich mich für eine großflächige Grafik, die den Bildschirm ausfüllt und nur einen kleinen Bereich für die Navigation lässt. Allerdings empfinde ich die Darstellung als zu abstrakt.

2. Nun versuche ich, mit einer aussagekräftigen Überschrift das “Abstrakte” zu verdrängen und dem Betrachter mehr Hintergrundinformationen zu liefern. Ich experimentiere auch mit der Anordnung der Navigationsleiste. Doch dann stellt sich die Frage: “Wo sollen die Songinformationen platziert werden?”

3. Die Lösung besteht darin, eine Karte unterhalb der Navigationsleiste einzufügen. Gleichzeitig erweitere ich die Grafik auf ihre maximale Höhe, um mehr Interaktionsfläche zu schaffen.

   

4. Ich bin schnell unzufrieden mit der Anordnung der Navigationsleiste, da sie bereits durch die Startseite vorgegeben ist und eine Änderung inkonsistent wirken würde. Daher gehe ich noch einmal einige Schritte zurück.

5. Nun möchte ich eine klare Trennung zwischen Informationen, Interaktion und Navigation schaffen. Dazu entscheide ich mich, die Überschrift, Unterüberschrift, Beschreibung sowie die Songkarten in die obere Hälfte des Bildschirms zu platzieren, da dies ein aufgeräumtes Gefühl vermittelt. Darunter soll eine große Interaktionsfläche entstehen, auf der alle Dots (Songs) angezeigt werden, und darunter wiederum die Navigationsleiste.

6. Die vorherige Version gefällt mir bereits sehr gut, jedoch sind die Songkarten in meinen Augen noch zu vage definiert. Daher erstelle ich einen konkreteren Wireframe.

   

   Da die Gewichtung der Informationen noch nicht deutlich genug ist, entscheide ich mich dafür, die Gewichtung durch die Sättigung zu verdeutlichen. Dadurch entstehen unterschiedliche Betrachtungsdistanzen und die Darstellung lenkt die Aufmerksamkeit des Betrachters in die richtige Richtung.

   

Interaktion

Grundsätzlich habe ich mir nochmal in den Sinn gerufen, was ich mit meinen Interaktionen anfangen möchte. Sie sollen unterstützen und verstecke Information sichtbar machen sowie Vergleiche von Informationen ermöglichen.

Startseite

Agenda: hellgelb = Fläche zum Interagieren Auf der Startseite habe ich mich neben der interaktiven Menüleiste am unteren Bildschirmrand für zwei weitere Hyperlinks entschieden. Der Betrachter soll stets seine eigene Meinung bilden, weshalb ich neben einem Link zur Dokumentation (Entstehung des Projekts und Verarbeitung der Daten) auch einen zur Datenbank bereitstelle.

Unterseiten

Bei den Unterseiten habe ich mich für verschiedene Interaktionsmöglichkeiten entschieden:

1. Die Menüleiste ermöglicht es dem Betrachter, zwischen den einzelnen Screens zu navigieren.

2. Beim Überfahren (hoover) der Dots wird eine Vorschau des Songs in Form des Titels angezeigt.

3. Durch Anklicken eines Dots erscheint eine Karte, die nicht nur eine Farbcodierung für das Genre aufweist, sondern auch weitere Informationen über den Song preisgibt.

4. Durch längeres Drücken auf einen anderen Dot kann der Betrachter eine zusätzliche Karte eines anderen Songs in den Vordergrund holen und sie anschließend miteinander vergleichen.

5. Mit einem Doppelklick lässt sich ein Genre fokussieren, während alle anderen Genres ausgeblendet werden.

6. Abschließend kann der Betrachter durch Anklicken der Karte, nach Auswahl eines Songs, das Lied auf YouTube abspielen lassen.

   

Code

Struktur

Das Zwischenspeichern von funktionierenden Fortschritten hat zwei gravierende Vorteile für mich. Zum einen ermöglicht es mir, bestehende Codeschnipsel wiederzuverwenden, zum anderen gibt es mir eine große Sicherheit, die mir beim Coden extrem wichtig ist. Code ist in meinen Augen, gerade als Anfänger, sehr impulsiv mit den Emotionen. Schnell gerate ich in die Situation, dass nach langem Probieren etwas funktioniert und ich es anschließend nicht mehr anfasse. Durch meine Sicherungen gewinne ich Mut und traue mich stetig neue Dinge auszuprobieren, was sich im Nachhinein als sehr wertvoll herausstellt. Im folgenden ein paar bildliche Code-Ausschnitte:

Performance

Da ich mich für eine Ansicht entscheide, auf der es möglich ist, alle Punkte auf einmal anzeigen zu lassen, gerate ich schnell in große Performanceprobleme. Es fängt an zu ruckeln und die Freude des Benutzers steht in Gefahr. Daher entscheide ich mich, meinen Code auf eine andere Animations-Library umzuschreiben. Durch den Umstieg auf Greensock können nun Animationen 10x so flüssig abgespielt werden.

Aussichten

In die Zukunft geschaut wären folgende Punkte noch im Visier:

1. Full Responsive Design Aktuell ist meine Datenvisualisierung auf meinen MacBook Pro 13 Zoll optimiert, weshalb es schnell bei anderen Bildverhältnissen zu Überlagerungen oder Verschiebungen kommen kann.
2. Musikbibliothek Ein weiteres auditives Upgrade wäre, dass nach dem Anklicken eines Songs bereits im Hintergrund leise der dazugehörige Song abgespielt wird, um sich den Weg auf YouTube sparen zu können.
3. Aktuelle APIs Da ich das Thema sehr interessant finde und auch denke, dass es in Zukunft noch spannend werden könnte, wäre eine Schnittstelle zu einer Datenbank mit aktualisierten Inhalten denkbar, damit die Grafik immer auf dem neuesten Stand bleibt.

Projektvideo

Demo

empfohlen: native Auflösung von 2560 x 1600 Jetzt live testen