Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Let's make an interactive map with D3.js!

Public visualization

Viewing a saved revision (read-only)

9c624a8a7888493da6967df1ee7c3850

Let's make an interactive map with D3.js!

0 stars1🌍 Public
JJordan Chiu
Last edited Feb 1, 2020
Created on Feb 1, 2020

This interactive map displays world countries using a natural Earth projection rendered as SVG paths. Users can pan and zoom the map via D3’s `zoom` behavior, which applies transforms to a group element. Country boundaries come from TopoJSON data, with names joined from a TSV table using `reduce`. Hovering highlights a country in red, while the background sphere is colored blue. The code leverages `d3.geoPath`, `d3.geoNaturalEarth1`, and topojson’s `feature` method to generate the geographic shapes.

AI-generated description

Interactive map with D3.js (Quiz 5)