Interaktive Karte

Ausgangslage

Wir standen vor der Aufgabe, komplexe globale Wirtschaftsdaten – wie etwa die MEM-Exporte der Schweiz (Maschinen-, Elektro- und Metall-Industrie) oder internationale Wettbewerbsfähigkeits-Rankings – für eine breite Zielgruppe einfach zugänglich und verständlich zu machen. Eine einfache Tabelle oder statische Grafik reicht dafür nicht aus. Ziel war die Entwicklung einer modernen, interaktiven Web-Anwendung, die es Nutzern erlaubt, Daten per Klick auf einer Weltkarte zu erkunden und schnell Einblicke zu gewinnen.

Struktur mit Klarheit

Um diese interaktive Erfahrung zu ermöglichen, setzten wir auf moderne Web-Technologien und eine modulare Architektur:

• Schnelle Oberfläche: Die gesamte Anwendung wurde mit React gebaut. Das ist eine moderne Technologie, die die Website besonders reaktionsfreudig macht. Die einzelnen Elemente (z.B. die Karte, die Diagramme) funktionieren wie Bausteine, was die App stabil und zukunftssicher macht.

• Dynamische Datenvisualisierung: Für die interaktive Weltkarte und die zugehörigen Diagramme (Balken, Rankings) verwenden wir die spezialisierte Nivo-Bibliothek. Sie sorgt dafür, dass sich die Karte automatisch einfärbt, je nachdem, welche Daten Sie gerade anschauen

Wirkung

Mit der Entwicklung dieser React-basierten Web-App haben wir eine technisch robuste und visuell ansprechende Lösung für die Webseiten Besucher:Innen geschaffen. Die Anwendung transformiert Daten in eine intuitive und benutzerfreundliche Erfahrung.

Die Nutzung von Nivo ermöglicht eine klare, farbcodierte Darstellung (Choropleth) der Kennzahlen, während die Swarm-Plots die Übersichtlichkeit bei Rankings gewährleisten. Dadurch können auch Personen ohne technischen Hintergrund – welche die Webseite besuchen – globale Zusammenhänge schnell erfassen und die Relevanz der dargestellten Daten sofort erkennen.