Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Cheap Tricks for Interaction

Public visualization

Viewing a saved revision (read-only)

4959a072e0f74c1a9146a8953bc102b8

Cheap Tricks for Interaction

0 stars0🌍 Public
Zzakaria badri
Last edited Jul 9, 2020
Created on Jun 17, 2020
Forked from Making World Map

This example demonstrates a zoomable world map with country outlines and hover highlighting, rendered as SVG. The map uses D3's `geoNaturalEarth1` projection and `geoPath` to draw country shapes from the world-atlas TopoJSON dataset, with a sphere background. Interactive zoom is implemented via D3's `zoom` module, which applies a transform to the map group on zoom events. Country names are joined from TSV data, and hovering over a country fills it red via CSS `.country:hover`. The visualization is built with React and D3 v5.

AI-generated description

A bare minimum HTML page.

See also React Starter.