State Choropleth

100%

State Choropleth

✓ Published0🌍 Public

Last edited May 13, 2016

Created on May 13, 2016

This visualization shows a choropleth map of the United States colored by the margin of victory in the 2012 presidential election, with blue representing Democratic wins and red for Republican wins. It also uses a striped pattern to indicate states without data. The map is rendered with SVG using D3 v3 and the `d3.geo.path` API, with geographic data loaded via TopoJSON and the queue library. A linear color scale maps electoral vote differences, and a d3-legend color legend displays the scale.

AI-generated description

This is not a true Demers cartogram; it lacks links between adjacent features. Instead of trying to preserve connectedness, this pseudo-cartogram tries to preserve locality, putting each square as close as possible to its origin without overlapping.

forked from <a href='http://bl.ocks.org/mbostock/'>mbostock</a>'s block: <a href='http://bl.ocks.org/mbostock/4055889'>Pseudo-Demers Cartogram</a>

forked from <a href='http://bl.ocks.org/SpaceActuary/'>SpaceActuary</a>'s block: <a href='http://bl.ocks.org/SpaceActuary/9a92db9794c21d576087'>Pseudo-Demers Cartogram</a>

forked from <a href='http://bl.ocks.org/SpaceActuary/'>SpaceActuary</a>'s block: <a href='http://bl.ocks.org/SpaceActuary/795d614b4b298e32131e'>Switchable Cartograms</a>

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Week 7 New Technique

This visualization is a choropleth map of the 2020 U.S. presidential election results, coloring states by the proportion of votes cast for the Democratic versus Republican candidates. The map uses a red-white-blue color scale—red for states that voted more Republican, blue for those voting more Democratic, and white for true swing states—with color intensity reflecting the margin of victory. It is built with D3 and TopoJSON, loading US state boundaries from a public TopoJSON atlas and aggregating county-level election returns to compute statewide Democratic vote shares. A key technique is the use of `d3.geoIdentity` for map projection and `d3.interpolateRgbBasis` with a diverging color palette to smoothly transition across the political spectrum. The visualization dynamically updates once the geographic and election data are fetched and merged, providing an at-a-glance view of partisan voting patterns across the United States in the 2020 presidential election.

IIan Coolidge

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

80% match

Loading thumbnail…

Demers Cartogram

This pseudo-demers cartogram visualizes the 2012 U.S. presidential election results by representing each state as a square whose size corresponds to its electoral votes. The squares are positioned near their geographic origins, and their colors indicate whether the state voted Democratic (steel blue) or Republican (crimson). The visualization offers three layout modes—McCann, Demers, and Dorling—and an optional map overlay. Implemented with d3.v3, it uses d3.geo.albersUsa for projection, d3.layout.force for the layout simulation, and d3.geo.path for rendering state boundaries, with data from data.csv.

SSpaceActuary

80% match

Loading thumbnail…

State Choropleth Map

A choropleth map of the United States displays county-level unemployment rates from 2021, using a blue sequential color scale and a corresponding legend. The visualization is built with D3.js v5, leveraging `d3.geoPath` for rendering SVG paths, `d3.scaleThreshold` for color binning, and `d3.json` to load TopoJSON geographic data. A hover tooltip, implemented with a D3-selected `div`, reveals each county's specific unemployment percentage.

Mmariahdiaz

79% match

Loading thumbnail…

Choropleth population map

A choropleth map of the United States displays state-level population counts from 1990, using a color gradient from light orange to dark red. The map is rendered as SVG with D3 v3, leveraging `d3.geo.path` and TopoJSON for state boundaries. Population data from a CSV file is joined to state IDs, and a custom `d3.scale.quantize` interpolates colors across 100 steps. Hovering over a state triggers a tooltip and animates opacity, while the legend and interactivity are built with jQuery and D3 transitions.

Vvishusikka

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

79% match

Loading thumbnail…

Us 2020 elections by county

A choropleth map of the US 2020 presidential election results by county colors each county on a red-blue diverging scale based on the margin between Democratic and Republican votes, with state borders overlaid in white. Hovering over a county updates a detail panel showing the vote percentages and a horizontal bar comparison between Joe Biden and Donald Trump. The visualization uses D3 v4 with `d3.geoAlbersUsa` and `d3.geoPath` to render TopoJSON county boundaries from the US Census, while `d3.scaleSequential` with `d3.interpolateRdBu` handles the color encoding. Data comes from The Guardian and USA Today.

Ggcappadaniel

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

78% match