PE Datenvisualisierung

In dem Kurs “Programmiertes Entwerfen 2” haben wir uns mit der Beziehung zwischen Form und Farbe und haben darauf aufbauend eine Datenvisualisierung eines Zeitablaufs erstellt.

Das Thema dafür war frei wählbar. Zuerst haben wir eine Variante der Darstellung für ein Plakat erstellt und anschließend die Visualisierung auf eine Website übertragen. Der Prozess und die Variantenbildung standen bei diesem Projekt im Vordergrund. In der Dokumentation sieht man die einzelnen Schritte des Projekts.

Themenfindung

Bei der Recherche habe ich zuerst überlegt was mich als Thema interessieren würde. Mir war es wichtig ein Thema zu finden zu dem ich einen Bezug habe.

Es standen verschiedene Themen zur Auswahl, zu denen ich Datensätze gesucht habe: Ich habe nach verschiedenen Datensätzen zum Fahrrad gesucht, nach Themen zur Umwelt und Nachhaltigkeit recherchiert und da ich Musiker bin, habe ich auch im Bereich Musik auf mehreren Websites nach unterschiedlichen Datensätzen gesucht. Ich hab mich dann für das Thema Umsatz im Musikmarkt entschieden.

Datensatz

Im Bereich Musik habe ich zwei Datensätze zum Umsatz in der Branche gefunden. Der erste Datensatz hat den weltweiten Umsatz in der Musikindustrie in verschiedenen Kategorien von 2006 bis 2020 in Milliarden gezeigt. Der zweite Datensatz, den ich schlussendlich auch als mein Thema und für die Datenvisualisierung verwendet habe, zeigt die Umsatzanteile aus dem Musikverkauf in Deutschland von 2011 bis 2020 in den Bereichen Physisch und Digital.

Im Bereich Physisch gibt es die Parameter CD, DVD, Vinyl und Sonstiges. Im digitalen Bereich gibt es Download, Streaming und Sonstiges.

Die Daten habe ich aus den einzelnen Jahresberichten des Bundesverbands Musikindustrie https://www.musikindustrie.de/publikationen/musikindustrie-in-zahlen-im-ueberblick herausgelesen und die in Prozent angegebenen Zahlen für die Umsetzung der Visualisierung auf eine Dezimale gerundet.

In dem Datensatz wird der steile Aufstieg des digitalen Bereichs gut sichtbar. 2011 war der Anteil von Streaming noch sehr gering, während er im Jahr 2020 den größten Anteil ausmacht. Ebenso gibt es einen kurzen Aufstieg der Downloads, der dann aber nach ein paar Jahren wieder abnimmt. Zu der Kategorie “Sonstiges” im digitalen Bereich zählen Video-Streaming und Realtones/Ringbacktones, also der Download von Klingeltöne.

Zu dem digitalen Aufstieg gibt es eine Gegenbewegung im physischen Bereich. 2011 hat der Verkauf von CDs noch fast 75% des Gesamtumsatzes ausgemacht. Der Umsatz ist dann innerhalb von 10 Jahren, um mehr als 50% auf 21% gesunken. Unter dem Anteil DVD, der auch abgenommen hat, versteht man den Verkauf von Musik-DVDs und Blu-Ray Videos, die aufgenommene Konzerten oder Musikvideos zeigen. Zum sonstigen Bereich zählt unter anderem der Verkauf von Musikkassetten. Trotz des negativen Trends, der gezeigt wird, gibt es im physischen Bereich einen kleinen “Gewinner”: Der Verkauf von Vinyl-Schallplatten hat in den abgebildeten 10 Jahren um ein paar Prozent zugenommen und ist somit die einzige Kategorie im Physischen, die einen Anstieg vorweisen kann.

Konzept und erste Entwürfe

Zu Beginn der Konzept- und Entwurfsphase habe ich damit angefangen nach der Crazy 8-Methode Skizzen zu erstellen, das heißt ich habe in jeweils einer Minute acht verschiedene Skizzen gemacht und so geschaut, was mir zu dem Thema spontan einfällt und für die Visualisierung in den Kopf kommt. Die Crazy 8 Skizzen haben eine gute Grundlage für den weiteren Entwurfsprozess gegeben.

