Constrained Zoom

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

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.

83% match

Constrained Zoom

This example demonstrates how to constrain d3-zoom so a rectangular image stays within the viewport during pan and zoom operations, using the `d3.zoom` API and its event handler. The SVG shows a small image element whose bounds are checked against the viewport; the `zoomed` function modifies the transform to prevent the image from moving off-screen. The code calculates the image’s coordinates and uses `scaleExtent` to limit zooming to the viewport size. This implementation relies on the d3.v4 library, rendering via SVG, and handles mouse interactions through the zoom’s event system.

82% match

Map Pan & Zoom III

A world map rendered on a Canvas element supports pan and zoom interactions via the d3.behavior.zoom API. The map uses pre-projected geographic geometry from a TopoJSON file, with d3.geo.path using a null projection so that only the canvas transform changes during zoom, avoiding re-projection. Country boundaries and land masses are drawn as filled and stroked paths, with strokes scaled inversely to maintain constant width.

Map Pan & Zoom II

This example demonstrates interactive pan and zoom on a world map using a dynamic Mercator projection. The map renders country landmasses as black paths, with white boundaries and a light gray sphere background, all within an SVG element. Using the `d3.behavior.zoom` API, user drag or scroll actions trigger reprojection and redraw the geospatial data via `d3.geo.path`. The underlying geographic data is loaded as JSON from a gist, and the projection translates and scales dynamically with each zoom event.

Zoomable Geography

This example shows U.S. states and counties rendered as SVG paths, which can be panned and zoomed with the mouse. It uses d3.behavior.zoom to modify the transform of a group element, letting the browser redraw geographic features quickly without reprojection. The code loads TopoJSON data and renders it with d3.geo.path, using a null projection to preserve the pre-computed geometry. Border stroke widths are adjusted inversely to the zoom scale to maintain a constant visual weight.

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