Programmiertes Entwerfen 2
Powerplants around the world
Aufgabenstellung
Im Kurs „Programmiertes Entwerfen II“ und „Programmiersprachen II“ hatten wir die Aufgabe, eine interaktive Datenvisualisierung zu erstellen. Als Datensatz sollten wir einen existierenden, moderat großen Datensatz auf einschlägigen Plattformen wie bspw. Kaggle suchen. Die Visualisierung sollte mithilfe von html, css, javascript und jquery umgesetzt werden. In „Programmiertes Entwerfen II“ machten wir dazu Vorübungen der Visualisierung, welche am Ende angefügt sind.
Walkthrough
Datensätze
Die Datenvisualisierung beruht auf zwei Datensätzen. Global Powerplants listet 35 000 Energiekraftwerke rund um den Globus auf. Der Datensatz Production by source zeigt die jährliche Verteilung der Energieproduktion nach Typ.
Global Powerplants
Folgende Daten werden geliefert:
- Name des Kraftwerks
- Land
- Längengrad
- Breitengrad
- Kapazität
- Typ
- Der Datensatz hat 35 000 Einträge.
Production by source
Die Verteilung der Energieproduktion wird in % angegeben. Des Weiteren gibt es folgende Angaben:
- Verteilung nach Land
- Verteilung nach Kontinent
- Globale Verteilung
- Daten von 1985-2020
- Der Datensatz hat 6 900 Einträge.
Leitfragen
Die Analyse der Daten ergab folgende Leitfragen:
- Wie stellt sich die geografische Verteilung der Kraftwerke dar?
- Wo häufen sich Kraftwerke?
- Wo häufen sich Kraftwerke eines bestimmten Typs?
- Wo finden sich wenige oder keine Kraftwerke?
- Wo wird besonders viel/wenige Energie produziert?
- Ist die Energieproduktion proportional zur Anzahl der Kraftwerke?
Erste Visualisierung
Setzt man für jedes Kraftwerk einen Punkt auf der Weltkarte, lassen sich schon einige Dinge herauslesen:
Das Abbild der Punktverteilung stellt eine Weltkarte dar. Regionale Häufungen der Punkte lassen die Verteilung der Kraftwerke annäherungsweise erkennen. In einigen Bereichen finden sich sehr wenige Kraftwerke, bspw. in Afrika.
Eine Erweiterung der Visualisierung ist notwendig, um folgende Zusammenhänge zu erkennen:
- Wo häuft sich welcher Kraftwerktyp?
- Wie sehen die Typ-Verteilungen im Vergleich aus?
- Wo wird wieviel Energie produziert?
Heatmap
Als Lösung bietet sich eine Heatmap an. Sie kann die Überhäufung der Datenpunkte aufheben und Daten zusammenfassen. Gleichzeitig ist sie schneller zu lesen und bietet praktische Interaktionsmöglichkeiten.
Durch die Farbkodierung lässt sich die Verteilung der Kraftwerke erkennen. Allerdings ist die Farbwahl noch nicht optimal, daher ist eine Änderung notwendig - Hell und gesättigt steht dann für höhere Werte, dunkel und ungesättigt für niedrige Werte:
Die Werte auf der Abbildung sind besser lesbar, allerdings zeigt die Verteilung viele gleiche Farbtöne. Eine Verschiebung der Farbskala ist notwendig, um die Unterschiede im unteren Bereich erkennen zu können:
Coding
Da für die Visualisierung vorgesehen war, bestimmte Elemente zu animieren, musste der Code entsprechend strukturiert sein. Die größte Herausforderung war dabei, Daten aus verschieden kumulierten und gruppierten Datensätzen irgendwie mit den jeweiligen divs zusammenzubringen. Hierfür wurde in javascript eine map erstellt, in die zunächste alle Werte des leeren Grids geschrieben wurden. Aus den verschiedenen Datensätzen wurden dann die Daten in der map an die richtige Stelle geschrieben.
Elemente der finalen Datenvisualisierung
Die Datenvisualisierung teilt sich in verschiedene Bereiche:
