Programmierung

Durch meine ausführlichen Visualisierungen in Figma hatte ich bereits eine genaue Vorstellung davon, wie es am Ende aussehen sollte. Auch die Farben standen für mich schon relativ früh fest. Das erleichterte mir zu Beginn das Programmieren sehr, und meine ersten Versuche sahen schnell relativ „fertig“ aus, da die Farben und die Anordnung stimmten.

Werte runden
Zu Beginn rundete ich meine Werte aus meinem Datensatz, sodass mein Strahlendiagramm keine zu großen Ausmaße annimmt und auf meinem Bildschirm noch darstellbar ist. Da sich in meinem Datensatz eine relativ große Spanne von 0,1 % bis etwa 8,00 % befindet, wurden die Werte gerundet.

Der Toggle-Button stammte noch aus einer früheren Hausaufgabe aus dem Kurs Programmiersprachen 2. Daher begann ich nun mit weiteren gestalterischen Elementen, wie der Überschrift, der Legende und meinem Slider, der durch die Jahre iterieren sollte. Hierbei lässt sich auch erkennen, dass sich die Farben im Vergleich zu meiner ersten Ansicht noch etwas geändert haben, da die Unterscheidbarkeit in manchen Fällen noch nicht ganz gegeben war. Außerdem wurde die Rundung der Werte nochmals im Code angepasst. Es ist ebenfalls zu erkennen, dass hier die Ansicht der Länder bereits nicht mehr nach dem Alphabet, sondern nach der Größe sortiert wird.

Styling
Anschließend habe ich die Legende und Schrift mit Hilfe von CSS mittig angeordnet und einen Toggle für den zweiten Bildschirm integriert. Außerdem entschied ich mich dafür, dass mein Strahlendiagramm zunächst nach dem Alphabet der Länder erscheinen soll und diese Sortierfunktion durch einen Button aktiviert werden kann. Generell habe ich versucht, das Styling in die CSS-Datei auszulagern.

Toggle Button
Nun ging es weiter mit den Toggle-Buttons. Ich wollte noch einen dritten Bildschirm mit der Weltkarte integrieren, wofür ich einen weiteren Button benötigte. Hier hatte ich zu Beginn Schwierigkeiten, dass diese Toggle-Buttons erst beim zweiten Klick die Ansicht wechselten. Daher erstellte ich nochmals neue Buttons, um dieses Problem zu lösen.

Tooltips
Die Tooltips erscheinen, wenn über die einzelnen Punkte oder Balken gehovert wird. Das Styling wurde dabei in CSS angelegt, der Tooltip an sich aber in JavaScript eingebunden.

Map
Für die Weltkartenansicht habe ich meinen Datensatz mit Daten der Längen- und Breitengrade der Welt gemercht. Dies funktionierte besonders gut, da mein Datensatz bereits den „alpha3Code“ enthielt. Somit konnte ich die Daten mergen und meine Weltkarte zeichnen lassen.

Bar Chart
Das Balkendiagramm zeigt die Differenz der einzelnen Krankheiten auf der gesamten Welt über die Jahre an. Hierbei werden immer zwei Jahre miteinander verglichen: 1990 mit 1991, 1991 mit 1992 und so weiter.