Map Pan and Zoom v6

100%

Map Pan and Zoom v6

✓ Published0🌍 Public

Last edited Sep 14, 2020

Created on Sep 14, 2020

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.

AI-generated description

This is a simple map example with pan and zoom centered on the Pacific.

This graph is part of the code samples for the update to the book D3 Tips and Tricks to version 6 of d3.js.

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

95% match

Loading thumbnail…

Map Pan and Zoom v5

This map of the world centers on the Pacific Ocean and lets users pan and zoom. It uses a Mercator projection via `d3.geoMercator` and renders country boundaries as SVG paths from TopoJSON data. The `d3.zoom` behavior applies a transform to the path group, enabling interactive navigation with a scale extent of 1 to 8.

Dd3noob

93% match

Loading thumbnail…

Map Pan / Zoom with Cities and Text v6

This D3.js (version 6) example displays a world map centered on the Pacific Ocean using a Mercator projection, with red circles marking cities from a CSV data file and city names as text labels. Each city is hyperlinked to a Google search for its name. The visualization supports pan and zoom interactions through the `d3.zoom` API, applying the zoom transform to the map paths, city circles, and text elements. The map geometry comes from a TopoJSON file processed with the `topojson` library, and all rendering uses SVG.

Dd3noob

89% match

Loading thumbnail…

Map Pan / Zoom with Cities v5

This map example displays world country boundaries and major global cities, with interactive pan and zoom functionality centered on the Pacific Ocean. The visualization uses d3.geoMercator for projection and d3.geoPath to render geographic features from a TopoJSON world file. City locations from a CSV dataset are plotted as red circles, each hyperlinked to a Google search. Users can apply d3.zoom with a scale extent of 1 to 8, transforming both paths and circles accordingly. The map is rendered as SVG elements within a d3 selection.

Dd3noob

88% match

Loading thumbnail…

World Map with zoom and pan

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.

Dd3noob

88% match

Loading thumbnail…

Map Pan / Zoom with Cities v7

This example shows a pan-and-zoomable Mercator map of the world, centered on the Pacific Ocean, with city locations marked by red dots. The map uses an SVG rendering with countries styled as grey paths, and city coordinates are loaded from a CSV file containing airport codes, city names, and latitude/longitude values. Pan and zoom interactions are enabled through d3.zoom, which applies a transform to all map elements. The map itself is drawn using d3.geoPath with a d3.geoMercator projection, and world topology data is fetched as a JSON file, then converted via topojson’s feature function before being rendered.

Dd3noob

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

87% match

Loading thumbnail…

Constrained Zoom Map. Centered on the Pacific

This example shows a world map centered on the Pacific Ocean, where users can pan and zoom with constrained translation bounds. It uses a Mercator projection with `.rotate([-180,0])` to place the anti-meridian at the center, and renders geographic features from a TopoJSON world dataset using `d3.geo.path`. The zoom behavior relies on `d3.behavior.zoom` and custom logic in the `move` function to limit panning within the viewport. Landmasses are filled black with white boundary strokes, and the SVG overlay captures pointer events for interaction.

Dd3noob

86% match