Untitled

100%

✓ Published0🌍 Public

Last edited May 31, 2022

Created on May 30, 2022

Forked from 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.

AI-generated description

React Starter code.

MIT Licensed

Similar vizzes

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

89% match

Loading thumbnail…

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.

AAndrey Getmanov

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

84% match

Loading thumbnail…

Untitled

This choropleth map of the United States displays state-level COVID-19 case values with a green color scale, using lighter shades for lower numbers and darker greens for higher ones. The visualization loads CSV data and merges it with GeoJSON state geometries using d3.csv and d3.json, then renders paths with d3.geoPath and the d3.geoAlbersUsa projection. A d3.scaleQuantize maps numeric values to a five-color range, while states lacking data appear gray. The SVG is built with D3 v7 and styled with minimal CSS.

Jjoslinl

83% match

Loading thumbnail…

Untitled

This example shows a choropleth map of the United States, with states colored by whether the author has lived in, visited, or never visited them. Overlaid circles mark cities where the author has resided, with circle size scaled by years spent there. Hovering a circle reveals a tooltip with the city name. The visualization is built with D3 v3, using `d3.geo.albersUsa` and `d3.geo.path` to render GeoJSON state boundaries, while a linear color scale and SVG circles encode the categorical and quantitative data.

KKhushwant Rai

82% match

Loading thumbnail…

US Wildfire map

This interactive visualization combines a choropleth map of US wildfire burn areas with a stacked bar chart of fire causes. The map uses d3.geoRobinson projection and d3.geoPath to render state boundaries, with color encoding by total fire size and zoom-on-click functionality. A React-based bar chart displays fire counts by size class for selected states and years, with d3.scaleOrdinal color coding for causes. The Robinson projection and d3-scale-chromatic threshold scales handle the geographic and color mappings.

AAndrey Getmanov

82% match

Loading thumbnail…

Untitled

This example displays a choropleth map of the United States, coloring each state based on a numeric diversity value ranging from 0 to 5, with values mapped to a categorical color scale from grey to dark red. The map renders state boundaries using D3’s `d3.geoPath` and TopoJSON data from the US 10m dataset, while state fill colors are assigned via an ordinal `d3.scaleOrdinal`. The code loads the TopoJSON file and appends SVG paths for each state, using the diversity object to set fill colors and adding white state borders.

YYFKxenigsegg

82% match

Loading thumbnail…

US MAP

This interactive visualization displays a choropleth-style map of the United States, rendered as an SVG using React and D3 v5. The map shows state boundaries through purple interior lines, with land areas filled in green against a dark blue sphere background. The code employs `d3.geoAlbers` for the Albers equal-area projection, `d3.geoPath` to generate SVG paths, and `d3.geoGraticule` for grid lines. Geographic data comes from the `us-atlas` TopoJSON file, processed through `feature` and `mesh` from topojson library.

Ssiddu7147

82% match