Choropleth Map

100%

Choropleth Map

✓ Published1🌍 Public

Last edited Sep 8, 2020

Created on Jul 22, 2020

A choropleth map of United States states renders geographic boundaries as SVG paths, colored light blue with black outlines and a red hover state. The map uses the topojson library to convert US Atlas TopoJSON data into GeoJSON features, then projects them with d3.geoAlbersUsa and renders them via d3.geoPath. Interactive zooming is enabled through a d3.zoom event that applies transform updates to the map group, while a categorical color legend displays the domain. State data loads from a remote US Atlas JSON file.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Country Map

This example shows a choropleth map of the United States, with each state rendered as a green SVG path on a light blue background. It loads US state boundaries from the us-atlas TopoJSON file and uses the `d3.geoPath` projection with `d3.geoAlbersUsa` to create the map. The code relies on `d3.json` to fetch the data and the `topojson-client` library to convert TopoJSON features into GeoJSON paths for rendering.

KKishen Patel

88% match

Loading thumbnail…

USA Country Map

Choropleth map of the United States uses SVG paths to display all fifty states from TopoJSON data, with state boundaries rendered as black strokes. The visualization employs d3.geoPath with the geoAlbersUsaTerritories projection to convert geographic coordinates into screen positions. Hovering over any state changes its fill color from green to orange through CSS :hover rules. The React component loads the geographic topology asynchronously via d3.json and processes it with topojson.feature and topojson.mesh utilities.

NNithish Kumar

88% match

Loading thumbnail…

Country Map

This example displays a choropleth map of the 50 US states, rendered as SVG paths with a blue fill and black state borders. The visualization uses the `geoAlbersUsaTerritories()` projection and `d3.geoPath()` to draw geographic features, while `useData` fetches TopoJSON data from the `us-atlas` package. State boundaries are generated via the `feature()` and `mesh()` functions from TopoJSON, and hovering highlights a state blue.

Rrakeshkommineni

88% match

Loading thumbnail…

usa map

This example displays a choropleth-style map of US states, with each state filled by a categorical color from `d3.scaleOrdinal` and `schemeCategory10`. It uses `d3.geoPath` with a `geoAlbersUsa` projection to render the SVG paths, and the state boundaries are loaded from a TopoJSON file via `us-atlas`. Hovering a state changes its fill to yellow, while a red stroke outlines all boundaries. The code processes the TopoJSON with `topojson.feature` and appends a `<title>` element for each state name.

SSai Hemanth Babu Sunkari

88% match

Loading thumbnail…

Centered US Choropleths Map

A centered US choropleth map displays state boundaries with a uniform purple fill, using state-level rate data from a TSV file. The visualization loads US Atlas TopoJSON data and renders it with React and D3 v5, using `d3.geoAlbers` for projection and `d3.geoPath` to draw state and interior mesh paths. The code includes commented-out attempts at threshold-based color mapping with `d3.scaleThreshold` and `d3.schemeGreens`, though the final version applies a single color to all states.

Yyuzhang21

87% match

Loading thumbnail…

Centered US Choropleths Map

A choropleth map of US states displays state-level rates using a green color scale, with state boundaries from the US Atlas TopoJSON and state rate data from a TSV file. The visualization uses React with D3’s `geoAlbers` projection and `geoPath` to render SVG paths, applying a `d3.scaleThreshold` color lookup based on each state’s rate. The map includes a sphere background and interior state borders, with loading handled via `Promise.all` to fetch both TopoJSON and TSV data.

Wwenleicao

87% match

Loading thumbnail…

USA state Map

A choropleth map of the United States colors states based on a numeric value from a CSV file, with a linear color scale mapping low values to light red and high values to dark red. The map is rendered as SVG using D3 v6 and topojson, with the `d3.geoPath` generator drawing state boundaries and `d3.scaleLinear` adjusting fill colors. States without matching data appear blue. The CSV is loaded via `d3.csv`, and state boundaries come from the us-10m.v1.json TopoJSON file.

VVinay Vemuri

87% match

Loading thumbnail…

country map

This visualization displays a choropleth map of the United States, coloring each state in red with thin black internal borders. The map is rendered using React and D3 v5, with geographic shapes generated through `d3.geoAlbers` projection and `d3.geoPath`. State boundaries come from the US Atlas TopoJSON dataset, processed via `topojson.feature` and `topojson.mesh`. The SVG paths change to sky blue on hover using CSS, providing simple interactivity.

SSai Kaushik

86% match