Zoomable World Map

100%

Zoomable World Map

✓ Published0🌍 Public

Last edited Feb 23, 2020

Created on Feb 8, 2020

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.

AI-generated description

From Data Visualization with D3.js - Full Tutorial Course by Curran Kelleher

MIT Licensed

Similar vizzes

Loading thumbnail…

Zoomable map

This example displays an interactive world map with countries colored in green and oceans in blue. The map automatically zooms and pans when the user scrolls or drags, smoothly adjusting the projection within a defined scale range. The visualization uses d3.geoNaturalEarth1 for the projection, d3.geoPath to render geographic shapes, and d3.zoom for pan and zoom controls. It loads country boundaries from the `world-atlas` GeoJSON dataset and uses `topojson.feature` to convert them into GeoJSON features.

JJoachim Klug

92% match

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

92% match

Loading thumbnail…

World Map Zoom Feature !

This example shows an interactive world map that supports zooming, with countries colored white on a blue sphere and highlighted in red on hover. The map displays country names as tooltips sourced from a TSV file. It builds the map using d3.geoPath with a d3.geoNaturalEarth1 projection, and enables zoom behavior through d3.zoom. The map renders as SVG paths generated from TopoJSON world data via the topojson library, with interaction managed through the zoom event handler.

SShareSha

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

91% match

Loading thumbnail…

worldmap

This example displays an interactive world map with countries rendered as individual SVG paths, colored light green with black outlines, and highlighted in red on hover. It uses D3 v5's `geoNaturalEarth1` projection with `geoPath` to draw the map, and a light blue sphere for the oceans. Country boundaries come from the `world-atlas` package's countries-50m GeoJSON data, and the `topojson-client` library converts TopoJSON to GeoJSON for feature extraction. The chart supports zooming via D3's `zoom` event, which updates the SVG group transform in real-time.

Hhxc20060903

90% match

Loading thumbnail…

world map interaction

This example presents an interactive world map built with D3.js v5, displaying country boundaries and names sourced from the world-atlas TopoJSON dataset. Users can zoom and pan the map using d3.zoom, with the transform applied to a group element. Countries are rendered as SVG paths via d3.geoPath and a natural Earth projection, with tooltips showing country names from the TSV file. Hovering highlights countries in red, while the ocean sphere uses a blue fill.

Ppei9223

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

90% match

Loading thumbnail…

Let's make a map with D3.js!

This example shows an interactive world map built with D3.js, displaying country boundaries as SVG paths colored light green, with a blue sphere background. The map supports zooming and panning through a d3.zoom behavior, and hovering over a country turns it red. It uses d3.geoNaturalEarth1 for projection and d3.geoPath for generating paths from TopoJSON data loaded from the world-atlas package, with country names joined from a TSV file and displayed as tooltips via SVG `<title>` elements.

Ggcappadaniel

90% match