Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Tricks for interaction

Public visualization

Viewing a saved revision (read-only)

f26493c056d744178bb70d7b9659e26d

Tricks for interaction

0 stars0🌍 Public
PPedro Ernesto Tramontina
Last edited Mar 28, 2020
Created on Mar 28, 2020
Forked from Making a map

This example demonstrates interactive pan and zoom on a natural Earth projection map. The visualization renders world country boundaries using TopoJSON data, with hover highlighting that changes country fill colors. The implementation uses d3.zoom to apply transform events to the SVG group, updating its translation and scaling. d3.geoPath with geoNaturalEarth1 handles geographic projections, while CSS :hover rules manage the country color transitions. The sphere background is filled with a distinct blue tone to contrast with the green countries.

AI-generated description