Skip to main content
SimilarExport ZIP
100%

Map Zooming III

✓ Published0🌍 Public
Mmbostock
Last edited Feb 9, 2016
Created on Aug 22, 2013

A map of the United States is drawn with canvas, and moving the mouse horizontally smoothly interpolates between three zoom levels centered on San Francisco, New Orleans, and New York. The example uses a linear scale with `d3.interpolateZoom` to map mouse position to a zooming transform, and `d3.geo.transform` for simplification. It renders TopoJSON state boundaries clipped by `d3.geo.clipExtent`, using D3 v3’s `d3.geo.path` with a canvas context.

AI-generated description

This variation of the map zooming example uses interaction to control a smooth zooming interpolator. Mouse over the map to zoom between San Francisco, New Orleans and New York.

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Map Zooming II

Moving the mouse across the map smoothly interpolates a zoom between San Francisco and New York. The visualization renders United States state boundaries as a canvas-drawn mesh using d3.geo.path with a custom projection that applies dynamic simplification and clipping during the zoom. It uses d3.interpolateZoom, d3.geo.transform, and d3.geo.clipExtent to control the transition, adjusting the scale and translate values based on the pointer's horizontal position. The underlying TopoJSON data is pre-simplified with topojson.presimplify, and the rendering occurs entirely through the Canvas 2D API.

Mmbostock
92% match
Loading thumbnail…

Map Zooming

This example demonstrates a map zooming animation that alternates between San Francisco and New York, using D3’s zoom transitions. The code renders simplified U.S. state boundaries on a Canvas element via `d3.geo.path` with a custom `d3.geo.transform` for adaptive simplification. It uses `d3.behavior.zoom` to compute translations and scales, and `topojson.presimplify` to preprocess the TopoJSON data source. The continuous back-and-forth zoom is driven by chained transitions with a repeating `jump` function.

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

OPHZ Zooming

A map of U.S. counties continuously zooms between a national overview and a detailed close-up of San Francisco. The sequence repeats automatically, using D3’s `d3.behavior.zoom` and `d3.geo.clipExtent` for viewport clipping. TopoJSON geometry is pre-simplified and dynamically simplified with `d3.geo.transform` based on zoom scale, then rendered as stroked paths on Canvas.

Mmbostock
84% match
Loading thumbnail…

Gist 6414125

This example demonstrates interactive panning and zooming over a map of U.S. states and counties using SVG. It uses `d3.behavior.zoom` to control the map’s transform, while `d3.geo.path` renders the TopoJSON data from the `us.json` file. The zoom event updates the map’s translate and scale attributes, and stroke widths adjust inversely to the zoom level. Buttons also allow resetting the view or disabling the zoom event entirely.

11wheel
82% match
Loading thumbnail…

Dynamic Simplification II

This example combines map zooming with dynamic simplification. As the map zooms in and out, the simplification area threshold adjusts based on the current scale, keeping the map visually clear and rendering quickly. Points outside the viewport are simplified much more heavily than those inside, approximating viewport clipping. The code uses `d3.geo.transform` to filter points, `d3.behavior.zoom` for interaction, and `d3.geo.path` with a Canvas context to draw the TopoJSON data (us-states.json), animating between zoom levels with `transition`.

Mmbostock
81% match
Loading thumbnail…

Zoom to Bounding Box II d3v4

This example demonstrates zooming and panning across a map of the United States, with clickable states that smoothly transition to fill the viewport. It shows how to combine geographic projections with D3’s zoom behavior for interactive exploration. The visualization uses `d3.geoAlbersUsa` for the projection, `d3.geoPath` to render TopoJSON state boundaries, and `d3.zoom` to handle free pan and zoom. Clicking a state triggers a 750ms transition via `zoom.transform`, calculating a bounding-box scale and translate to frame the feature. The active state is highlighted in red, while stroke widths adjust inversely to the zoom level for crisp rendering.

IIgathi
81% match
Loading thumbnail…

Zoom to Bounding Box II d3v4

This example demonstrates zooming and panning across a map of the United States, with clickable states that smoothly transition to fill the viewport. It shows how to combine geographic projections with D3’s zoom behavior for interactive exploration. The visualization uses `d3.geoAlbersUsa` for the projection, `d3.geoPath` to render TopoJSON state boundaries, and `d3.zoom` to handle free pan and zoom. Clicking a state triggers a 750ms transition via `zoom.transform`, calculating a bounding-box scale and translate to frame the feature. The active state is highlighted in red, while stroke widths adjust inversely to the zoom level for crisp rendering.

IIgathi
81% match