Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Cheap Tricks for Interaction

Public visualization

Viewing a saved revision (read-only)

b5a9331a748b436a9f2b6355abf5d34b

Cheap Tricks for Interaction

0 stars1🌍 Public
NNico Donovan
Last edited Jul 15, 2020
Created on Jul 15, 2020

A world map renders country boundaries using `d3.geoPath` with a `geoNaturalEarth1` projection. Hovering highlights nations in red via CSS, while native SVG `<title>` elements provide tooltips with country names. The view supports pan and zoom through `d3.zoom`. Data loads concurrently with `Promise.all`, combining TopoJSON geometry and TSV metadata from the world-atlas package.

AI-generated description

Topics covered:

  • highlighting on Hover using CSS
  • Adding simple tooltips (using <title>) -loading multiple data files -looking up country name from id
  • panning and zooming