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)

8a6c25b7c1384ee9bf8817dfff194579

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

Timeline Visualization

An interactive dual-perspective timeline component built with Svelte and D3.js.

Features

  • Dual-column timeline layout (left/right perspectives)
  • Click-to-expand event details
  • Responsive design
  • D3-powered time scale calculations
  • Smooth animations and transitions

Project Structure

  • App.svelte - Main application component
  • Timeline.svelte - Timeline container and layout
  • TimelineEvent.svelte - Individual event component
  • store.js - Sample timeline data
  • utils/timeScale.js - D3 time scale utilities
  • index.js - Entry point