Skip to main content
SimilarExport ZIP
100%

Map with interaction

✓ Published0🌍 Public
SSimon Pettersson
Last edited Jan 30, 2022
Created on Jan 30, 2022

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.

AI-generated description
MIT Licensed

Similar vizzes

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
94% match
Loading thumbnail…

Map Interaction

This example displays an interactive world map, rendering country boundaries as SVG paths using d3.geoPath and a d3.geoNaturalEarth1 projection. The map is built from TopoJSON data loaded via d3.json and the topojson.feature API, with country names attached as SVG title elements. The visualization supports panning and zooming through d3.zoom, which applies a transform to the map group, and highlights individual countries by changing their fill color on hover using CSS.

WWayne716
94% 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 Assignment

This example shows an interactive world map where each country is rendered as a filled path, and hovering over a country turns it red. The map uses a natural Earth projection via `d3.geoNaturalEarth1` and `d3.geoPath`, with country boundaries loaded from TopoJSON data in the world-atlas package. Zoom and pan interactions are implemented using `d3.zoom`, which applies a transform to the map group. Country names are matched from ISO codes in a TSV file and displayed as tooltips using SVG `<title>` elements.

MMukund Khandelwal
92% match
Loading thumbnail…

Map Interaction Assignment

This interactive map visualizes global country boundaries using a natural Earth projection, rendered as SVG paths within a zoomable viewport. The map shows the sphere as a blue background and individual countries in green, which turn red on hover, with country names displayed as tooltips. Built with D3 v5, the example uses `d3.geoNaturalEarth1`, `d3.geoPath`, and the `topojson` library’s `feature` function to process world atlas data loaded from TSV and JSON files. A zoom interaction, implemented via D3’s `zoom` event, transforms the map group, allowing users to explore the geographic data.

MMukund Khandelwal
92% match
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
92% match
Loading thumbnail…

Let's make a map - interactions!

This example demonstrates interactive pan and zoom on a natural Earth projection map of world countries. Users can drag to pan and scroll to zoom, with the map updating smoothly through D3’s zoom behavior. The visualization renders country boundaries from the world-atlas TopoJSON dataset, using d3.geoPath and d3.geoNaturalEarth1 to project the geometry into SVG paths. Hovering highlights a country in red, and the map includes a blue sphere background. The code relies on d3.json for data loading and topojson.feature for converting TopoJSON to GeoJSON.

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