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)

8436986b6f344c27a6cd6c02e9150699

Map Interaction with D3.js

0 stars0🌍 Public
NNoor-SC
Last edited Jul 27, 2020
Created on Jul 27, 2020

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.

AI-generated description

A bare minimum HTML page.

See also React Starter.