Yplore

Es gab viele Hürden in diesem Projekt. Die größte war es, die D3-Bibliothek zu verstehen und zu integrieren. Es gibt zwei Möglichkeiten D3 in Kombination mit Gatsby/React zu verwenden. Die erste Möglichkeit ist es, dass man die Bibliothek zum Rechnen der übergebenen Daten verwendet und die zweite Möglichkeit besteht daraus, D3 zum Rendern von DOM-Elementen zu nutzen.

Neben der Integration der Bibliothek war auch das Visualisieren und Animieren der KML-Daten in D3 eine Herausforderung. Um die Daten visualisieren zu können, musste ich mit diversen Funktionen den Input umwandeln, so dass diese durch ein SVG dargestellt werden konnten. Neben der Visualisierung war die Animation schwierig. Diese sollte in Interaktion mit dem Benutzer und den Videos reagieren können. Durch die Hilfe der D3 Dokumentation, durch diverse Kurse und Blogs habe ich D3 erfolgreich implementiert und es geschafft, meine KML-Daten auf der Karte nicht nur zu visualisieren, sondern auch noch zu animieren.