Demers Cartogram

100%

Demers Cartogram

✓ Published0🌍 Public

Last edited Apr 26, 2016

Created on Mar 18, 2016

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.

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>

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Demers Cartogram

A pseudo-Demers cartogram maps U.S. state centroids to squares, sized by adult obesity rates from CDC 2008 data. The D3.js (v3) visualization uses a force-directed layout with a collision handler and gravity to reposition each square as close as possible to its original location. The `d3.layout.force` API and a quadtree-based `collide` function manage the non-overlapping arrangement, preserving geographic locality while breaking spatial adjacency.

SSpaceActuary

81% match

Loading thumbnail…

State Choropleth

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.

SSpaceActuary

80% match

Loading thumbnail…

Demers Cartogram

This visualization shows a pseudo-Demers cartogram of U.S. adult obesity rates, with each state represented by a square whose area encodes the prevalence of BMI ≥ 30. The squares are initially placed at their geographic centroids and then shifted via a d3.layout.force simulation with custom gravity and collision functions to avoid overlap while preserving approximate locality. The code uses d3.geo.albersUsa() for projection and d3.geom.quadtree for collision detection, rendering as SVG rectangles. Data comes from CDC 2008 values embedded as an array, with state centroids loaded from an external JSON file.

SSpaceActuary

79% match

Loading thumbnail…

Demers Cartogram

This visualization shows obesity rates across U.S. states as a pseudo-cartogram, encoding each state’s value as a square whose area is proportional to the obesity ratio. Rather than preserving adjacency between states, the layout uses a force simulation with `d3.forceSimulation`, applying `d3.forceX` and `d3.forceY` to pull each square toward its original Albers USA projection centroid while a custom collide force prevents overlap. The obesity data is drawn from CDC 2008 estimates and rendered as SVG rectangles, colored uniformly gray.

Mmbostock

78% match

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

76% match

Loading thumbnail…

US 2012 elections by zipcode

This interactive map shows the 2012 US presidential election results by county, visualized as a zoomable choropleth. The color of each county path reflects the difference between Democratic and Republican vote percentages, ranging from blue to red. Users can hover over counties to see details and click to zoom. Built with D3 v4, the visualization uses `d3.geoPath` and a custom `d3.zoom` handler to render topojson county boundaries. Election data is sourced from The Guardian.

SSamagoue

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

76% match

Loading thumbnail…

Demers Cartogram

This interactive SVG cartogram visualizes U.S. adult obesity rates from CDC 2008 data, representing each state as a square whose size scales with the prevalence of BMI ≥ 30. The map preserves approximate geographic locality—squares stay near their original positions—rather than maintaining adjacency between states. A custom collision force iteratively pushes overlapping rectangles apart while d3.forceSimulation with d3.forceX and d3.forceY pulls each square toward its projected Albers USA centroid. The code uses a manual collide function with four iterations per tick to separate the rect elements.

深深度碎片

75% match