🌍 Public
Viewing a saved revision (read-only)
f846e4db58d242989a4e1f1e2a38d8ac
Let's make a map with D3 with popup.js!
This example shows a world map with country boundaries from the World Atlas TopoJSON dataset, where each country is color-coded and displays a tooltip with a numeric value on hover. The visualization uses D3 v5’s `geoNaturalEarth1` projection and `geoPath` to render the SVG paths, while `topojson.feature` converts the TopoJSON data into GeoJSON. A custom tooltip appears near the cursor using mouseover events and CSS positioning, and the `csv` data is matched to country IDs to populate the tooltip’s content.
AI-generated descriptionDemonstrates fundamental DOM manipulation using D3.js by making a smiley face whose eyebrows move.