Skip to main content
100%

Map Pan & Zoom I

✓ Published0🌍 Public
AAlan McConchie
Last edited Mar 25, 2018
Created on Mar 25, 2018

This map visualization shows a world map with country boundaries that can be panned and zoomed via mouse interaction. It uses d3.behavior.zoom with SVG transforms to apply translate and scale operations to the map group. The map is rendered using d3.geo.path with a Mercator projection, drawing landmasses as merged TopoJSON polygons and boundaries as meshes. Geographic data comes from a TopoJSON world-50m file hosted in a GitHub gist, with zoom scale restricted between 1x and 8x.

AI-generated description

This example uses d3.behavior.zoom with SVG transforms for map panning and zooming.

forked from <a href='http://bl.ocks.org/mbostock/'>mbostock</a>'s block: <a href='http://bl.ocks.org/mbostock/8fadc5ac9c2a9e7c5ba2'>Map Pan & Zoom I</a>

gpl-3.0 Licensed

Similar vizzes

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
90% 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
89% match
Loading thumbnail…

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.

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…

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
87% match
Loading thumbnail…

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.

Mmbostock
87% 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
86% match
Loading thumbnail…

world map d3 v4 zoom and pan

This interactive world map built with D3 v4 supports zooming and panning via mouse gestures, letting users explore a choropleth of countries. The map uses SVG paths rendered from TopoJSON data, with country names overlaid as text. Zoom and pan are implemented through the d3.zoom behavior, which applies SVG transforms to the map group. Hovering over a country displays a tooltip with its formatted population value, using the d3-tip library. The map smoothly animates as users drag or scroll to zoom, making it easy to inspect individual regions or the entire globe.

Aantonio-rodrigues
85% match