Skip to main content
SimilarExport ZIP
100%

Hover, Zoom on a Map

✓ Published2🌍 Public
Aannadehtiarova
Last edited Feb 1, 2021
Created on Feb 1, 2021

This example displays a world map using D3.js and topojson, rendered as an SVG with the geoNaturalEarth1 projection. It loads geographic data from the world-atlas package, including country boundaries and a TSV file mapping ISO codes to country names. Hovering over a country turns it red, and users can pan and zoom the map via the d3.zoom module, which updates the group’s transform attribute.

AI-generated description

Demonstrates fundamental DOM manipulation using D3.js by making a smiley face whose eyebrows move.

MIT Licensed

Similar vizzes

Loading thumbnail…

World Map: Hover and Zoom/Pan

This example shows an interactive world map that highlights countries in red on hover and supports zooming and panning through mouse interactions. The map renders with D3’s `geoNaturalEarth1` projection and `geoPath` for SVG paths, while country boundaries come from TopoJSON data merged with names from a TSV file. Zoom behavior is implemented with `d3.zoom`, applying transforms to a group element. Country tooltips display names via SVG `<title>` elements.

TTristan Schrader
89% match
Loading thumbnail…

World Map hover version

This example displays an interactive world map rendered with SVG, featuring countries that change color when hovered over. The visualization uses D3 v5 with `geoNaturalEarth1` projection and `geoPath` to draw geographic shapes from TopoJSON data, while country names are loaded from a TSV file. Users can pan and zoom the map using D3’s `zoom` behavior, and a CSS hover effect highlights each country in red. The map includes a blue sphere background representing the Earth’s outline.

Ddata-inside
88% match
Loading thumbnail…

Let's make a map and interact with Hover!

This example shows a world map with countries rendered as light green shapes on a blue sphere, with hover interactions highlighting each country in red. Using D3 v5 and topojson, the map projects geographic data with a `geoEqualEarth` projection and `geoPath` to draw the sphere and country boundaries. Country names come from a TSV file matched to the GeoJSON features. The code also enables pan and zoom through D3's `zoom` and `event.transform` APIs.

XX. N. Chu
88% match
Loading thumbnail…

Let's make a map with D3.js!

This example demonstrates how to create an interactive world map using D3.js v5 and TopoJSON. It renders a natural Earth projection with country boundaries, showing country names as hover tooltips and enabling zoom and pan through d3.zoom. The visualization loads geographic data from the world-atlas package, combining TopoJSON geometry with TSV metadata for country names. The map uses an SVG rendering approach, with countries styled as light green polygons that darken on hover, all implemented through d3.geoNaturalEarth1, d3.geoPath, and d3.json.

Dddperdue
87% match
Loading thumbnail…

Let's Make a map

This example displays a zoomable world map using geographic data from the world-atlas TopoJSON files. It renders country boundaries as SVG paths via d3.geoPath with a d3.geoNaturalEarth1 projection, and d3.zoom enables pan/zoom interactions that update the map group’s transform. Country names come from a TSV file joined by ISO numeric codes, appearing as hover tooltips via SVG title elements. Countries fill red on hover, while the sphere outline is drawn from a GeoJSON sphere object.

KKyeonghun Min
87% match
Loading thumbnail…

Zoomable World Map

This example presents an interactive world map with natural Earth projection, rendered as SVG paths. Users can zoom and pan via d3.zoom, with the `event.transform` applied to the map group. Country boundaries are drawn using d3.geoPath from TopoJSON data loaded from world-atlas, shaded light green with dark blue oceans. Hovering highlights countries in red, and each country includes a tooltip title populated from TSV metadata with country names.

OOhayouKaminari
87% match
Loading thumbnail…

Map Interaction

This example displays an interactive world map rendered with SVG using the d3-geo-projection library, specifically the geoNaturalEarth1 projection. Countries from the world-atlas TopoJSON dataset are drawn as paths with d3.geoPath, each featuring a tooltip showing the country name. The map supports pan and zoom through d3.zoom, which applies a transform to the map group on events. Hovering over a country changes its fill color to red via CSS, while the sphere background uses a distinct blue fill.

WWayne716
87% match
Loading thumbnail…

World Map Interaction

This example displays an interactive world map built with D3 v5 and TopoJSON, rendered as SVG. Users can pan and zoom the map using D3’s `zoom` behavior, which updates a group transform. The map draws countries from the world-atlas TopoJSON file using `geoPath` and the `geoNaturalEarth1` projection. Hovering over a country highlights it in red via the `:hover` CSS rule, while country names appear as tooltips using SVG `<title>` elements.

KKainsli
87% match