Moods Musikbereich

Danach habe ich im Bereich Musik nach verschiedener Inspiration und Dingen gesucht, die ich in meine Visualisierung einfließen lassen könnte. Es war mir wichtig, dass der thematische Bezug in die Visualisierung irgendeine Rolle spielt. Gefunden habe ich beispielsweise eine Schallplatte mit den kreisförmigen Rillen, das Griffbrett der Gitarre und die Notenlinien, die einem Raster entsprechen oder ein Lautstärkenanzeiger einer Musikanlage, der Ähnlichkeiten zu Balkendiagramm hat.

Moods Visualisierungen

Ebenso habe ich nach verschiedenen Datengrafiken gesucht, die von der Idee in eine Richtung gehen, wie ich sie mir auch vorgestellt hatte. Hier habe ich auch darauf geachtet, möglichst unterschiedliche Datentypen zu sammeln und dabei zu schauen was möglich ist und darauf zu achten was gut funktioniert oder auch nicht so gut funktioniert.

Skizzen

Gleichzeitig habe ich schon angefangen verschiedene Ideen zu skizzieren. Zuerst analog auf Papier, da es zum Teil schneller geht als Ideen digital umzusetzen und man nicht durch die Technik eingeschränkt ist. Der Fokus lag darauf möglichst viele Dinge auszuprobieren.

Ich habe mehrere Skizzen zu radialen Umsetzungen angefertigt. Es gab die Möglichkeit die Jahre im Kreis anzuordnen oder “Jahresringe” zu machen. Ein Problem ist, dass Werte mit der selben Prozentzahl, die in einer radialen Darstellung weiter außen angeordnet sind, größer wirken, als Werte, die im Kreis innen positioniert sind. Ich habe in den Skizzen auch versucht, eine Art Balkendiagramm, bei dem die einzelnen Parameter pro Jahr als Balken dargestellt sind, in das Kreisdiagramm einzubauen.

Ich habe auch verschiedene Balkendiagramme zu dem Datensatz skizziert. Die Idee die Daten in einem Raster zu visualisieren und so den Lautstärkeregler aufzugreifen, habe ich spannend gefunden.

Hier sieht man noch andere Skizzen und Ideen, die ich auch aus dem Crazy8 in den Skizzen weiter ausgebaut habe.

Entwürfe

Nach den analogen Skizzen habe ich damit weitergemacht, die ersten Ideen ins Digitale zu übertragen und damit noch weiter zu experimentieren. Die Daten aus dem Datensatz habe direkt mit eingebaut und auch Farbe zur Unterscheidung der einzelnen Kategorien eingesetzt. Die Schwierigkeit, die recht schnell erkennbar war, ist die große Differenz zwischen den Umsatzsanteilen. Zum Teil sind die Zahlen sehr hoch, viele auch sehr niedrig. Manche Prozentzahlen verändern sich in den 10 Jahren auch nur minimal.

Als erstes habe ich die Ideen zum Balkendiagramm ausprobiert und hier Varianten gebildet. Der Einsatz der Farbe wird zur Unterscheidung der Kategorien eingesetzt.

In einer Variante habe ich eine der zwei Kategorie, zur besseren Differenzierung und spannenderen Anordnung, um 90 Grad gedreht und auch hier verschiedene Gestaltungsparameter mit Abständen, Position und Farben ausprobiert.

Um Farbe nicht nur zur Unterscheidung der Kategorien zu verwenden, habe ich auch versucht Farbe dafür zu verwenden die Prozentangaben anzuzeigen. In der ersten Variante haben die beiden Bereiche jeweils eine Grundfarbe und je nach Prozentzahl wird die Kategorie in einer entsprechenden Farbabstufung dargestellt. Alle Parameter sind in Dreiecken visualisiert. Die Trennung der Jahre ist durch die Lücke mit dem ausgelassenen Dreieck erkennbar. Allerdings ist die Lesbarkeit und Decodierung dieser Variante für den Betrachtenden etwas schwieriger.

Die folgenden drei Varianten sind ähnlich aufgebaut. Die Farbintensität gibt den Prozentwert an. Der digitale Bereich ist mit rechteckigen Formen, der Digitale mit unterschiedlichen gedrehten Dreiecken visualisiert. Die Varianten unterscheiden sich in der Position der Jahre und der Elemente.

