Fork of Team 3 - Tankvergleich

100%

Fork of Team 3 - Tankvergleich

✓ Published0🌍 Public

Last edited Apr 16, 2026

Created on Apr 16, 2026

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.

AI-generated description

MIT Licensed

Similar vizzes

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

93% match

Loading thumbnail…

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.

Mmarc.sarembe@gmail.com

91% 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

79% 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

76% match

Loading thumbnail…

Fork of Colorpleth Map with interactive filtering

This interactive choropleth map displays global economic data by country, where users can click legend items to filter and highlight specific categories. Built with React and D3 v5, the visualization uses d3.geoPath, d3.geoNaturalEarth1, and d3.scaleOrdinal to render an SVG world map. The map and color legend respond to clicks by adjusting opacity, dimming non-selected countries and legend ticks. Data comes from the world-atlas package, which combines TopoJSON geometries with TSV metadata.

SstellaWangg

73% match

Loading thumbnail…

Fork of Choropleth Map with Interactive Filtering

This choropleth map colors countries by economic grouping using a categorical color scale. Users can click legend items to filter the map, dimming non-matching countries while highlighting the selected group. The visualization uses d3.geoNaturalEarth1 and d3.geoPath for map projection, d3.zoom for panning, and d3.scaleOrdinal with schemeSpectral. Country boundaries come from the world-atlas TopoJSON dataset, with hover effects and a tooltip displaying country names and values.

Iion.cojoc@gmail.com

73% match

Loading thumbnail…

Fork of Choropleth Map with Interactive Filtering F

A choropleth map visualizes countries by their economic classification, with a color legend that doubles as an interactive filter. Users click legend items to highlight matching countries and dim others, while hovering over map regions reveals the country name and value in a tooltip. The map uses `d3.geoNaturalEarth1` and `d3.geoPath` for projection, `d3.zoom` for panning and zooming, and a `d3.scaleOrdinal` with `d3.schemeSpectral`. Data comes from the World Atlas TopoJSON and TSV files, with panning handled via SVG transforms.

Ffsajedi22

73% match

Loading thumbnail…

Fork of ICE-8.2 - Europe Countries

This visualization displays a choropleth-style map of European countries rendered on an SVG element. It uses a D3 Mercator projection centered on Europe, with each country drawn as a path with a yellow fill and black borders against a blue background. The code loads GeoJSON data from a GitHub gist via `d3.json`, then generates the map using `d3.geoPath` and the topojson library. The example is built with D3 v5 in a React framework.

PPeter S

73% match