Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Fork of Map hover

Public visualization

Post on XLinkedIn

Viewing a saved revision (read-only)

12e55028740445119434e7c56bd54f82

Open

Fork of Map hover

0 stars0🌍 Public
RRomain Vuillemot
Last edited Feb 3, 2025
Created on Feb 3, 2025
Forked from Map hover

A map of Canada displays province boundaries in black with white strokes. Hovering over a province turns it red and shows a tooltip div with the province name, positioned near the cursor. The tooltip is hidden on mouseout, and the province returns to black. The example uses d3.v7 with d3.geoPath and a geoAlbers projection, loading GeoJSON from an external URL.

AI-generated description

An example showing hovering on a map:

  • Loads d3v7 via UNPKG.
  • Loads map of Canada
  • On mouse move :
    • shows a div by modifying its css properties
    • modifies the content and position of a div (the tooltip)
    • changes the css class of the state to change its color
  • On mouse out :
    • hides the tooltip div