Skip to main content
SimilarExport ZIP
100%

Team 3 - Tankvergleich

✓ Published2🌍 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

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
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Team 3 - Tankvergleich

An interactive choropleth map of European fuel prices lets users hover over countries to view prices, click to pin a country, and edit its price values directly. A fuel-type selector switches between Euro 95, Diesel, and LPG datasets, driving an SVG map built with `d3.geoMercator` and `d3.geoPath`. Country boundaries are filtered from a GeoJSON source, and a custom color scale generated by `d3.scaleLinear` maps prices from green to red, with a legend showing the gradient range.

Ddaria.zakharova@axelspringer.com
91% match
Loading thumbnail…

Fork of Team 3 - Tankvergleich

This interactive map of Europe displays gasoline prices per country, with price values shown in an info box when a country is hovered or clicked. Clicking a country pins the info box, allowing users to edit the price for that country, which updates the underlying data store. The visualization uses Svelte for the UI, and D3’s `geoMercator` projection and `geoPath` to render the GeoJSON map data.

Ddaria.zakharova@axelspringer.com
90% match
Loading thumbnail…

Fork of Choropleth Map

This interactive choropleth map compares fuel and crude oil consumption across European countries during the spring of 2020. A slider lets users switch between April, May, and June to update both the colored country regions and the overlaid graduated circles, which represent fuel and crude oil values. The visualization uses D3 v5 with a geoAzimuthalEqualArea projection, geoPath for rendering TopoJSON boundaries, and scaleSqrt for circle sizing. A separate color legend and D3 zoom functionality are included. Data is loaded from CSV and TopoJSON files.

AAli
69% match
Loading thumbnail…

project-SDV

This heatmap visualizes weekly U.S. retail gasoline and diesel prices from 1995 to 2021, with columns representing different fuel grades and formulations, and rows representing weekly dates. Color intensity encodes price levels, using a viridis color scale. Built with D3.js v7, the visualization renders as an SVG using `d3.scaleBand` for axes, `d3.timeFormat` for date parsing, and `d3.interpolateViridis` for color mapping. A tooltip, triggered by mouseover events, displays the column description, date, and value, while a gradient legend shows the color-to-price correspondence.

RRuthvik Bairaboina
68% match
Loading thumbnail…

Fork of Stylized Line Chart

A choropleth map of Germany visualizes diesel prices by state using a yellow-orange-red sequential color scale. The map is rendered as SVG paths, with each region's fill color determined by the diesel value from a dataset of the German states. The D3.js library handles geographic projections via geoMercator and geoPath, while React manages the component state and data fetching via the csv and json API calls.

GGuilinabaoge
68% match
Loading thumbnail…

TestProjEurope

This interactive map of Europe, built with D3 v4, visualizes geographic data for the continent. The visualization uses a custom GeoJSON file to render country boundaries, with vector shapes drawn onto an SVG canvas. The map is constructed using D3's geographic path generator, allowing for smooth zooming and panning interactions. The project appears to be a test or demonstration of mapping capabilities, with the focus on displaying the geometry of European countries in a clean, minimal style.

HHectorDt
67% match
Loading thumbnail…

GasPrice

The visualization displays diesel fuel prices from multiple gas stations over one week, using a single line chart with a time-scaled x-axis and a linear price y-axis. The SVG rendering uses D3 v7 APIs including `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and a `line` generator with `curveBasis` smoothing. Data is loaded via `d3.csv`, with dates parsed and prices converted to numbers, and the chart includes gridlines and labeled axes.

Ssvsiefert
66% match
Loading thumbnail…

gaz_map

This interactive map visualizes changes in Russian gas transit routes to Europe across four scenarios, using buttons to toggle between years 2006, 2013, and projected states. Animated SVG paths trace pipelines like Nord Stream and South Stream, with a tooltip and explanatory text panels. The visualization uses D3 v3 with `d3.geo.path` for geographic rendering and TopoJSON for world country boundaries, while colored lines and CSS-styled buttons drive the scenario switching.

MMraleksa
66% match