Earthquakes 1900 - present

Die Aufgabe in Programmiertem Entwürfen 2 war es dieses Semester eine Datenvisualisierung aus eine selbstgewähltem Datensatz zu erstellen. Vorab gab es diverse Übungen zu Infografiken und Farbkontrasten:

Significant Earthquakes, 1900-Present

Ich habe mich für einen Datensatz über alle Erdbeben seit 1900 mit einer Magnitude von 5 oder höher entschieden, diesen dann gekürzt, Parameter ausgesucht und angepasst. Somit hatte 3298 statt 99148 Zeilen und folgende Parameter.

Gewählte Parameter:

timecount: Anzahl an Erdbeben

time: Auf Jahre reduziert

lat_round: Breitengrad gerundet

long_round: Längengrad gerundet

magmean: Durchschnittliche Magnitude

magsum: Addierte Magnitude aller Erdbeben

place: Auf Länder reduziert

kaggle.com/datasets/usamabuttar/significant-earthquakes

Erster Entwurf

Nachdem der Datensatz angepasst und ausgwählte Parameter bestimmt wurden, habe ich zunächst eine Skizze mit meiner groben Idee entworfen.

Idee: Alle Erdbeben nach Längen- und Breitrengraden auf den Screen zu mappen um eine Heatmap zu erstellen.

Dies habe ich dann im Code erstmal umgesetzt.

Da aber noch alle Kreise den selben Radius und Farbe hatten, war kaum Kontarst gegeben und ich haben in den nächsten Schritten die anderen Parameter wie, magmean (durchschnittliche Stärke) und timecount (Anzahl an Erdbeben) mit eingebracht. Der Radius wurde auf die Anzahl an Erdbeben angepasst.

Die Farbe wurde auf die durchschnittliche Stärke gemappt, sodass mehr Kontrast entsteht.
Hier eine paar Frabvarianten:

Interaktionen

Um die Datenvisualisierung noch interktiver zu gestalten, habe ich ein Hover und ein Clicklabel hinzugefügt. Somit konnten mehr Informationen zu jedem Erdbeben angezeigt und mit einander verglichen werden. Der angelickte Punkt färbt sich durch Anklicken blau, und durch das Hovern über eine Punkt wird dieser Hervorgehoben da sich die Opacity der anderen Punkte senkt.

Zweite Ansicht

Nachdem die erste Ansicht ausgestaltet war, habe ich mit einer Zweiten angefangen, um den Verlauf über die Jahre besser darstellen zu können. Hierzu hab ich eine Toggleswitch oben links eingebaut und ein Balkendiagramm erstellt, welches die Zunahme über die Jahre anzeigt.

Diese Anicht war jedoch noch recht nüchtern und fast schon langweilig, weswegen ich die Balken mittig angeordnet habe. Hierzu kam mir ein Seismorgraph als Inpiration, welcher die Bodenbewegungen misst und in ähnlicher Form notiert.

Um den Seismograph noch mehr zu ähneln, habe ich dann die Dicke der Blaken angepasst und später für mehr Klarheit und Struktur einen Achse und beschriftungen hizugefügt.

Auch in dieser Ansicht ist der selbe Hover wie in der Erste, um mehr Informationen zu jedem Jahr anzeigen zu können.