Demers Cartogram

100%

Demers Cartogram

✓ Published0🌍 Public

Last edited Mar 18, 2016

Created on Mar 18, 2016

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.

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>

gpl-3.0 Licensed

Similar vizzes

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

94% 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.

深深度碎片

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

92% match

Loading thumbnail…

Dorling Cartogram

A pseudo-cartogram maps obesity rates across U.S. states, using circles sized by value and positioned near their geographic origins. The visualization employs D3.js (v3) with an Albers USA projection and a `d3.layout.force` simulation to resolve overlaps while preserving locality. Circle radii are scaled via `d3.scale.sqrt` from CDC 2008 data, rendered as SVG shapes.

Mmbostock

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

81% match

Loading thumbnail…

Non-Contiguous Cartogram

This example displays a non-contiguous cartogram of U.S. obesity rates, where each state is rescaled around its centroid so that its area encodes the data value while preserving local shape. The distortion is achieved by applying a `transform` attribute to each state path, using `d3.geo.path` to compute centroids and `Math.sqrt` to determine scale. State boundaries come from the U.S. Census Bureau. The code uses `d3.json` to load TopoJSON and `d3.select` to build the SVG scene.

Mmbostock

81% match

Loading thumbnail…

D3 DataBinding

The example maps U.S. adult obesity rates from CDC 2008 data by projecting state boundaries and scaling each state’s area according to its value. It uses D3 v5 with `d3.geo.path()` to render TopoJSON features, applying a centroid-based transform that proportionally enlarges states with higher obesity ratios while adjusting stroke width inversely. The visualization appears twice on the page, with the second instance likely reusing the same logic. Data is embedded as an array of per-state values, and the map relies on TopoJSON’s `topojson.feature` to extract geometries.

663anp3ca

78% match

Loading thumbnail…

Brushable Scatterplot/Choropleth

A brushable scatterplot shows adult obesity rates versus median household income for U.S. states, with each state represented as a colored dot. The plot uses d3.brush to let users select a region, which filters the adjacent choropleth map to highlight only the selected states. The map, rendered with d3.geoPath and d3.geoAlbersUsa, colors states by their obesity rate using a d3.scaleThreshold. Data comes from the State of Obesity project and the 2014 ACS, with interactions updating both charts via shared callbacks.

TThanaporn-sk

73% match