Fork of Team 3 - Tankvergleich

100%

Fork of Team 3 - Tankvergleich

✓ Published0🌍 Public

Last edited Apr 16, 2026

Created on Apr 16, 2026

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.

AI-generated description

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

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

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

72% match

Loading thumbnail…

Fork of Cheap Tricks for Interaction

This interactive map visualizes the world’s countries, color-coded in light green against a blue sphere, with country names displayed as tooltips on hover. The visualization supports pan and zoom interactions, which are implemented using the `d3.zoom` event and applied to the SVG group’s transform. The map is rendered using `d3.geoPath` with the `geoNaturalEarth1` projection, and country boundaries come from the `world-atlas` TopoJSON and TSV files, which provide both geometry and names. Hovering changes each country’s fill to red via CSS.

NNacirGithub

71% match

Loading thumbnail…

Fork of Cheap Tricks for Interaction

This interactive map displays world countries on a natural Earth projection, with a blue sphere background and light green landmasses that turn red on hover. Built with d3.geoPath and d3.geoNaturalEarth1, it loads geographic data from the world-atlas package, combining TopoJSON country boundaries with TSV names. The visualization implements pan and zoom functionality through d3.zoom, updating the SVG group’s transform on zoom events. Country names appear as tooltips via SVG title elements.

Mmavercikalvin

71% match

Loading thumbnail…

Fork of Cheap Tricks for Interaction

This interactive world map displays country names as tooltips and highlights nations in red on hover. The visualization uses a Natural Earth projection via `d3.geoNaturalEarth1` and `d3.geoPath` to render SVG paths from TopoJSON world-atlas data, with country names joined from a TSV file. Zooming and panning are enabled through `d3.zoom`, which applies transforms to the map group. The styling, including the blue ocean sphere and green countries, is defined in CSS with hover effects.

Aaruna-rajeswari

70% match

Loading thumbnail…

Fork of Cheap Tricks for Interaction

This interactive D3.js map displays world countries, colored light green against a blue sphere, and highlights each country in red on hover with a tooltip showing the country’s name. Using the `d3.geoPath` projection and a `geoNaturalEarth1` projection, it renders geographic features from the `world-atlas` TopoJSON and TSV data sources. The visualization incorporates the `zoom` interaction module from D3’s `d3.zoom` API, enabling users to pan and scale the map via mouse events. It employs SVG rendering for vector-based output.

Eeypkllas@gmail.com

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

70% match