🌍 Public
Viewing a saved revision (read-only)
512ab6150c7942fd8e6de5b34d28abd5
Cheap tricks for interaction: reduce instead of forEach
This example displays an interactive world map using D3.js with a Natural Earth projection. The visualization renders country boundaries as SVG paths, with hover effects that change country fill colors from light green to red. It uses d3.json and d3.tsv to load TopoJSON world map data and country names, with a lookup table created via JavaScript's reduce method to associate country IDs with names. The map supports zooming through d3.zoom, and each country includes a title element for tooltip display.
AI-generated descriptionHover over and title elements for map