π Public
Viewing a saved revision (read-only)
2c61305d30794451999a742f5d60eda6
Team 3 - Tankvergleich
An interactive SVG map of Europe visualizes average fuel prices per country, with a hover tooltip showing the country name and price, and a click-to-edit feature that allows users to adjust values in a pinned info box. Built with Svelte and D3.js, the map uses a D3 Geo Mercator projection and `d3.geoPath` for rendering, while a custom color scale (`d3.scaleLinear`) maps price ranges from green to red. Fuel type can be switched between Euro 95, Diesel, and LPG, with prices stored in a data store and persisted to localStorage.
AI-generated descriptionEurope Gasoline Prices
An interactive map of Europe built with Svelte and D3.js, allowing you to explore and edit average gasoline prices by country.
Features
- Interactive SVG map of Europe with responsive sizing
- Hover tooltips that follow your cursor, showing country name and current price
- Clickable countries to pin an info box and edit prices
- Real-time updates with input validation
- Clean, minimal UI with modern styling
- Graceful error handling for network issues
- Accessibility with ARIA labels and keyboard support
- D3-powered geo projection and path generation
How to Use
- Paste all files into your VizHub project
- The map loads automatically from a remote GeoJSON source
- Hover over any country to see its name and current gasoline price
- Click a country to pin the info box and edit its price
- Edit the input field and press Enter or click outside to save
- Click outside the map to unpin and deselect