Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Team 3 - Tankvergleich

Public visualization

Post on XLinkedIn

Viewing a saved revision (read-only)

c06f20ba1015450d97249293af6ae4f6

Open

Team 3 - Tankvergleich

0 stars2🌍 Public
Mmarc.sarembe@gmail.com
Last edited Apr 16, 2026
Created on Apr 16, 2026

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 description

Europe Gasoline Prices

An interactive map of Europe built with Svelte and D3.js, allowing you to:

  • Hover over countries to see their name and average gasoline price
  • Click to pin a country and edit its price
  • Edit prices inline with an input field
  • All data persists in memory during the session

Features

  • Interactive SVG map of Europe with responsive sizing
  • Real-time hover tooltips following the cursor
  • Clickable, pinnable info boxes for price editing
  • Clean, minimal UI with modern styling
  • D3-powered geo projection and path generation
  • Graceful handling of missing data ("Keine Daten")

Project Structure

  • App.svelte - Main application entry point
  • src/lib/EuropeMap.svelte - Map component with D3 geo rendering
  • src/lib/CountryInfo.svelte - Hover/pinned info box component
  • src/lib/data/prices.js - Price data store and utilities
  • index.js - VizHub entry point

How to Use

  1. Paste all files into your VizHub project
  2. The map loads automatically from the remote GeoJSON source
  3. Hover over any country to see its current price
  4. Click a country to pin the info box and edit its price
  5. Click outside or click another country to unpin

Data

Prices are stored in memory using a Svelte store with initial values for:

  • Germany, France, Italy, Spain, Poland, Netherlands

Add more countries by editing src/lib/data/prices.js.

Tech Stack

  • Svelte – UI rendering and state management
  • D3.js – Geo projection, paths, and bounds calculations
  • GeoJSON – Remote Europe map data