Skip to main content
100%

Modular US State Choropleth

✓ Published0🌍 Public
Aaawiegel
Last edited Aug 1, 2017
Created on Aug 1, 2017

A modular US State Choropleth maps state-level CSV data onto a continuous linear color scale, rendering each state as an SVG path using D3 v4's geoAlbersUsa projection. The example loads beerwine2.csv, which contains a normalized `value` for each state, and merges it with GeoJSON state geometries to color-code the map. Users can customize the color ramp by modifying the `lowColor` and `highColor` variables. A vertical gradient legend with an axis is included to show the value-to-color mapping. This block is a refactored version of an existing choropleth and requires a `statesdata.csv` with `state` (full name) and `value` (numeric) columns.

AI-generated description

A modular version of this excellent choropleth - will map any CSV statesdata.csv on a linear continuous value, using d3js v4.

Requirements for statesdata.csv:

  • state column with standard full-length state names
  • value column with any numeric values

Also, you can edit the color ramp using the lowColor and highColor variables.

forked from <a href='http://bl.ocks.org/wboykinm/'>wboykinm</a>'s block: <a href='http://bl.ocks.org/wboykinm/dbbe50d1023f90d4e241712395c27fb3'>Modular US State Choropleth</a>

mit Licensed

Similar vizzes

Loading thumbnail…

Modular US State Choropleth

This modular choropleth maps state-level data onto a U.S. map using a light-to-magenta color ramp defined by `lowColor` and `highColor`. The D3 v4 example loads a CSV containing state names and numeric values, joins them to a GeoJSON of US states, and renders the result as SVG paths using the Albers USA projection. A linear color scale maps data values to fill colors, and a vertical gradient legend with an axis communicates the value range. The code is organized for easy reuse, allowing users to swap in their own `statesdata.csv` with `state` and `value` columns.

CCraftbd
93% match
Loading thumbnail…

US States Cloropleth Reusable module

This example builds a reusable D3 v4 module for a choropleth map of US states, rendering an SVG map colored by a data variable. It loads state-level revenue data from a CSV and joins it to geographic features of US states, then applies a color scale to visualize the selected variable across the map. The module is designed for reuse, with the map rendered entirely in SVG, and is licensed under MIT.

Aandyreagan
80% match
Loading thumbnail…

US States Cloropleth Reusable module

This reusable module renders a choropleth of US states using D3 v4, displaying state-level data from the Census of Governments revenue dataset. The SVG visualization colors each state based on a selected revenue metric, with a color scale mapping data values to hues. The module is designed for reuse, allowing users to plug in different data columns from the CSV file. It reads the CSV data, joins it with a US TopoJSON geometry, and fills each state path with a color corresponding to the chosen data value. The example highlights the distribution of state government finances, such as total revenue or specific tax categories, across the United States, with hover interactions for detail.

Aandyreagan
80% match
Loading thumbnail…

Fork of Fork of Chloropleth

A choropleth map of the United States colors each state according to a numeric value from a CSV file, using a white-to-blue linear scale. It renders as an SVG via D3 v6, with an Equal Earth projection fitted to the map’s bounding box. The code loads GeoJSON state boundaries and state statistics, then joins them by ISO 3166-2 codes to set fill colors through `d3.geoPath` and `d3.scaleLinear`. The map is sized at half the container’s width, with data sourced from a GitHub-hosted GeoJSON file.

Bbepnye@gmail.com
78% 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
78% match
Loading thumbnail…

Beer / Wine Popularity Ratio - US Choropleth

This choropleth maps the ratio of beer to wine popularity across U.S. states, coloring each state on a continuous red-to-yellow scale from the loaded CSV data. Built with D3 v4, it uses `d3.geoAlbersUsa()` for projection and `d3.geoPath()` to render state boundaries from a GeoJSON file, while a linear color scale drives the fill. A gradient legend with an axis is appended to display the data range.

LLichtphyz
78% match
Loading thumbnail…

Fork of Chloropleth

This visualization displays a choropleth map of the United States using a hexgrid projection, with each state's fill color corresponding to a numerical value from the `StateFile.csv` data (ranging from 0 to 221, likely representing counts or frequencies). The map is rendered as an SVG using `d3.geoPath` with a `d3.geoEqualEarth` projection fitted to the canvas. The code loads GeoJSON map data and CSV statistics via `d3.json` and `d3.csv`, then maps state codes (ISO 3166-2) to values using a linear color scale that transitions from white to blue. Interactive mouseover effects are present but commented out.

Bblanchestora@gmail.com
77% match
Loading thumbnail…

USA Map

This example displays a choropleth map of the United States, coloring each state according to a value from a local CSV file. The code loads GeoJSON geographic data and uses `d3.geoPath` for map rendering, while a linear color scale maps data values to a light-to-dark blue gradient. The map uses SVG paths with white strokes, and states without corresponding data appear gray. It demonstrates loading external data via `d3.csv` and `d3.json`.

Ppardha1411
77% match