Skip to main content
SimilarExport ZIP
100%

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

✓ Published0🌍 Public
Ttrystansiew@gmail.com
Last edited Jun 18, 2024
Created on Jun 18, 2024

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.

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 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
96% 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
93% 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
93% 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…

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

Fork of map

This visualization displays a map of the United States, with each county filled using a categorical color scale based on its name. It renders these counties as SVG paths generated by `d3.geoPath` with the `geoAlbersUsa` projection, sourcing geographic data from a US Atlas TopoJSON file. The counties are outlined in red with low opacity, and they highlight yellow on hover. The visualization uses D3 v5 and the `topojson` library’s `feature` function to extract the geometries from the `counties-10m.json` dataset.

Rreddysushma994@gmail.com
79% match
Loading thumbnail…

Let's make a map of US-counties with D3.js:"hover and county name "

This example displays a choropleth-style map of all US counties rendered as SVG paths, with county names revealed on hover via a native `<title>` element. The visualization uses D3 v5’s `geoAlbersUsa` projection and `geoPath` to draw county boundaries from TopoJSON data loaded from the us-atlas package. County shapes are styled with black strokes and a green fill on mouseover, showing the geographic distribution of administrative divisions. The code filters the TopoJSON for county features and binds them to path elements, relying on the browser’s built-in tooltip behavior for the name display.

NNita
78% match
Loading thumbnail…

Let's make a map of US-counties with D3.js:"hover and county name "

This example displays an interactive map of U.S. counties rendered as SVG paths, with each county’s name appearing as a tooltip on hover. The map uses the `geoAlbersUsa` projection and `geoPath` from D3 v5, while TopoJSON’s `feature` method extracts county geometries from the us-atlas counties-10m.json dataset. Hovering highlights the county in green via a CSS `:hover` rule. The visualization depends on D3’s `select` and `json` utilities to fetch and bind the geographic data.

NNita
78% match