Fork of Fork of State Zoom

100%

Fork of Fork of State Zoom - sham

✓ Published0🌍 Public

Last edited May 9, 2024

Created on May 7, 2024

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.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript. See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

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

92% 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

91% 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

90% 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 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

81% match

Loading thumbnail…

Fork of react first level drilldown map using zoom

An interactive drill-down map of India lets users click state boundaries to zoom into district-level geography. Built with React and D3 v6, the visualization loads TopoJSON data and renders SVG paths via `d3.geoPath` with a Mercator projection. Clicking a state triggers `pathGenerator.bounds()` to compute the target region’s bounding box, then animates a `d3.zoom` transition over 500 milliseconds to scale and center the view. The drill-down filters district features based on the selected state’s name, and a dynamic stroke-width adjustment maintains visual clarity during zooming.

AAamir Hameed mir

80% match

Loading thumbnail…

Fork of react first level drilldown map using zoom

This example shows a drill-down map of Indian states and districts. Clicking a state zooms in to reveal its districts, while clicking a district zooms to that region. The visualization uses React to manage state for the selected area and D3 v6 for rendering. It employs `d3.geoMercator` and `d3.geoPath` to draw boundaries from TopoJSON files, with `d3.zoom` and `d3.zoomIdentity` handling the animated transitions. The map targets a bounding box using `pathGenerator.bounds`, scaling and translating the view accordingly.

SsreepavanKothapalli

80% 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

80% match