Skip to main content
SimilarExport ZIP
100%

Fork of Fork of State Zoom

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

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

Fork of Fork of State Zoom

This interactive map visualizes Airbnb listings in Denver overlaid on a zoomable map of the United States. Clicking on Colorado triggers an animation that transitions to a detailed view of Denver neighborhoods, with red dots marking individual listings. The visualization uses D3.js v3’s `d3.geoPath` for map projections and `d3.transition` for smooth zooming, sourcing geographic data from a GeoJSON file and listings from a CSV file.

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

Fork of USA Country Map

This fork of the USA Country Map displays the 50 states using an SVG-based geographic projection. It colors each state green and shows white interior borders, with a hover effect that changes the fill to orange. The visualization uses `d3.geoPath` with the `geoAlbersUsaTerritories` projection, and loads geographic data from the `us-atlas` TopoJSON source. React manages the rendering, while D3 and TopoJSON handle the geographic feature and mesh processing.

DDonald Bagwell
83% match
Loading thumbnail…

Fork of Fork of USA Country Map

This choropleth map of the United States displays each state as a pink shape with white borders, enhancing interactivity by highlighting states in orange on hover. The visualization uses D3.js v5’s `geoAlbersUsaTerritories` projection and `geoPath` to render geographic boundaries, while React manages the component state. TopoJSON’s `feature` and `mesh` functions process the US Atlas state boundaries from a JSON file, and the SVG output is styled via CSS.

Mmoslem-tg
82% match
Loading thumbnail…

Fork of React Starter

This React visualization displays a choropleth map of the United States, coloring each state by a numeric rate value from an embedded dataset. Users can click individual states to zoom in and out, with the map resetting when clicking the background. The implementation uses React to render the component, while D3.js handles the SVG generation, `d3.geoIdentity` and `d3.geoPath` for geographic projections, `d3.scaleQuantize` with `d3.schemeBlues` for color encoding, and `d3.zoom` for interactive panning and scaling. TopoJSON data is loaded from a local `map.json` file to define state boundaries.

SSimeon
82% match