Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Map Interaction with D3.js

Public visualization

Viewing a saved revision (read-only)

f6195de39ca6418693d7f992dc32cc52

Map Interaction with D3.js

0 stars1🌍 Public
Ssiddharth171
Last edited Jul 26, 2020
Created on Jul 26, 2020
Forked from Map with D3.js

This example shows an interactive map of world countries that users can pan and zoom, with countries highlighted in red when hovered over. It renders a Natural Earth projection using D3’s `geoNaturalEarth1` and `geoPath` within an SVG. The map loads world geometry from TopoJSON via `world-atlas` and country names from a TSV file, merging them by ISO code. Zooming is handled with `d3.zoom` and `event.transform` on the entire map group, while each country’s `title` tooltip displays its name.

AI-generated description

A bare minimum HTML page.

See also React Starter.