Europa Benzinpreise

Eine interaktive Karte von Europa, erstellt mit Svelte und D3.js, mit der Sie durchschnittliche Benzinpreise nach Land erkunden und bearbeiten können.

Funktionen

• Interaktive SVG-Karte von Europa mit responsiver Größenanpassung
• Hover-Tooltips, die dem Cursor folgen und Land sowie aktuellen Preis anzeigen
• Anklickbare Länder, um eine Info-Box zu fixieren und Preise zu bearbeiten
• Echtzeit-Aktualisierungen mit Eingabevalidierung
• Übersichtliche, moderne Benutzeroberfläche
• Fehlerbehandlung bei Netzwerkproblemen
• Barrierefreiheit mit ARIA-Labels und Tastaturunterstützung
• D3-basierte Geo-Projektion und Pfadgenerierung

Verwendung

1. Alle Dateien in Ihr VizHub-Projekt einfügen
2. Die Karte lädt automatisch von einer entfernten GeoJSON-Quelle
3. Hover über ein Land, um Name und aktuellen Benzinpreis zu sehen
4. Klicken Sie ein Land an, um die Info-Box zu fixieren und den Preis zu bearbeiten
5. Eingabefeld bearbeiten und Enter drücken oder außerhalb klicken zum Speichern
6. Außerhalb der Karte klicken, um die Auswahl aufzuheben

Projektstruktur

• App.svelte – Haupt-App-Komponente
• lib/EuropeMap.svelte – Interaktive Kartenkomponente
• lib/CountryInfo.svelte – Tooltip- und Bearbeitungskomponente
• lib/Legend.svelte – Farblegenden-Komponente
• lib/data/prices.js – Preisspeicher und Hilfsfunktionen
• lib/data/colorScale.js – D3-Farbskala