🌍 Public
Viewing a saved revision (read-only)
9dead6a5699f429787cf68422080eff1
Let's Make a Map With D3.js !
This example shows an interactive world map rendered with SVG, where each country is colored light green and turns orange on hover, with a dark background and a blue ocean sphere. The map supports pan and zoom through D3’s zoom behavior, which applies a transform to the group containing all country paths. The code uses D3 v5’s `geoNaturalEarth1` projection, `geoPath` for path generation, and `topojson.feature` to convert TopoJSON data from the world-atlas package into GeoJSON. Country names are joined from a separate TSV file, and the hover effect is implemented via CSS styling on the `.country` class.
AI-generated descriptionA bare minimum HTML page.
See also React Starter.