World Map with zoom and pan

100%

World Map with zoom and pan

✓ Published0🌍 Public

Last edited Nov 30, 2019

Created on Mar 18, 2013

This example displays a world map rendered as gray SVG paths with white borders, centered on a Mercator projection. Users can pan and zoom the map via mouse interactions, with the view transform updating dynamically. The map data comes from the `world-110m2.json` TopoJSON file, processed using `topojson.object`, while D3’s `d3.geo.path` and `d3.behavior.zoom` handle the projection and interactive behavior.

AI-generated description

mit Licensed

Similar vizzes

Loading thumbnail…

Map Pan and Zoom v7

This example displays a world map centered on the Pacific Ocean, rendered as SVG paths filled in grey with white borders. Using the d3.geoMercator projection and d3.geoPath, it draws country boundaries from a TopoJSON file loaded via d3.json. The d3.zoom module provides interactive pan and zoom controls, applying the resulting transform directly to the map’s path elements within a scale extent of 1 to 8.

Dd3noob

88% match

Loading thumbnail…

Map Pan & Zoom I

A black-and-white world map renders on a light gray background using the Mercator projection. This example demonstrates map panning and zooming through the `d3.behavior.zoom` API, which applies SVG transforms to a group containing the geographic paths. The map is built from TopoJSON world data with `d3.geo.path`, and the zoom scale is limited to 1–8×. A transparent overlay rect captures pointer events, enabling the interactive behavior.

Mmbostock

88% match

Loading thumbnail…

Map Pan and Zoom v6

This example demonstrates an interactive world map that supports panning and zooming, centered on the Pacific Ocean. The map renders country boundaries as SVG paths filled with grey, using the `d3.geoMercator` projection and `d3.geoPath` to generate the geometry. A `topojson` data file supplies the world topology. The `d3.zoom` API applies a transform to the SVG group containing the paths, with a scale range between 1x and 8x, enabling the user to explore the map.

Dd3noob

88% match

Loading thumbnail…

World map with zoom / pan and cities

This example presents a world map rendered with SVG, featuring zoom and pan controls. It overlays red circular markers on select global cities, which are loaded from a CSV file and positioned using the Mercator projection via `d3.geo.mercator()`. Each city marker is hyperlinked to a Google search for its name. The map’s geography is drawn from a TopoJSON file, with paths generated through `d3.geo.path()`, while zooming and panning are handled by `d3.behavior.zoom()`.

Dd3noob

87% match

Loading thumbnail…

Gist 075cee318faa9088bc16bd9eb985a9a5

This example shows a world map rendered from a TopoJSON file using a Mercator projection, with pan and zoom enabled for interactive exploration. The map is drawn as SVG paths via `d3.geoPath` and a `d3.geoMercator` projection, centered and scaled to display global geography. A `d3.zoom` handler updates the map’s transform and re-projects paths on each interaction. The code includes commented-out attempts to plot city coordinates from a CSV, but the visible implementation focuses solely on the country boundaries from the `world-110m2.json` data source.

AAlexanderDavidson

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

86% match

Loading thumbnail…

World Map

This example displays an interactive world map showing country boundaries with zooming and hover effects. It uses D3 v5 and TopoJSON to load geographic data from the world-atlas dataset, projecting it with d3.geoEquirectangular and rendering via d3.geoPath. The map initially shows a blue sphere with light green countries and indigo borders, which turn maroon on hover. A d3.zoom handler enables pan and zoom interactions on the SVG.

BBhavyaMammai

86% match

Loading thumbnail…

World Map: Hover and Zoom/Pan

This example presents an interactive world map rendered in SVG using D3 v5, supporting hover effects and zoom/pan navigation. Users can explore geographic regions by moving the cursor or dragging to reposition the view, with zoom controls enabling closer inspection of specific areas. The visualization employs a projection-based mapping approach, where the map is drawn using `d3.geoPath` and geographic data is transformed into screen coordinates. Interaction is handled through D3's event system and zoom behavior, while the page layout uses fixed positioning CSS to maintain full viewport coverage for the interactive canvas.

TTristan Schrader

86% match