Darstellen/Simulation

In diesem Fach beschäftigen wir uns mit Form, Farbe und Ordnungsprinzipen, um Zusammenhänge in größeren Datenmengen sichtbar zu machen.
Unsere Aufgabe war es Daten zu visualisieren, indem wir Daten analysierten, uns dazu ein Konzept überlegten und wie die grafische Darstellung aussehen könnte. Man kann die Daten sowohl händisch visualisieren als auch programmiertechnisch. Die Aufgabe bestand darin eine Möglichkeit zu finden ohne jegliche Beschriftung und Legende mit der Datenvisualisierung Information zu vermitteln.

Themenfindung

Die Wahl unseres Themas hing auch mit den Datensätzen zusammen, da es uns wichtig war einen möglichst vollständigen Datensatz zu benutzen. Unsere Daten setzten sich aus zwei Datensätzen zusammen, die Energieproduktion bzw. der Verbrauch von Kontinenten/Ländern und der Population der Kontinente/Länder. Dabei waren vor allem folgende Datenpunkte von Belangen, Jahr, Land/Kontinent, Bevölkerungszahl, Energiequellen und Energieverbrauch pro Energiequelle.

Darstellungsformen

Nachdem wir uns einen guten Überblick über die vorliegenden Daten schaffen hatten, haben wir uns mit der Darstellung dieser näher beschäftigt. Dabei haben wir unterschiedliche Darstellungsformen ausprobiert.

Nachdem wir uns verschiedene Darstellungsvarianten näher angeschaut haben entschieden wir uns dafür das Thema Punktecluster näher zu betrachten. Daraufhin probierten wir unterschiedliche Varianten aus.

Die erste Variante ist die Kartenansicht (Punktecluster = ein Land). Hier geben die Punkte die „Tatsächliche“ Position der Länder an. Die Anzahl der Punkte stellt die Gesamtbevölkerung dar. Und über den Farbcode werden die prozentualen Anteil von grünem Stromverbrauch dargestellt.

Die zweite Variante ist die Kartenansicht (ein Punkt = ein Land). Hier geben die Punkte ebenfalls die „Tatsächliche“ Position der Länder an. Die Größe der Kreise stellt die Gesamtbevölkerung dar. Und über den Farbcode werden, wie bei der ersten Variante, die prozentualen Anteil von grünem Stromverbrauch dargestellt. Da sich einige Kreise sehr stark überschneiden und man sie eventuell dadurch schlechter sehen kann haben wir uns überlegt, dass man die Länder eventuell entzerrt.

Die dritte und letzte Variante ist das Streudiagramm. Wir wollten es so darstellen, dass ein unsichtbares Koordinatensystem entsteht. Die X-Achse stellt die Bevölkerung in einem Land dar, die Y-Achse stellt den Anteil von der grünen Energie im Gesamtverbrauch dar. Und der Farbcode soll die Kontinente darstellen.

Finale Visualisierung

Streudiagramm weiter ausgebaut

Um trotz der abstrakten Darstellung und dem Fehlen von jeglicher Information, in Form von Schrift oder Bild, eine gute Lesbarkeit zu erreichen, entschieden wir uns für das Streudiagramm als Grundlagen unserer Visualisierung. Nachdem wir dies festgelegt hatten beschäftigten wir uns mit der Thematik Farben. Zum einen wollten wir die unterschiedlichen Quellen der Energiegewinnung farblich codieren und wir wollten die sieben Kontinente (Afrika, Asien, Europa, Nord-, Südamerika & Ozeanien) mit einer Farbe darstellen.

Für die Farbfindung haben wir dann verschiedene Kombinationen ausprobiert und mit dem Hintergrund des Streudiagramms und der Deckkraft der einzelnen Datenpunkte gearbeitet.

Bei dem nächsten Schritt haben wir uns die Datenpunkte etwas detaillierte in ihrer Darstellung angesehen. Dabei haben wir besonders mit der Deckkraft und der Strichstärke und -farbe der einzelnen Kreise gearbeitet. Da wir in unserer Visualisierung häufig überschneidende Punkte hatten war klar, dass wir die Deckkraft etwas senken müssen um ein bessere Lesbarkeit zu erreichen.
Durch eine Strich, welcher mit voller Deckkraft gefärbt wurde, wurde die Lesbarkeit der Kreise nochmal verbessert.

Anschließend haben wir uns nochmal einen Überblick verschafft, welche Daten wir wie am besten darstellen können. Dafür hatten wir uns unsere Daten nochmal genauer angeschaut und uns überlegt wo wir welche Daten am besten darstellen können. Unser Streudiagramm bietet uns die X-Achse, die Y-Achse, die Größe und Farbe der Kreise sowie den Hintergrund als Möglichkeit Information zu übermitteln. Auf der Grundlage dieser Möglichkeiten überlegten wir uns welche Daten wir mit welcher Darstellungsmöglichkeit wir am besten darstellen können. Wir hatten uns folgende Daten aus unserer Datenquelle rausgesucht:

