Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Cheap tricks for interaction

Public visualization

Viewing a saved revision (read-only)

6f5d7d881f2c4aa4aaa6173f2fca46ba

Cheap tricks for interaction

0 stars1🌍 Public
LLongYuu
Last edited Nov 25, 2020
Created on Nov 25, 2020

This example demonstrates interactive pan and zoom on a world map using D3 v5 and React. The visualization renders country boundaries from World Atlas TopoJSON data with a Natural Earth projection, displaying country names as tooltips on hover. The code uses `d3.zoom` for the pan/zoom behavior, `d3.geoPath` for map rendering, and `d3.tsv` for loading country name metadata. CSS hover effects highlight countries in red, while the map supports smooth zooming through SVG transform updates.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.