Skip to main content
SimilarExport ZIP
100%

Fork of State Zoom

✓ Published5🌍 Public
Ss_cural@coloradocollege.edu
Last edited May 9, 2024
Created on May 6, 2024
Forked from 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.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

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

Fork of Fork of State Zoom - sham

This interactive map of the United States lets users click on individual states to zoom in and explore them. The visualization highlights specific states like Colorado, California, and New York in green, and clicking Colorado triggers a transition that enlarges a pre-existing Denver map element. It renders geographic boundaries using d3.geoPath with TopoJSON data, while a CSV of Denver Airbnb listings is loaded to populate the city-level map. The code uses d3.v3’s geo projection, topojson.feature, and transition methods to animate the zoom effect.

RRahmoon Shamdeed Kabir
91% match
Loading thumbnail…

Fork of Fork of State Zoom - sham - single map

This example displays a static choropleth map of the United States using the Albers USA projection, with each state rendered as a gray SVG path. The map is created with React and D3.js v7 APIs, including `d3.geoAlbersUsa`, `d3.geoPath`, and `d3.json` to load GeoJSON topology data from a remote URL. State boundaries are highlighted with white strokes, and each path has a CSS class for potential interactivity, though no click behavior is implemented here.

RRahmoon Shamdeed Kabir
88% match
Loading thumbnail…

click-to-zoom via transform

Clicking a US state smoothly zooms the map to that state, centering it and enlarging it fourfold; clicking again restores the full national view. The example builds an interactive state map with D3, using `d3.geo.albersUsa` for the projection and `topojson` to process geographic data. Zoom animation is driven by D3 transitions, which update an SVG `g` element’s `transform` attribute and adjust the stroke width to maintain visual consistency. State borders and a clickable background rect facilitate the interaction, with active states highlighted in orange.

FFrissAnalytics
86% match
Loading thumbnail…

click-to-zoom via transform

Clicking a US state zooms to that state via a SVG transform transition, while clicking the background resets the view. The map renders TopoJSON data through `d3.geo.albersUsa` projection and `d3.geo.path`, with state borders drawn from a topology mesh. An orange highlight marks the active state, and stroke width inversely scales with zoom. The interaction uses a `g.transition()` to animate `translate` and `scale` attributes over 750 milliseconds.

Mmbostock
86% match
Loading thumbnail…

Zoom to bounding box d3.v4

Clicking a US state zooms the map to that state’s bounding box, with a smooth 750-millisecond transition, while the user can also freely pan and zoom. The example uses d3.v4’s `d3.zoom` and `d3.geoPath` with an Albers USA projection, rendering state features as SVG paths from TopoJSON. Zooming is triggered by computing the path bounds and applying `d3.zoomIdentity.translate().scale()` via `transition.call(zoom.transform)`. Clicking the background resets the view, and active states highlight in orange, with the mesh and stroke width updating on zoom.

FFrissAnalytics
85% match
Loading thumbnail…

Zoom to Bounding Box II

This example demonstrates smooth zooming and panning over a map of the United States using Albers equal-area projection. Users click individual states, triggering a 750-millisecond animated transition to a bounding box around that state, while the map remains freely navigable via mouse drag and wheel zoom. The visualization uses `d3.geo.albersUsa` for projection, `d3.behavior.zoom` for interactive and animated transformations, and `d3.geo.path` to render state boundaries and a mesh overlay from the US TopoJSON data file. Active states highlight in orange, and stroke widths adjust dynamically during zoom.

Mmbostock
85% match
Loading thumbnail…

Untitled

This example presents an interactive map of the United States using d3.geo.path with an Albers USA projection, rendering state boundaries as SVG paths. Clicking a state triggers a smooth zoom animation that scales and translates the map to center on the selected region, highlighting it in orange. The map is constructed from topojson.feature and include a mesh overlay for state borders. The zoom effect is achieved by transitioning the group element's transform attribute using d3.transition over 750 milliseconds.

Ppcsong33
85% match