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)

61888b5426dd4f36be2b4219b6932839

Open

Fork of Map hover

0 stars0🌍 Public
PPedram
Last edited Dec 26, 2022
Created on Dec 26, 2022
Forked from Map hover

This example displays a map of Canada with each province rendered as an SVG path using d3.geoPath and a d3.geoAlbers projection. On mousemove, a tooltip div is shown and repositioned via inline CSS, while the province’s fill changes through a CSS hover class. On mouseout, the tooltip is hidden. The map data comes from a GeoJSON file loaded via d3.json, and the tooltip content is set with d3 selection’s .html method.

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