• der Gesamtverbrauch
• den prozentualen Anteil der Grünen Energie
• den Länder/Kontinente
• der Pro-Kopf-Verbrauch
• die Population und der prozentuale Anteil der einzelnen grünen Energiequellen

Erste Visualisierungen mit P5.js

Nachdem wir uns Gedanken über unsere Darstellungsmöglichkeiten verschafft haben fingen wir an erste Visualisierungen mit P5.js zu erstellen. Dabei stellten wir immer den selben Zeitpunkt (2017) mit verschiedenen Daten für die X- und Y-Achse und dem Radius dar.

Dabei stießen wir auf unterschiedliche Probleme. Zum einen wollten wir die Größe der Datenpunkte so darstellen, dass es möglich ist zu erahnen um welches Land es sich handeln könnte, trotz dem Fehlen von jeglicher Information in Form von Typografie oder bildlicher Darstellung. Bei der letzten Darstellung sieht man zwei größere blaue Punkte welche ganz rechts liegen und ein kleinen roten Punkt welche ganz oben liegt. Das Problem dabei ist, dass die beiden blauen Punkte Norwegen und Island, welches relativ kleine Länder sind, und der rote Punkt China, welches ein deutlich größeres Land ist, darstellen. Zudem wurden in manchen Darstellungsvarianten zu viele Datenpunkte zu klein.

Welche Daten werden dargestellt?

Da wir den Fokus auf erneuerbare Energie und Verbrauch der einzelnen Menschen legen wollten stellt die X-Achse den prozentualen Anteil von der grünen Energie bzw. von den einzelnen grünen Quellen dar. Für die Y-Achse wählten wir den Pro-Kopf-Verbrauch, da wir so in Kombination mit der X-Achse darstellen können wie viele ein Mensch pro Land verbraucht und wie viel von diesem Gesamtverbrauch tatsächlich durch erneuerbare Energie gewonnen wird. Bei der Darstellung der einzelnen Datenpunkte stellt die Farbe den Kontinent und die Größe die Population dar, was dazu führt, dass es leichter ist, abzuschätzen um welches Land es sich handeln könnte.

Folgende Farben gaben wir den Kontinenten:

• Afrika ist gelb
• Asien ist rot
• Europa ist blau
• Nordamerika ist hellgrün
• Südamerika ist dunkelgrün
• Ozeanien ist violett.

Für die Hintergrundfarbe unserer Streudiagramms nutzen wir einen Verlauf, welcher die X-Achsen- und Y-Achsen-Belegung visuell unterstützt und dem Leser*in vermittelt was die Achsen darstellen. Dafür arbeiteten wir mit einem diagonal ausgerichteten Verlauf, welcher von einer festgelegten dunklen Farbe in eine Farbe, welche die einzelnen Quellen repräsentiert, übergeht.

Der Bereich, welcher für einen hohen Pro-Kopf-Verbrauch und einen geringen Anteil an grüner Energiegewinnung steht, wir durch den Farbverlauf in dem sehr dunklen Blau dargestellt, während der Bereich, welcher für einen geringen Pro-Kopf-Verbrauch und einen hohen Anteil an grüner Energiegewinnung steht, in dem hellen farbigen Bereich liegt.

Interaktive Möglichkeiten

Um die unterschiedlichen Energiequellen und einen zeitliche Verlauf darzustellen, entschieden wir uns für den Einbau von zwei Interaktionen. Zum einen wird durch das Bewegen der Maus von links nach rechts der zeitliche Verlauf von 1965-2019 dargestellt und durch ein Linksklick der Maus wird eine neu Darstellung geladen.

Zusammenfassung

Unsere fertige Visualisierung ist ein interaktiver P5.js-Sketch geworden, welcher Daten zum Thema grüne Energie und Energieverbrauch visualisiert. Dabei wird der Pro-Kopf-Verbrauch (Y-Achse) im Vergleich mit dem prozentualen Anteil von grüner Energieproduktion (X-Achse) dargestellt. Gleichzeitig geben die Datenpunkte über ihren Radius und Farbe Rückschlüsse über die Population bzw. um welchen Kontinent es sich handelt. Der Hintergrund unterstützt dabei die Achsen-Belegung und stellt mit seiner Farbe die verschiedenen grünen Energiequellen bzw. allgemein die grüne Energie dar. Für die Darstellung der Zeitspanne (1965-2019) muss die Maus von links nach rechts bewegt werden und um eine neue Darstellung zu laden muss einmal auf den Sketch geklickt werden.