Map hover
This example demonstrates interactive hover behavior on a map of Canada, where moving the mouse over a province highlights it by changing its fill color and triggers a tooltip displaying the province name. The tooltip, a positioned HTML div, appears near the cursor, shows the region’s name, and hides on mouseout. Built with D3 v7, it uses `d3.geoAlbers` for projection, `d3.geoPath` for rendering GeoJSON features, and CSS classes to manage visibility and styling.
AI-generated descriptionAn 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
MIT Licensed
Comments
Sign in to join the discussion.