US States Cloropleth Reusable module

100%

US States Cloropleth Reusable module

✓ Published0🌍 Public

Last edited Jul 18, 2018

Created on Jul 17, 2018

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.

AI-generated description

Built with blockbuilder.org

forked from <a href='http://bl.ocks.org/john-guerra/'>john-guerra</a>'s block: <a href='http://bl.ocks.org/john-guerra/7bb8bf04742c84929fc5210d1f257e93'>US States Cloropleth Small Multiples</a>

forked from <a href='http://bl.ocks.org/john-guerra/'>john-guerra</a>'s block: <a href='http://bl.ocks.org/john-guerra/f9f33bc08e6c7b753366a4ebbec3816c'>US States Cloropleth Reusable module</a>

mit Licensed

Similar vizzes

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

95% match

Loading thumbnail…

US States Cloropleth Reusable module

This choropleth shows US state revenues from the Census Bureau’s Annual Survey of State Government Finances, colored by total revenue per state for 2008. The reusable D3 v4 module renders an SVG map of the United States, using a diverging color scale to encode revenue values and providing hover interactions to highlight individual states and display their data. Built from a block by john-guerra, this version generalizes the visualization into a reusable component, making it easy to adapt for other datasets or years. The map is accompanied by a legend and supports tooltips for state-level inspection, all within a clean, MIT-licensed implementation.

Aadamlenart

93% match

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

84% match

Loading thumbnail…

US States Choropleth Small Multiples

This visualization presents small multiples of choropleth maps for each US state, showing revenue data across multiple years. Each state is rendered in its own SVG panel, with color intensity encoding the magnitude of the selected revenue variable. The maps are built with D3 v4 using TopoJSON for state boundaries and CSV data loaded from the source file, enabling comparison of fiscal patterns across states and years.

Aandyreagan

81% match

Loading thumbnail…

Modular US State Choropleth

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.

Aaawiegel

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

US State Map

This example displays a choropleth map of US states, with each state colored by a data value. The map shows a tooltip upon hovering, detailing low, average, and high values for each state, and animates state opacity on hover. It uses the `d3.v3` library and the `uStates.js` script, which provides SVG paths for each state. The tooltip is built with HTML, and a color scale interpolates from light yellow to dark purple based on the data.

NNPashaP

79% match

Loading thumbnail…

USA Map

This visualization displays a choropleth map of the United States, where individual states are filled with varying intensities of red based on values loaded from a CSV file. States without matching data appear in gray. The map is rendered as an SVG using D3.js, with geographic boundaries drawn via `d3.geoPath` and TopoJSON features from the `us-10m.v1.json` dataset. A `d3.scaleLinear` maps data values to a color range from light red to deep red for each state's fill.

Hharsha

79% match