🌍 Public
Viewing a saved revision (read-only)
4ca5a1c6d23242fbad15acd967d4b0a5
Cheap Tricks for Interaction
This example demonstrates a zoomable world map rendered with SVG paths using D3.js. It shows country boundaries from the world-atlas TopoJSON dataset, with each country labeled by name via a title tooltip on hover. The visualization uses a natural Earth projection and implements pan-and-zoom interaction through d3.zoom, which applies a transform to the map group. Countries are colored light green and highlight red on hover, while the sphere background is dark blue. The code fetches both TopoJSON geometry and TSV country names concurrently with Promise.all.
AI-generated descriptionA bare minimum HTML page.
See also React Starter.