Constrained Zoom Map. Centered on the Pacific

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.

Constrained Zoom

This example displays a world map that users can pan and zoom, with the zoom behavior constrained so the map cannot be moved beyond its edges. The code uses d3.behavior.zoom with a custom zoom event handler that clamps the translation based on the current scale. Geographic data from a TopoJSON file is rendered using d3.geo.path with a Mercator projection, and the map is drawn as SVG paths. The constraint formula adjusts the allowed translation range as the scale changes, preventing the map from leaving the viewport.

Mmbostock

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.

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.

World Map Centered on the Pacific

This example displays a world map centered on the Pacific Ocean using a Mercator projection. The map renders country boundaries as grey polygons with thin white strokes. It uses D3.js version 3.5.17 and TopoJSON to load and draw geographic data from a local `world-110m2.json` file. The projection is configured with a center of [0, 5], a scale of 150, and a rotation of -180 degrees, which shifts the map’s focus away from the traditional Atlantic-centered view.

84% match

World Map Centered v7

This example displays a world map centered on the Pacific Ocean using a Mercator projection. The map is rendered as SVG paths, with country boundaries drawn in white against grey landmasses. Built with D3 v7, it loads TopoJSON data from a local file and converts it to GeoJSON features using `topojson.feature`, then projects those features with `d3.geoMercator` and `d3.geoPath`. The projection is rotated by -180 degrees and centered at longitude 0, shifting the Pacific into view.

83% match

World Map Centered v5

This example displays a world map centered on the Pacific Ocean using a Mercator projection. It renders country boundaries as grey SVG paths with white strokes via `d3.geoPath`, projecting geographic data from a TopoJSON file. The map is rotated with `rotate([-180,0])` to shift focus away from the Atlantic, while `d3.json` loads the topology and `topojson.feature` extracts country geometries for display.

83% match

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.