Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

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

Public visualization

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

2 stars3🌍 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

Comments

Sign in to join the discussion.

MIT Licensed