Programmierung

Datenstruktur

Meine Programmierung setzt sich aus meiner HTML-Datei, CSS-Datei, sowie meiner data.js und main.js zusammen. Ich habe die Libraries gmynd.js und jquery.min.js genutzt.

data.js

In meiner data.js habe ich meine Daten aus der zuvor umgewandelten JSON-Datei World Happiness Datensatz hinzugefügt. Als ich dann anfing, meine Weltkarte zu programmieren, habe ich zusätzlich auch noch einen weiteren Datensatz hinzugefügt, welcher die Breiten- und Längengrade der Länder beinhaltet.

Da ich im Verlauf des Projektes gemerkt habe, dass mein Datensatz leider einige Lücken aufweist, habe ich mich entschieden, die Daten, bei denen es Lücken bei den Parametern gibt, herauszufiltern, sodass sie gar nicht angezeigt werden. Dies ist ebenfalls in der data.js passiert.

main.js

In meiner main.js findet meine Hauptprogrammierung statt. Zuerst habe ich mit der Programmierung meiner Detailansicht begonnen. Dafür wurden meine Länderpunkte nach dem Score sortiert und in einer Linie angeordnet. Hier wurden auch die Farben auf die jeweiligen Länderpunkte zugeordnet. Die Punkte, die einen kleineren Score als 4 haben, bekommen die Farbe Dunkellila (#8644A2), wenn der Score zwischen 4 und 5 liegt, Lila (#D862BC), zwischen 5 und 6 Helllila (#E59BE9), zwischen 6 und 7 Orange (#FFBC7D) und alle über 7 Gelb (#FFD14D).

Danach habe ich meine Punkte für die Parameter gezeichnet und übereinander angeordnet. Die Werte habe ich mit 10 multipliziert, da die Originalwerte im Bereich von 0 bis 1 lagen. Damit ganze Punkte entstehen, habe ich die Werte dann auch noch auf ganze Zahlen gerundet. Um die einzelnen Parameter über das Klicken der Legende einzeln oder gesamt anzuzeigen, gibt es die if-Funktion “if (drawCategory === ‘socialsupport’ || drawCategory === ‘all’)”.

Tooltips
In meinen Tooltips werden der Ländername sowie der Score angezeigt. Dabei ist der Ländername in fett geschrieben. Ich hatte das Problem, dass wenn man über die Punkte ganz rechts am Bildschirm hovert, der Tooltip aus dem Bildschirm verschwindet, da dort kein Platz mehr ist. Das habe ich gelöst, indem der Tooltip, sobald er zu weit rechts am Rand ist, auf der linken Seite des Mauszeigers angezeigt wird.

Weltkarte
Als ich dann meine Weltkarte beginnen wollte, brauchte ich noch die Koordinaten der Länder. Deshalb habe ich einen weiteren Datensatz hinzugefügt und mit meinem ersten über die Ländernamen gemerget.

Um die Weltkarte zu zeichnen, wurden die Länderpunkte an den richtigen Koordinaten gesetzt und wie zuvor mit der gleichen Farbcodierung versehen. Ich habe für diese Ansicht nur die Punkte für das Jahr 2023 genutzt. Außerdem habe ich die gesamte Ansicht noch verschoben, sodass sie visuell besser platziert ist.

Differenzen
Dann sollten jeweils die Differenzen von dem ausgewählten Jahr zu 2023 berechnet werden, sodass die Differenz zum einen in den Tooltips angezeigt werden kann und die Konturstärke bei negativer Differenz Lila und bei positiver Gelb angezeigt wird. Außerdem habe ich Zahlenräume festgelegt, bei denen die Kontur dicker werden soll.

Problem: Animation
Eigentlich war mein Plan, am Ende noch eine Animation einzubauen, bei der die Länderpunkte der Weltkarte an die geordnete Linie in der Detailansicht fliegen sollen. Dazu mussten die Punkte der einen Ansicht mit der anderen Ansicht übereinstimmen. Da bei Lücken jedoch Daten herausgelassen werden, sind es nicht immer die gleichen Länder. Das führte zu Problemen. Nach dem Versuch sah meine eine Ansicht so aus:

Deshalb habe ich mich entschieden, mich lieber nochmal um andere kleine Probleme, die ich zu dieser Zeit noch hatte, zu kümmern und das Layout final anzupassen und auf die Animation zu verzichten.