Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Cheap Tricks for Interaction On a D3.js World Map!

Public visualization

Viewing a saved revision (read-only)

ea379e32d36b4f319bdfe75679d4584f

Cheap Tricks for Interaction On a D3.js World Map!

0 stars0🌍 Public
Vvans01
Last edited May 11, 2020
Created on May 11, 2020

This example displays an interactive world map using SVG paths generated from TopoJSON data. The visualization uses d3.geoMercator, d3.geoPath, and the `topojson` feature function to render country boundaries with a steelblue fill and black strokes. Hovering over a country triggers a CSS `:hover` rule that changes the fill to red, and d3.zoom enables pan and zoom interactions that transform the map group. Country name tooltips are added via the `title` child element, using data from a TSV file.

AI-generated description

A bare minimum HTML page.

See also React Starter.