In den nächsten Varianten habe ich mit einem Raster gearbeitet. Zuerst mit einer vertikalen, dann mit einer horizontalen Zeitachse. In der ersten Variante erfolgt die Differenzierung der Bereiche über die zwei Farben und der Intensität der Farben. In den beiden anderen Varianten habe ich zusätzlich mit verschiedenen Mustern gearbeitet, um die Unterscheidung zu verstärken und außerdem noch mit einer aufsteigenden Anordnung gespielt.

In den Varianten, bei denen ich Farbe zur Darstellung der Prozentzahl eingesetzt habe, habe ich gemerkt, dass es mit meinem Datensatz schwierig ist. Die Veränderungen sind oft so klein, dass es schwierig ist, die Zahlen aus der Visualisierung auszulesen und kleine Veränderungen zu erkennen

Ich habe mich auch mit an Balkendiagramm-Variante versucht, die an ein Ei erinnert. Hier habe ich im Vergleich zu den anderen Entwürfen mit anderen Farben gearbeitet. Auch wird der Parameter Farbe wieder zur Differenzierung der Bereiche und nicht mehr für die Prozentzahl verwendet.

Ich hab in den analogen Skizzen schon ein paar radiale Entwürfe erstellt, die ich dann auch digital übertragen habe. Bei den Entwürfe und den Varianten sind die Ringen an eine Schallplatte angelehnt. Die Zeitachse läuft von innen nach außen, bei der jeder Ring für ein Jahr steht. Für die einzelnen Bereiche habe ich zuerst mit unterschiedliche Kreisen und Dreiecken gearbeitet, um die Differenzierung, die durch die Farbe gegeben war, noch zu verstärken. In den Varianten war die Grafik – vor allem in kleinerer Darstellung – zu kleinteilig und deswegen nicht so einfach zu lesen.

Deswegen habe ich mit dem gleichen kreisförmigen Raster und den Ringen eine andere Variante entwickelt, bei der die Ringe die zwei Bereiche darstellen. Es gibt für jedes Jahr einen äußeren und einen inneren Ring, der jeweils für einen Bereich steht. Ich habe verschiedene Varianten ausprobiert, einen Bereich gespiegelt, sodass der Kreis ausgefüllt ist und die Ringe in den Jahren jeweils vertikal versetzt angeordnet sind. Auch habe ich mit verschiedenen Farben, Sättigung und der Stärke der Ringe gearbeitet und so ausprobiert, was in der Unterscheidung der Bereiche und Kategorien gut funktioniert und gut lesbar ist. Im letzten Entwurf sieht man die Option, die Visualisierung in kleinen Darstellungen abzubilden, bei der jedes Jahr einen eigenen Kreis hat.

Farbwahl

Bei den Entwürfen habe ich mit dem Einsatz von Farbe und der Farbwahl experimentiert und bin am Ende zu der Entscheidung gekommen, dass ich Farbe zur Differenzierung der Kategorien verwende. Für den Bereich Physisch habe ich mich für die Farbe “Petrol” entschieden, die eine ruhige und klassische Anmutung hat und mit diesem Aspekt gut zu CDs, Vinyl oder Musikkassette passt, die eher die klassischen Verkäufe sind und etwas in die Jahre gekommen sind. Die einzelnen Kategorien in dem Bereich sind in Abstufungen der Grundfarbe dargestellt. Im Gegensatz dazu ist der digitale Bereich in einem knalligen Orange bis Gelb eingefärbt. Passend zu dem Verlauf der Daten, dass der digitale Bereich immer weiter wächst und den Physischen übertrumpft, haben die Farben auch eine lebendige, leuchtende und moderne Wirkung und stechen im Vergleich etwas mehr ins Auge.

Formensprache

In der Visualisierung des Datensatzes wird mit Kreisen gearbeitet, bei denen die Jahre in Ringen dargestellt sind. Die Formensprache passt durch die Ähnlichkeit mit einer Schallplatte thematisch zu den Daten. Da die Ringe jedes Jahr gleich breit sind, tritt die Schwierigkeit, dass Daten weiter außen im Kreis so aussehen als wären sie “mehr”, nicht ganz so stark in Erscheinung.

