Viewing a saved revision (read-only)
4dc0142a045c462f8633f1af558b83ce
Cheap tricks for interaction
This example shows a world map using the Hufnagel projection, where hovering over a country highlights it in yellow and displays its name via an SVG `<title>` tooltip. The visualization uses `d3.geoPath` with `geoHufnagel`, `topojson.feature` to parse country boundaries, and `d3.zoom` for pan-and-zoom interaction. Country names come from a TSV file matched to TopoJSON IDs using a reduce function. Styling relies on CSS for hover effects and sphere fill.
AI-generated descriptionThis D3.js map of the world displays country name when the mouse is hovered over that specific country. It's using a tsv file and a topojson file with a reduce function (ES6) to match the two in order to get the country name.
You can zoom in and out using two fingers pushing up or down the mouse pad (or whatever you're holding).
This is using:
- d3-geo
- topoJSON
- zoom
- tsv data
- css