Skip to main content
100%

Let's Make a Map With D3.js !

✓ Published1🌍 Public
GGino Dzin
Last edited Feb 15, 2020
Created on Feb 15, 2020

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 description

A bare minimum HTML page.

See also React Starter.

MIT Licensed

Similar vizzes