Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Cheap Tricks for Interaction On a D3.js World Map!

Public visualization

Viewing a saved revision (read-only)

86ebfde28c08466cbfe67f5e0980bcfb

Cheap Tricks for Interaction On a D3.js World Map!

0 stars1🌍 Public
Vvans01
Last edited May 11, 2020
Created on May 11, 2020

This example shows a zoomable world map built with React and D3 v5, where hovering over a country highlights it in red and displays its name as a tooltip. The map renders SVG paths using `d3.geoPath` and a Mercator projection, with geographic data loaded from the world-atlas TopoJSON and country names matched via TSV. Interaction includes a `d3.zoom` handler that transforms a group element containing all country paths, and CSS `:hover` rules change fill color. The code demonstrates combining TopoJSON feature extraction, data joins, and simple event-driven styling.

AI-generated description

A bare minimum HTML page.

See also React Starter.