Lets build a map with interactions!

100%

Lets build a map with interactions!

✓ Published1🌍 Public

Last edited Feb 12, 2020

Created on Feb 12, 2020

This example shows an interactive world map rendered with SVG, where each country displays its name as a tooltip on hover. The visualization uses D3 v5 to load TopoJSON and TSV data from the world-atlas package, projecting the geographic features with `d3.geoNaturalEarth1` and drawing paths via `d3.geoPath`. Zooming and panning are enabled through `d3.zoom` with an event listener that applies transforms to the map group. Countries are styled with CSS, turning grey on hover, while a fixed blue sphere represents the globe's background. React manages the page structure, though D3 handles all data binding and interactions.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Map Interaction with D3!

This example shows an interactive world map rendered with SVG paths, where hovering over a country reveals its name as a tooltip and the map supports zooming and panning. It uses D3 v5’s `geoNaturalEarth1` projection and `geoPath` to draw countries from TopoJSON data provided by the world-atlas package, with country names loaded from a TSV file. The zoom behavior is implemented via D3’s `zoom` API, transforming a group element on the `zoom` event.

AAnnie Liao

91% match

Loading thumbnail…

simple map interactions

This example shows an interactive world map rendered as SVG, where each country displays its name as a tooltip on hover and the entire map can be panned and zoomed. It uses D3 v5’s `geoNaturalEarth1` projection with `geoPath` to draw country boundaries from TopoJSON data loaded from the world-atlas package, and country names are matched from a TSV file via ISO numeric codes. The zoom behavior is implemented with `d3.zoom`, applying the current transform to a group element, while CSS hover styles highlight countries and a sky-blue sphere path forms the ocean background.

AAndrew Fletcher

91% match

Loading thumbnail…

Map Interaction with D3.js

This example shows an interactive world map with zoom and pan capabilities, where hovering over a country highlights it in red. Built with React and rendered as SVG, it uses D3.js v5 with `d3.geoNaturalEarth1` projection and `d3.geoPath` to draw countries from TopoJSON data. A `d3.zoom` handler transforms the map group on user interactions, while `d3.tsv` loads country names from a World Atlas TSV file to populate tooltips. The map features a steel-blue ocean sphere and light-green landmasses.

NNoor-SC

90% match

Loading thumbnail…

Let's Make a Map With D3.js !

This example shows an interactive world map rendered with SVG, where each country is colored light green and turns orange on hover, with a dark background and a blue ocean sphere. The map supports pan and zoom through D3’s zoom behavior, which applies a transform to the group containing all country paths. The code uses D3 v5’s `geoNaturalEarth1` projection, `geoPath` for path generation, and `topojson.feature` to convert TopoJSON data from the world-atlas package into GeoJSON. Country names are joined from a separate TSV file, and the hover effect is implemented via CSS styling on the `.country` class.

GGino Dzin

90% match

Loading thumbnail…

Let's make a World Map - simple with interactions

This example presents an interactive world map rendered in SVG, where each country is filled with green and highlights red on hover. Built with D3 v5 and TopoJSON, it loads world-atlas data from unpkg and projects it using `geoNaturalEarth1` and `geoPath`. The map supports zooming and panning via `d3.zoom`, with tooltips showing country names extracted from TSV data. The background sphere is drawn separately in dark blue, demonstrating a simple yet interactive geographic visualization.

JJimMaltby

90% match

Loading thumbnail…

Let's Make a Map With D3.js !

This example displays an interactive world map rendered with SVG paths, using D3.js v5 and TopoJSON data from the world-atlas package. It shows country boundaries with hover effects, built using `geoNaturalEarth1` projection and `geoPath` for geometry generation. The map supports pan and zoom through D3’s `zoom` behavior, transforming a group element. Country names are loaded from a TSV file and appended as SVG `<title>` tooltips, while the styling is defined in an external CSS file.

GGino Dzin

90% match

Loading thumbnail…

Interactive world map

This interactive world map displays country boundaries with hover highlighting and zoom/pan capabilities. Built with React and D3 v5, the visualization uses `d3.geoNaturalEarth1` for projection and `d3.geoPath` to render SVG paths from TopoJSON data in the world-atlas package. A zoom behavior enables interactive transformations, while country names from a TSV file appear as tooltips via SVG `title` elements. The map fills countries in green and the ocean sphere in blue, with hover states turning countries red.

Eevapavlinek

90% match

Loading thumbnail…

Map interaction with D3.js!

This example demonstrates an interactive world map built with D3.js v5, allowing users to pan and zoom via the `d3.zoom` API. It renders country boundaries as SVG paths using `d3.geoPath` with a `geoNaturalEarth1` projection, applied to TopoJSON data from the world-atlas package. Country names are matched from a TSV file and displayed as tooltips via SVG `<title>` elements. Hovering changes the fill color through CSS, while the sphere background is styled as dark blue.

Aaxliao

90% match