Typografie

In der Typografie habe ich die serifenlose Schrift “Cera Pro”, die von Jakob Runge gestaltet wurde, verwendet. Die Schrift hat einen klaren und geometrischen Charakter und passt gut zu dem Stil der Datengrafik. Aufgrund der großen x-Höhe eignet sie sich gut für den Einsatz im Webbereich und verspricht so eine gute Lesbarkeit.

Auf der Website wird die Schrift für Headlines in dem Schriftschnitt Medium und im Fließtext in Regular eingesetzt.

Plakat

Bei dem Plakat war es mir wichtig, dass die Gestaltung eine reduzierte und klare Erscheinung hat. Das Plakat soll Neugierde wecken, Lust auf mehr machen und so dazu anregen die Website zu dem Projekt zu besuchen. Daher steht die Ästhetik und nicht die Lesbarkeit im Vordergrund. Ich habe auf eine Beschriftung oder eine Legende verzichtet, so dass die einzelnen Daten schwer abzulesen sind, bzw. ohne Vorwissen es nicht möglich ist zu wissen, um was es geht.

Website

In einer Zwischenpräsentation sollten wir die finale Visualisierung der Datengrafik zeigen, die dann auf dem Plakat abgebildet wurde. Im nächsten Schritt sollte dann eine Website zu dem Projekt erstellt werden und hier das Thema, die Grafik und den Datensatz genauer aufgriffen und erklärt werden.

Skizzen Web

Genau wie bei der generellen Visualisierung habe ich auch bei dem Übertrag auf die Website mit Skizzen begonnen.

Hier habe ich verschiedene Möglichkeiten ausprobiert, wie man die Navigation machen könnte und wie die Visualisierung auf der Website eingebaut werden könnte. Dafür konnte ich mir von Anfang an einen Slider vorstellen, bei dem man auch verschiedene Varianten der Visualisierung zeigen könnte und in der Form eines Sliders eine gute Vergleichbarkeit hat.

Entwürfe in Figma

Anschließend habe ich die Ideen aus den Skizzen in dem Tool “Figma” zu mehreren Entwürfen zusammengetragen. Dazu habe ich mir auch eine grobe Seitenstruktur überlegt und schon angefangen Texte zu den Inhalten zu schreiben.

Webflow

Anschließend habe ich in “Webflow” angefangen die Website aufzubauen und habe den Content nach und nach hinzugefügt.

Die Website zu der Visualisierung habe ich so aufgebaut, dass man zuerst auf eine Startseite kommt, in der ein kurzer Titel steht und wovon man zu den einzelnen Unterseiten kommt. Es gibt eine “Über das Projekt”-Unterseite, die Hintergrundinformationen zu dem Projekt gibt und die auf diese Dokumentation verlinkt. Dazu gibt es eine Visualisierungs-Seite, bei der in einem Slider die Visualisierung in verschiedenen Varianten gezeigt wird. Die erste Abbildung zeigt nur den physischen Teil, die zweite den digitalen Teil und die dritte Variante dann beide in Kombination, wie sie auch auf dem Plakat sichtbar ist. In den Abbildungen befindet sich im unteren Teil die Legende und es werden jeweils die Jahreszahlen per Animation eingeblendet. Darunter wird kurz das Thema der Visualisierung und anschließend die Codierung erklärt. Nach den Erklärungen wird man zum Datensatz geführt, wo man die genauen Prozentwerte nachlesen kann und zusätzlich noch mehr Informationen zu den Kategorien und Bereichen bekommt. Über den “Kreis”, der immer oben links positioniert ist, kommt man zu jeder Zeit zu der Startseite zurück.

Interaktion und Animation

Damit die Visualisierung auf der Website verständlicher wird habe ich eine kleine Animation erstellt, bei der die Jahreszahlen kurz eingeblendet werden.

In weiterer Umsetzung könnte man noch mehr Interaktion programmieren, so dass ein ganzes Jahr, eine Kategorie in einem bestimmten Jahr oder ein Bereich für alle Jahre hervorgehoben wird und man noch zusätzliche Infos bekommt. In dem Video sieht man, wie das aussehen könnte: