Svelte + D3: Map on canvas with zoom on click

100%

Svelte + D3: Map on canvas with zoom on click

✓ Published1🌍 Public

Last edited Nov 26, 2025

Created on Feb 8, 2024

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.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

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

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.

MMatthias Stahl

98% match

Loading thumbnail…

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

This interactive map of US counties uses D3’s geoAlbersUsa projection and geoPath to draw each county’s outlines onto two overlapping canvas layers. The top layer renders semi-transparent steel-blue shapes, while the hidden bottom layer paints each county with a unique color ID; the browser’s Canvas getImageData function reads pixels under the mouse to identify hovered counties for highlighting. Clicking a county triggers a smooth, animated zoom via a Svelte tweened transform, with a press of Escape returning to the full view.

Ttrystansiew@gmail.com

93% match

Loading thumbnail…

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

This interactive map of US counties allows users to click on a county to zoom into it, with an animated transition, and press Escape to zoom back out. The visualization uses a dual-canvas approach: one visible canvas renders the map in steel blue, while a second hidden canvas uses color-coded pick IDs for hit detection, with mouse position read via Canvas `getImageData` to identify hovered counties. The map is drawn using `d3.geoPath` with a `geoAlbersUsa` projection from GeoJSON county boundaries, while the zoom animation is powered by Svelte’s `tweened` motion primitive from `svelte/motion`.

Bbaltasar.ms@gmail.com

92% 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

88% 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

80% 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

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

79% 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