Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Let's make a map with D3.js!

Public visualization

Viewing a saved revision (read-only)

d5a6cfbfe3f04f3e964b930a06a5ecd9

Let's make a map with D3.js!

0 stars1🌍 Public
Dddperdue
Last edited Mar 25, 2020
Created on Mar 25, 2020

This example demonstrates how to create an interactive world map using D3.js v5 and TopoJSON. It renders a natural Earth projection with country boundaries, showing country names as hover tooltips and enabling zoom and pan through d3.zoom. The visualization loads geographic data from the world-atlas package, combining TopoJSON geometry with TSV metadata for country names. The map uses an SVG rendering approach, with countries styled as light green polygons that darken on hover, all implemented through d3.geoNaturalEarth1, d3.geoPath, and d3.json.

AI-generated description