Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Svelte + D3: Map on canvas with zoom on click

Public visualization

Svelte + D3: Map on canvas with zoom on click

1 star1🌍 Public
MMatthias Stahl
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

Comments

Sign in to join the discussion.

MIT Licensed