Skip to main content
SimilarExport ZIP
100%

Untitled

✓ Published0🌍 Public
AAndrey Getmanov
Last edited May 29, 2022
Created on May 29, 2022
Forked from Untitled

An interactive choropleth of US states allows users to click a state to zoom in and highlight its boundaries, with the map rendered via d3.geo.path and TopoJSON. Wildfire data is loaded from a CSV, though the visualization primarily shows state selection and zoom animation using React state management. The albersUsa projection scales and translates to focus on selected regions, with transitions animating the zoom effect.

AI-generated description

React Starter code.

MIT Licensed

Similar vizzes

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

Untitled

This interactive map of the United States uses a D3.js geographic projection to display state boundaries, rendered as SVG paths from TopoJSON data. Clicking a state zooms in via a smooth `transition` that adjusts the group’s scale and translate attributes, while the clicked state is highlighted in orange. A click on the background resets the view, returning the map to its original scale and stroke width. The example relies on `d3.geo.albersUsa`, `d3.geo.path`, and TopoJSON’s `feature` and `mesh` methods.

CChase Hall
89% match
Loading thumbnail…

Untitled

A choropleth map of the United States displays the cumulative wildfire burn area per state, with a green color scale encoding the logarithm of total acres burned. Clicking a state zooms and centers the map on that region, enlarging it fourfold and replacing the state abbreviation label with its full name and fire size. Using React, d3.geoPath, and d3.json, the SVG map projects geographic data with d3.geoAlbersUsa and animates the zoom via d3.transition, while the color scale relies on d3-scale-chromatic.

PPavelyev Ivan
88% match
Loading thumbnail…

Untitled

This interactive map visualizes wildfire data across U.S. states, using size and color to represent fire frequency or intensity. Built with React and D3 v5, it renders a geographic map with state boundaries, reading wildfire records from a CSV file. Users can click a state to zoom in and see more detail, with the map’s projection and path drawing handled by `d3.geo.albersUsa` and `d3.geo.path`. The animation and interaction are driven by React state, while data parsing uses `d3.csv`.

PPavelyev Ivan
87% match
Loading thumbnail…

Untitled

This choropleth displays the 50 U.S. states with land areas filled in green and white state borders, highlighting a state in orange on hover. It uses React and D3 v5’s `geoPath` with the `geoAlbersUsaTerritories` projection to render geographic features as SVG, pulled from TopoJSON data in the US Atlas (`states-10m.json`). The `feature` and `mesh` functions from TopoJSON extract land polygons and interior boundaries, which are styled via CSS.

SSelena Ding
85% match
Loading thumbnail…

Untitled

This example displays a choropleth-style map of the United States using SVG paths. It renders state boundaries and fills each state as a separate path, with a hover effect that turns states red via CSS. The visualization loads TopoJSON data from a remote URL and converts it to GeoJSON using the `topojson.feature` and `topojson.mesh` APIs. It relies on `d3.geoPath` to project and draw the geographic shapes, while `d3.json` fetches the data asynchronously. State borders are drawn as a white stroke overlay for visual separation.

MMina Rezaei
84% match
Loading thumbnail…

Untitled

This example displays a map of the United States with individual state boundaries rendered as SVG paths. The visualization uses TopoJSON data from the us-10m dataset, with states drawn via d3.geoPath and state borders emphasized with a white stroke. The code employs the D3 v4 library and topojson.feature to extract state geometries, while a CSS hover effect turns states red for interactive feedback. The rendering is purely SVG-based within a React framework.

MManh Pham
84% match
Loading thumbnail…

Let's make an interactive US Map with D3.js!

This interactive US map uses d3.geoAlbersUsa and d3.geoPath to render state boundaries from TopoJSON data, with each state displaying its name via SVG title elements. The visualization supports zooming and panning through d3.zoom, applying transforms to the SVG group containing the state paths. States are colored light green and highlight on hover, while the surrounding ocean appears as a light blue sphere backdrop. The map loads geographic data from a CDN-hosted US atlas file and renders everything client-side using D3 v5.

KKaitlyn Trudeau
83% match