Skip to main content
SimilarExport ZIP
100%

Svelte + D3: Map (with visible hidden canvas) on canvas with zoom on click

✓ Published1🌍 Public
MMatthias Stahl
Last edited Nov 26, 2025
Created on Feb 8, 2024

This example displays a map of US counties rendered on two stacked HTML5 canvas layers, with a visible stroke layer atop a hidden color-picking layer. Clicking a county smoothly zooms in via a tweened `zoomIdentity` transform, and pressing Escape resets the view. The code uses `d3.geoAlbersUsa`, `d3.geoPath`, and `d3.zoomIdentity` for projection and scaling, while mouse picking relies on Canvas `getImageData` from the hidden layer. County outlines come from a GeoJSON dataset, and hover effects animate opacity through Svelte transitions.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Svelte + D3: Map on canvas with zoom on click

This example shows a map of US counties rendered on two stacked HTML canvas elements using Svelte and D3. Clicking a county zooms into it smoothly via a tweened zoom transform, while the visible canvas displays aquamarine paths and a hidden canvas uses color-picking with `getImageData` for accurate hover detection. The map data comes from a GeoJSON file via `d3.json`, with `d3.geoAlbersUsa` and `d3.geoPath` generating the projection and paths. Pressing Escape resets the view.

MMatthias Stahl
98% match
Loading thumbnail…

Svelte + D3: Map with GeoJson

This example displays a map of US counties using GeoJSON data, rendered as SVG paths with a steelblue fill. It uses D3’s `geoAlbersUsa` projection and `geoPath` to convert geographic coordinates into screen paths, with the map fitted to the container’s dimensions. Hovering over a county increases its opacity from 0.5 to 1 via a CSS class toggle, creating a subtle interactive highlight. The data comes from Plotly’s `geojson-counties-fips` dataset, loaded asynchronously with D3’s `json` method.

MMatthias Stahl
86% 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
79% match
Loading thumbnail…

Zoom in Map Demo

Clicking a US state zooms to that state at 4× magnification, while clicking again resets the view. Clicking an individual county zooms in much deeper, to 23×, centering on that county. Built with D3 v3 and TopoJSON, the map renders US states and counties as SVG paths using an Albers USA projection, with smooth 750-millisecond transitions handled by D3's `transition` and `attr` methods. The data comes from a raw GitHub gist containing US TopoJSON topology.

JJn1532
78% match
Loading thumbnail…

Map Zooming III

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.

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

Zoom to Bounding Box II

This example demonstrates smooth zooming and panning over a map of the United States using Albers equal-area projection. Users click individual states, triggering a 750-millisecond animated transition to a bounding box around that state, while the map remains freely navigable via mouse drag and wheel zoom. The visualization uses `d3.geo.albersUsa` for projection, `d3.behavior.zoom` for interactive and animated transformations, and `d3.geo.path` to render state boundaries and a mesh overlay from the US TopoJSON data file. Active states highlight in orange, and stroke widths adjust dynamically during zoom.

Mmbostock
78% match