Skip to main content
SimilarExport ZIP
100%

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

✓ Published0🌍 Public
Bbaltasar.ms@gmail.com
Last edited Apr 14, 2024
Created on Apr 12, 2024

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`.

AI-generated description
MIT Licensed

Similar vizzes

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
96% match
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
92% match
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
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
83% match
Loading thumbnail…

Fork of State Zoom

This interactive map of the United States allows users to click on individual states to zoom in, using the Albers USA projection via `d3.geo.albersUsa()` and rendering state boundaries as SVG paths from TopoJSON data. Clicking a state triggers an animated transition that scales and translates the view, while toggling an “active” state class; clicking Colorado, identified by its ID, removes the entire SVG as a special case. The map distinguishes certain states with a green color, and uses `d3.json()` to load geographic data.

Ss_cural@coloradocollege.edu
79% match
Loading thumbnail…

Fork of Fork of State Zoom

This interactive map displays US states as clickable regions. Clicking a state smoothly zooms and centers the map on that state, highlighting it in orange, while Colorado is always shown in green. The visualization uses d3.geo.albersUsa projection, topojson for state geometries, React for the interface, and SVG with CSS transitions for animation.

Ss_cural@coloradocollege.edu
77% 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
77% match
Loading thumbnail…

zoomUsCounty

This interactive map displays all U.S. counties as gray polygons with state borders overlaid in white. Clicking a state zooms in on that region, while clicking a county triggers a deeper zoom to a scale of 23, with another click resetting the view. The visualization uses D3 v3 and TopoJSON to load geographic data from a gist, projecting it with `d3.geo.albersUsa` and rendering paths via `d3.geo.path`. Transitions animate the zoom using SVG transform scaling and translation, with hover effects highlighting counties and states in orange.

JJn1532
76% match