Programmiertes Entwerfen 2 (IG)
Aerial Bombing Operations in WW2
Beschreibung
Diese Datenvisualisierung zeigt die Verteilung der Luftangriffe im Umfeld Deutschlands während des Zweiten Weltkriegs. Darüber hinaus veranschaulicht sie die Beziehungen zwischen den beteiligten Ländern, indem sie aufzeigt, wie häufig einzelne Nationen andere angegriffen haben.
Datensatz
Ich habe mir für die Datenvisualisierung im Kurs Programmiertes Entwerfen 2 zu Beginn des Projekts mehrere Datensätze herausgesucht. Meine endgültige Auswahl fiel dann auf den Datensatz “Aerial Bombing Operations in WW2”, welcher mit grob 180 000 Zeilen und 46 Spalten erst sehr umfangreich erschien. Doch wie sich später herausstellte, fehlte in vielen Spalten ein Großteil der Daten.
Nachdem ich diesen herausgesucht hatte, musste ich ihn erst einmal kürzen. Dazu entfernte ich zuerst unnötige Spalten, für den ersten Datensatz waren das alle außer die Spalten Longitude, Latitude und Weight (tons). Danach rundete ich die Werte von Longitude und Latitude und fasste alle Zeilen mit demselben gerundeten Wert zusammen, wodurch aus einzelnen Zielen Bereiche wurden. Je weiter man die Nachkommastellen kürzt, desto größer werden diese Bereiche und desto gröber wird die Heatmap.
Der erste Datensatz war also für die Heatmap, diese war aber noch sehr fein.
Also machte ich noch einen zweiten, bei dem ich die Werte weiter zusammenfasste um noch eine gröbere Heatmap bekommen zu können.
Für den dritten Datensatz wählte ich dann die Spalten Mission Date, Country und Target Country. Bei dieser kamen dann jedoch wie man später sieht nur letztere zwei zu Gebrauch.
Ideenfindung
Dann überlegte ich, wie ich die darin enthaltenen Daten möglichst kompakt aber dennoch verständlich und am besten auch optisch ansprechend darstellen könnte. Also machte ich einige Skizzen. Schnell wurde jedoch klar, dass ich in die Richtung einer Heatmap gehen werde.
Skizze 1
Diese Art von Heatmap würde die Strecken der Bomberflugzeuge anzeigen, jedoch wäre das zu unübersichtlich und es fehlten zudem einige Daten, um dies sinnvoll umzusetzen.
Skizze 2
Also muss die Heatmap dann ohne die Strecken der Bomber gestaltet werden.
Skizze 3
Die Grafik sollte außerdem nicht 3D sein.
Skizze 4
Hier würde dargestellt werden, welches Land welches angegriffen hat.
Entwicklung
Nun ging es daran, die Ideen im Code umzusetzen. Dabei nutzte ich zu Beginn noch Copilot, doch dieser produzierte nicht das gewünschte Ergebnis und oft gab es sogar Fehler, sodass nichts angezeigt wurde. Dann stieg ich auf Cursor.ai um und dort klappte es weitaus besser. Als erstes erstellte ich die Heatmap, wobei ich noch ein rotes Farbschema benutzte. Dieses schien mir zu diesem Zeitpunkt passend zu Bombeneinschlägen.
Außerdem fügte ich einen Hover-Effekt hinzu. Dieser zeigt das Gewicht an, welches im jeweiligen Bereich abgeworfen wurde.
Heatmap | Zwischenstand 1
Um die unterschiedlichen Kreisgrößen besser voneinander zu trennen, habe ich nun drei Farben eingefügt welche das Gewicht in drei verschiedene Mengenbereiche einordnen. Diese kann man oben links in der Legende jeweils (de-)aktivieren.
Heatmap | Zwischenstand 2
Später änderte ich dann noch die Größe der Kreise, wobei ich eine Mindestgröße festlegte und sich die Kreise ab dieser in einer logarithmischen Skala größer skalierten.
Dann wollte ich die Verhältnisse zwischen den Ländern genauer veranschaulichen. Dabei entstand zuerst folgende Visualisierung:
Attacks | Zwischenstand 1
Doch hier fiel mir schnell auf, dass die Anordnung in Kreisen bei dieser Art Diagramm nicht sinnvoll ist. Also überlegte ich, was für diese Visualisierung wichtig ist:
- Es hat nur 5 Angriffsländer in dem Datensatz
- Die Anzahl, wie oft ein Land von einem anderen angegriffen wurde, soll sichtbar werden.
Somit lag nahe, dass ich eine Art Balkendiagramm machen werde, bei dem die 5 Countries unten nebeneinander angeordnet sind. Oberhalb dieser Balken sind dann die Balken der Target Countries. Die Höhe der Balken wird durch die Anzahl bestimmt, wie oft sie angegriffen wurden. Das geschah prozentual an den Target Countries der USA. Denn diese hatten die mit Abstand höchsten Werte und bildeten somit den Maßstab für die Höhe der Target Countries anderer Länder.
Beim Hovern über einen Balken soll dann das Land und die Anzahl der eingesteckten Angriffe angezeigt werden. Da manche Ländernamen sehr lang waren fügte ich außerdem den Effekt hinzu, dass immer das Segment (Country & dazugehörige Target Countries), über welches gehovert wird breiter skaliert wird. Dadurch war der Text vollständig innerhalb der Balken und überschnitt sich auch nicht mit der Zahl. Die anderen Balken passen sich außerdem immer an, sodass keine Lücken zwischen den Balken entstehen.
Attacks | Zwischenstand 2
Ich fügte außerdem noch die Funktion hinzu, dass man zwei Target Country Balken miteinander vergleichen kann, indem man auf den einen klickt und dann über den anderen Balken hovert.
Attacks | Zwischenstand 3
Hier hatte ich außerdem die Farben auf einen Verlauf von blau nach lila angepasst, da diese ähnlich dunkel sind und erst durch Veränderung der Sättigung und Transparenz das lila noch dunkler erschien. Dadurch waren die großen Werte hervorgehoben, ohne die kleineren Werte völlig in den Schatten zu stellen. Zusätzlich sind die Farben untereinander stimmig und symbolisieren eine eher traurige Stimmung, was thematisch passend ist. Dieses Farbschema benutzte ich schließlich auch bei den zwei Heatmaps und kam zu folgendem…
Endergebnis
Die Heatmap zeigt noch etwas genauer die Luftangriffe
Heatmap
Bei dieser Heatmap sieht man gerade im Vergleich zur detaillierteren Heatmap die Bereiche, in denen generell viel bombardiert wurde, anstatt nur kleine Punkte. Diese waren häufig Hauptstädte oder andere wichtige Kriegsziele.
Heatmap rough
Bei diesem Attacks Schaubild kann man herauslesen, wie oft ein Land andere Länder angegriffen hat oder angegriffen wurde.
Attacks
