Modular US State Choropleth

100%

Modular US State Choropleth

✓ Published0🌍 Public

Last edited Apr 3, 2018

Created on Apr 3, 2018

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.

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…

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

81% match

Loading thumbnail…

Fork of US states map : with colorScale. One color for each country

A choropleth map of US states renders each state as a muted gray SVG path with thin dark borders, using an Albers USA projection. The visualization currently shows uncolored states, though the code defines a color scale with `d3.scaleOrdinal` and `schemeCategory10` for per-state coloring. Hovering any state turns it green via CSS. The map is built with `d3.geoPath`, TopoJSON state features, and the `geo-albers-usa-territories` projection, loading geographic data from the `us-atlas` package.

SSnapika

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

79% match

Loading thumbnail…

Choropleth Map

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.

NNicholas Papacostas

79% match

Loading thumbnail…

USA Map

This choropleth map of the United States colors each state according to a numeric value loaded from a CSV file, using a linear lightred-to-red scale. The SVG rendering is built with d3.geoPath, which projects the US states from a GeoJSON file, while topojson.feature extracts the state features. State FIPS codes from the CSV are matched against the GeoJSON IDs to assign fills, with gray as the default for missing data. The visualization relies on d3.select, d3.csv, and d3.json for data loading.

NNukaShravanKumar

79% match

Loading thumbnail…

Fork of US states map : with colorScale. One color for each country

This visualization displays a choropleth map of US states, where each state is filled with a distinct color from a categorical palette. The map uses the d3.geoAlbersUsa projection to render the geographic boundaries as SVG paths. Data is loaded from the us-atlas counties-10m.json file, with state names mapped to colors via d3.scaleOrdinal. States turn blue on hover, using CSS styling within the d3.select, d3.geoPath, and d3.json workflow.

Nnagamaheswar

79% match

Loading thumbnail…

Fork of US states map

This example displays a choropleth map of US states, with each state filled by a categorical color assigned through `d3.scaleOrdinal` and `schemeCategory10`. It renders the map using `d3.geoPath` with a `geoAlbersUsa` projection, drawing state boundaries from TopoJSON county data loaded via `d3.json`. Hovering over a state turns it green through CSS, and each state includes an SVG `<title>` element showing its name.

SShawn-Lian

79% match

Loading thumbnail…

Fork of US states map : with colorScale. One color for each country

This choropleth map displays US states, each filled with a distinct color from a categorical palette. The visualization uses the D3.js library, specifically `d3.geoPath` with `geoAlbersUsa` projection, to render the map from a TopoJSON file loaded from the us-atlas package. The color scale assigns colors based on the state's name, and hovering over a state turns it green via CSS. The map also includes tooltips that reveal the state name using the `.append('title')` method.

DDonald Bagwell

79% match