Map hover

100%

✓ Published3🌍 Public

Last edited Dec 1, 2021

Created on Dec 1, 2021

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 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

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of 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.

PPedram

90% match

Loading thumbnail…

Untitled

This example shows an interactive map of Canada where hovering over a province highlights it in red and displays a tooltip with the province name. The tooltip follows the mouse position and is hidden on mouseout. The map is rendered as SVG paths using D3 v7’s `d3.geoPath` with a `d3.geoAlbers` projection, and the geographic data comes from a GeoJSON file hosted on GitHub. CSS classes control the hover color change and tooltip visibility.

MMohammad Shakirul Islam

89% match

Loading thumbnail…

Untitled

This example presents an interactive map of Canada that displays a tooltip with the name of each province on hover. The map is rendered as SVG using d3.v7, with province shapes generated via `d3.geoPath` and the Albers projection. On mouse movement over a province, a styled `div` tooltip is positioned and populated with the province’s name, while the province’s CSS class changes its fill color; on mouse-out, the tooltip is hidden. The geographic data is loaded as JSON from a remote gist.

Ssnehareddygurram

88% match

Loading thumbnail…

Untitled

This example shows an interactive map of Canada with SVG paths representing provinces, initially colored dark green. When the mouse hovers over a province, the CSS class changes to turn it red and a tooltip div appears, displaying information about the province. The tooltip is positioned and shown by modifying its CSS properties on mouse move, and hidden on mouse out. Built with D3.v7, it loads GeoJSON data from GitHub and renders paths using `d3.geoPath` with an Albers projection, while D3's `select` and `join` methods handle the interactive state changes.

PPedram

87% match

Loading thumbnail…

Untitled

This interactive map of Canada displays province names in a tooltip as the mouse moves over each region. Hovering a province turns it red via a CSS `:hover` rule, while the tooltip div follows the cursor and is hidden on mouse-out. The visualization uses d3.v7’s `d3.json` to load GeoJSON data and `d3.geoAlbers` projection with `d3.geoPath` to render the SVG paths. Tooltip positioning and visibility are managed through CSS classes and inline styles.

YYerlan Yeszhanov

87% match

Loading thumbnail…

Untitled

This example displays a map of Canada using GeoJSON data, with each province rendered as an SVG path. On mouse movement over a province, a tooltip div appears and tracks the cursor, displaying the province name from the data properties. The tooltip is shown by removing its hidden class and repositioned via inline CSS, while the province’s fill color changes on hover using CSS rules. The code uses `d3.geoPath` with an Albers projection and loads data from a remote GitHub repository.

NNICHAPA

86% match

Loading thumbnail…

Untitled

This example displays a map of Canada loaded from a GeoJSON file and rendered as SVG paths using D3 v7. When the mouse moves over a province, the code positions an HTML tooltip div through its style attributes. The tooltip reveals the province name, sourced from the GeoJSON properties. The D3 geoPath and geoAlbers APIs handle the map projection and path generation, while province colors change via CSS :hover rules.

LLokeshBachu5

86% match

Loading thumbnail…

Untitled

This example displays a choropleth map of Canada using D3 v7, with provinces rendered as SVG paths via `d3.geoPath` and an Albers projection. Hovering over a province changes its fill color from green to red and triggers a tooltip div, positioned via mouse event coordinates, that shows the province name from the loaded GeoJSON data. The tooltip is shown and hidden by toggling a CSS class, and the map data is fetched from a GitHub-hosted GeoJSON file.

SSUSHMA CHIRRA

85% match