Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Fork of Fork of Cheap Tricks for Interaction

Public visualization

Fork of Fork of Cheap Tricks for Interaction

0 stars0🌍 Public
Aaruna-rajeswari
Last edited Mar 1, 2023
Created on Mar 1, 2023

This interactive visualization displays a world map using a natural Earth projection, with countries rendered as light-green SVG paths that turn red on hover. The code leverages D3 v5’s `geoNaturalEarth1`, `geoPath`, and `zoom` APIs to enable panning and scaling via mouse or touch, transforming a grouped `<g>` element during zoom events. Country boundaries come from TopoJSON data in the world-atlas package, matched to names from a TSV file, with tooltips showing country names via appended `<title>` elements. The map is framed by a blue sphere path, and interaction is enhanced through CSS `:hover` styling.

AI-generated description

Comments

Sign in to join the discussion.

MIT Licensed