simple map interactions

100%

simple map interactions

✓ Published1🌍 Public

Last edited Jan 18, 2020

Created on Jan 15, 2020

This example shows an interactive world map rendered as SVG, where each country displays its name as a tooltip on hover and the entire map can be panned and zoomed. It uses D3 v5’s `geoNaturalEarth1` projection with `geoPath` to draw country boundaries from TopoJSON data loaded from the world-atlas package, and country names are matched from a TSV file via ISO numeric codes. The zoom behavior is implemented with `d3.zoom`, applying the current transform to a group element, while CSS hover styles highlight countries and a sky-blue sphere path forms the ocean background.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Map Interaction with D3!

This example shows an interactive world map rendered with SVG paths, where hovering over a country reveals its name as a tooltip and the map supports zooming and panning. It uses D3 v5’s `geoNaturalEarth1` projection and `geoPath` to draw countries from TopoJSON data provided by the world-atlas package, with country names loaded from a TSV file. The zoom behavior is implemented via D3’s `zoom` API, transforming a group element on the `zoom` event.

AAnnie Liao

93% match

Loading thumbnail…

Map Interactions

This example displays an interactive world map using a natural Earth projection, with countries rendered as light green SVG paths that turn teal on hover. The visualization combines world-atlas TopoJSON data with a TSV file containing country names, which are added as native SVG `<title>` tooltips. The map supports pan and zoom through d3.zoom, while d3.geoPath and d3.geoNaturalEarth1 handle geographic projections. Hover effects use CSS pseudo-classes, and the map includes a blue sphere background for context.

Ggilbster

93% match

Loading thumbnail…

Map interaction with D3.js!

This example demonstrates an interactive world map built with D3.js v5, allowing users to pan and zoom via the `d3.zoom` API. It renders country boundaries as SVG paths using `d3.geoPath` with a `geoNaturalEarth1` projection, applied to TopoJSON data from the world-atlas package. Country names are matched from a TSV file and displayed as tooltips via SVG `<title>` elements. Hovering changes the fill color through CSS, while the sphere background is styled as dark blue.

Aaxliao

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

92% match

Loading thumbnail…

Easy map interactions

This example displays an interactive world map rendered with SVG, using natural Earth projection via d3.geoNaturalEarth1 and d3.geoPath. The map loads country boundaries and names from the world-atlas TopoJSON and TSV datasets. Users can pan and zoom using d3.zoom, which applies a transform to the map group. Hovering highlights individual countries in red, and each country includes a native SVG title element displaying its name as a tooltip.

WWarren-Fitzhenry

91% match

Loading thumbnail…

Let's make a World Map - simple with interactions

This example presents an interactive world map rendered in SVG, where each country is filled with green and highlights red on hover. Built with D3 v5 and TopoJSON, it loads world-atlas data from unpkg and projects it using `geoNaturalEarth1` and `geoPath`. The map supports zooming and panning via `d3.zoom`, with tooltips showing country names extracted from TSV data. The background sphere is drawn separately in dark blue, demonstrating a simple yet interactive geographic visualization.

JJimMaltby

91% match

Loading thumbnail…

Interaction World Map

This example displays a world map rendered with SVG paths, where countries are filled in light green and turn red on hover. It uses the Natural Earth projection via `d3.geoNaturalEarth1` and `d3.geoPath` to draw geographic features from a TopoJSON file loaded from the world-atlas package. The map supports zooming and panning through `d3.zoom`, which applies SVG transforms to the map group. Country names are resolved by joining the TopoJSON data with a TSV table, enabling tooltips via appended `title` elements.

Ppplomith

91% match

Loading thumbnail…

Map with interaction

This example shows an interactive map of world countries rendered as SVG paths using the Natural Earth projection. Users can pan and zoom the map via d3.zoom, which applies a transform to the grouped map elements. The map loads GeoJSON data from the world-atlas TopoJSON file, converts it with topojson.feature, and draws each country using d3.geoPath. Countries fill light green and turn red on hover, with the surrounding sphere rendered in blue. The visualization demonstrates basic geographic mapping with interactive zooming and hover feedback.

SSimon Pettersson

91% match