Home/Chart Types/Geospatial/Demers cartogram
GeospatialIntermediate

Demers Cartogram

A map that replaces geographic regions with non-overlapping squares whose sizes encode a data variable — combining the clarity of uniform shapes with efficient spatial packing.

// 01 — The chart

What it looks like

Example — GDP by country (Europe)2024 estimate
DEUKFRITESNLCHPLBESEATIENODKFILarge GDPSmall GDP

A Demers cartogram of European countries where each square’s area is proportional to GDP. Germany, the UK, and France dominate as the largest squares.

// 02 — Definition

What is a Demers cartogram?

A Demers cartogram is a variation of the Dorling cartogram that replaces geographic regions with non-overlapping squares instead of circles. Each square’s area is proportional to a data variable such as population, GDP, or electoral votes.

The key innovation of the Demers cartogram is its use of squares rather than circles. Squares pack more tightly together, reducing wasted space between shapes. They also provide flat edges that make it easier to place text labels inside, improving readability — especially when dealing with abbreviations or short region names.

Like the Dorling cartogram, geographic shapes are completely abandoned. Squares are positioned to approximate the original spatial arrangement of regions using a force-directed or optimization algorithm. The result is a map that honestly represents the data while remaining spatially intelligible.

The trade-off is that boundary information is lost. Demers cartograms are not the right choice when adjacency or contiguity matters for the analysis — for example, when reasoning about pollution drift, disease spread, or transit corridors. They are at their best when the question is “which region has more of this thing?” and the chart needs to make every region, even the small ones, visible.

Origin: The Demers cartogram is the square-glyph variant of Daniel Dorling’s 1996 circle-based cartogram, named for cartographer Sandra Demers and prioritizing label readability and tighter packing through axis-aligned squares.

// 03 — When to use

When a Demers cartogram is the right call

Reach for a Demers cartogram whenever the question is about a quantitative variable distributed across regions, and you need every region — even the small ones — to remain visible and labelable.

✓Use a Demers cartogram when…
  • You want the benefits of a Dorling cartogram but need better label readability
  • Text labels (abbreviations, short names) need to fit cleanly inside each region
  • You have many small regions that would pack poorly as circles
  • You want to encode a second variable through color on each square
  • The data has large variation and you need honest size comparisons on a map
  • Your audience is comfortable with stylized maps that sacrifice boundary shapes
  • Election or census reporting where every state must be equally findable

// 04 — When not to use

When a Demers cartogram is the wrong call

The chart drops geographic shape information. Outside questions where size dominates and shape is incidental, simpler maps almost always communicate better.

×Avoid a Demers cartogram when…
  • Precise geographic shapes or boundaries matter for the analysis
  • Your audience won’t recognize the regions from approximate positions alone
  • You have hundreds of regions — the layout becomes cluttered and hard to read
  • Spatial patterns like adjacency and contiguity are critical
  • A simple choropleth map or bar chart communicates the data more directly
  • All data values are nearly equal — all squares will appear the same size
  • The data spans many orders of magnitude and the smallest squares will disappear

// 05 — Data requirements

What your data needs to look like

Before building the chart, your dataset needs to fit a specific shape. Use this checklist to confirm yours does.

Shape

One row per region with a region identifier, a positive numeric value, and either a polygon or a centroid in an equal-area coordinate system.

Minimum rows

10 regions. Below that, a labeled bar chart usually communicates the same comparison more directly.

Maximum rows

~50 regions for a comfortable layout. Beyond ~80 the smallest squares become unreadable and the packing visually breaks down.

Required fields
regionrequired
string / id

The region’s name or code (FIPS, ISO-3166, postal code). Used to position the square at the region’s geographic centroid and to label the square.

valuerequired
number (positive)

The quantitative variable that drives square size. Population, GDP, electoral votes, case counts — anything additive across regions. Square area is proportional to this value.

color_value
number / category (optional)

An optional second variable encoded by fill color: growth rate, political alignment, income bracket, or any categorical class.

geometryrequired
polygon / point

Either the region’s polygon (whose centroid will be computed) or a precomputed centroid. Required to seed the square’s position before packing.

Example data
regionvaluecolor_value
DE4500growth
UK3300growth
FR3100stable
IT2300stable
ES1700growth
NL1100growth

Tip: always reproject to an equal-area projection (Albers, Lambert, EPSG:3035 for Europe) before sizing squares. Web Mercator distorts area dramatically at high latitudes and will produce a cartogram that lies about the data.

// 06 — Anatomy

Parts of a Demers cartogram

Five elements make up every Demers cartogram: the squares (glyphs), their area encoding, inside-square labels, geographic position, and the packing layout.

DEUKNLFRBEABCDE
A — Square (glyph): Each square represents a geographic region, replacing its actual boundaries
B — Square area: The area encodes the data value — larger squares indicate higher values
C — Label: Region name or code placed inside the square, made easier by flat edges
D — Position: Squares are arranged to approximate the geographic layout of the original regions
E — Packing: Squares tile together more efficiently than circles, minimizing wasted space

// 07 — Step-by-step

Step-by-step: how to build a good Demers cartogram

Eight steps that work regardless of tool. The equal-area projection and the area-not-side scaling are the two non-obvious moves; the rest is mechanical once the data is in shape.

  1. 1

    Reproject to an equal-area projection

    Square areas only mean what you think they mean if the underlying coordinate system is equal-area. Use Albers, Lambert, or another equal-area projection appropriate for your region before computing side lengths.
  2. 2

    Compute side lengths from area

    Set side = k · √value so that area scales linearly with value. Pick k so the largest square comfortably fits the canvas without overflowing.
  3. 3

    Seed squares at region centroids

    Initialize each square centered on its region’s geographic centroid. The packing step will only move squares as far as it must to remove overlaps.
  4. 4

    Pack with axis-aligned collision

    Run a force simulation (or grid-snapping optimizer) where squares repel along the x and y axes only, never rotating. The result is a tight, axis-aligned mosaic.
  5. 5

    Pin or constrain critical anchors

    If specific regions must remain in fixed positions (capitals, recognizable landmarks), pin them and let the rest pack around them. This preserves geographic legibility.
  6. 6

    Choose a label strategy

    Inside-square abbreviations are the Demers superpower — use them whenever the largest squares can hold 2–3 characters at readable font size. Fall back to leader lines for the smallest squares.
  7. 7

    Add a size legend

    Two or three reference squares with values (e.g., 1M, 10M, 100M) sit in the corner. Without them readers can only compare squares to each other, not back to absolute values.
  8. 8

    Title the takeaway

    Replace “Demers cartogram of population” with “Tokyo dwarfs every other Japanese prefecture: 14M residents vs the next largest at 9M.” Let the title state the conclusion.

// 08 — Real-world examples

Where you’ll see Demers cartograms used

Election graphics, public health dashboards, and global economic comparisons are the headline use cases. Anywhere a small region risks vanishing on a choropleth, a Demers cartogram makes it visible.

01

U.S. presidential election results

News organizations frequently use Demers cartograms to show electoral college votes, where each state’s square is sized by its number of electors and colored by party. Tiny states like Rhode Island remain visible alongside Texas and California.

Politics
02

Global economic comparisons

Economists use Demers cartograms to compare GDP, trade volume, or debt levels across countries, ensuring small but wealthy nations like Singapore or Switzerland are not visually swamped by physically large but lower-GDP countries.

Economics
03

Public health surveillance

Disease surveillance dashboards use square cartograms to show case counts or vaccination rates by region, with the square format making state labels easy to read at a glance during press briefings.

Public health
04

Educational attainment by district

Education researchers use Demers cartograms to show enrollment, graduation rates, or per-pupil funding across school districts, where district sizes vary dramatically and small urban districts must remain visible alongside large rural ones.

Education

// 09 — Variations

Variants of the Demers cartogram

The basic chart sits within a family of square-based and proportional-symbol cartograms with distinct trade-offs.

Standard Demers

Non-overlapping squares positioned to approximate geography. Great label readability and efficient packing.

Color-encoded Demers

Adds a second variable through square fill: population sized by area, growth rate or party encoded by color. Two channels, one chart.

Tile grid map

Equal-sized squares in a strict grid layout. Removes size encoding entirely and gives every region equal visual weight.

Hexagonal Demers

Substitutes regular hexagons for squares. Packs even more tightly than squares but trades flat edges for slightly harder labeling.

// 10 — Comparisons

How it compares

Demers cartograms sit at the intersection of proportional-symbol maps and traditional choropleth maps. The most useful comparisons are with their immediate sibling Dorling, with the choropleth they replace, and with contiguous cartograms that take a different geometric trade-off.

Demers cartogram vs Dorling cartogram

Demers and Dorling are siblings: both abandon real geographic shapes and pack proportional symbols. Demers uses squares for tighter packing and better label fit; Dorling uses circles for visual softness and slightly fewer overlap headaches.

Demers cartogram

Non-overlapping squares positioned to approximate geography. Better label readability and tighter packing.

  • Squares pack tightly with flat edges
  • Labels fit naturally inside
  • Slightly more rigid visual style

Dorling cartogram

Non-overlapping circles positioned to approximate geography. Softer aesthetic, slightly less efficient packing.

  • Circles waste space between shapes
  • Labels harder to fit inside
  • Friendlier visual feel

Demers cartogram vs choropleth map

A choropleth keeps real boundaries and encodes data with color. A Demers cartogram throws away boundaries and encodes data with square area. The cartogram corrects the small-state-invisibility problem at the cost of geographic fidelity.

Demers cartogram

Square area encodes the data. Tiny but high-value regions become visible; geographic shapes are abandoned.

  • Area ∝ value (honest size)
  • Small regions stay visible
  • Loses geographic shape

Choropleth map

Real boundaries preserved; color encodes the data. Geographic context retained but small regions can disappear.

  • Real shapes preserved
  • Color encodes value
  • Small regions visually dominated by large neighbors

Demers cartogram vs contiguous cartogram

A contiguous cartogram (e.g., Gastner-Newman diffusion) distorts boundaries so each region’s area equals its data value, while keeping all regions touching. A Demers cartogram drops the contiguity constraint, replacing each region with a tidy non-overlapping square.

Demers cartogram

Non-contiguous: each region becomes a square, regions don’t touch.

  • Squares, not boundaries
  • Regions float apart
  • Easy to read and label

Contiguous cartogram

Boundaries deformed so areas match data; regions remain connected.

  • Real boundaries deformed
  • All regions touch
  • Distorted shapes can be unfamiliar

// 11 — Common mistakes

Common Demers cartogram mistakes

The chart’s simplicity is deceptive. Most failures come from getting the area scaling wrong, drifting too far from geography, or forgetting the size legend.

Scaling by side length instead of area

If you double the side length for double the data value, the square’s area quadruples. Always scale by area: side length ∝ √value.

Squares drifting too far from geography

The whole point of a cartogram is spatial context. If squares are placed randomly, it becomes a tree map, not a cartogram. Constrain positions carefully with strong gravity to centroids.

Overlapping squares

Unlike circles, squares with different sizes can produce visual overlap if the layout algorithm isn’t handling axis-aligned constraints. Always validate the output and run extra packing iterations if necessary.

Missing size legend

Without reference squares showing what area equals what value, readers can only make relative comparisons, not absolute judgments. Two or three reference squares in the corner solve this.

Too many regions without grouping

With hundreds of tiny squares, the map becomes unreadable noise. Aggregate smaller regions or use a different approach — a faceted bar chart often communicates the same data more clearly.

Using a non-equal-area projection

If the projection underneath distorts area, the cartogram lies about the data. Always reproject to an equal-area CRS before sizing squares.

// 12 — Accessibility

Accessibility checklist

Run through this list before publishing. The chart should still communicate its message to readers using assistive technology, color-blind users, keyboard navigation, and reduced-motion settings.

  • ✓

    Color contrast for squares and labels

    WCAG 1.4.3
    Square fills should reach 3:1 contrast against the canvas; labels inside squares should reach 4.5:1 against their square fill so they remain legible at thumbnail size.
  • ✓

    Don’t encode meaning by color alone

    WCAG 1.4.1
    If color encodes a second variable (party, growth rate), pair it with a textual annotation, hatching pattern, or icon so color-vision-deficient readers can still distinguish categories.
  • ✓

    Provide a meaningful text alternative

    WCAG 1.1.1
    An accessible name should describe the takeaway: “Demers cartogram of European countries by GDP — Germany, the UK, and France dominate as the three largest squares.” Avoid generic descriptions like “map of Europe.”
  • ✓

    Expose the underlying data

    WCAG 1.3.1
    Offer a downloadable CSV or HTML data table with one row per region and the encoded value. The cartogram representation is essentially impossible to navigate without sight.
  • ✓

    Label squares explicitly

    WCAG 3.3.2
    Every square needs an accessible label with the region name and the encoded value, either as text inside the square or via aria-label on the SVG element.
  • ✓

    Respect prefers-reduced-motion

    WCAG 2.3.3
    If the cartogram animates the packing simulation, gate the animation behind a prefers-reduced-motion: no-preference media query so motion-sensitive users see the final state directly.
  • ✓

    Resizable and zoomable

    WCAG 1.4.4
    Use a responsive viewBox so the cartogram remains legible at 200% browser zoom. Make sure labels stay legible inside squares at every container width.

// 13 — Best practices

Design and craft tips

A short list of dos and don’ts that consistently separate publication-quality Demers cartograms from the demo-grade ones produced by default in most scripting environments.

✓Do

Always include a size legend

Two or three reference squares anchor every other comparison. Without them the cartogram only supports relative judgments.
×Don’t

Scale by side length instead of area

If side = k · value, doubling the value quadruples the visual area. Always use side = k · √value.
✓Do

Use an equal-area projection

Square area only means what you think it means if the projection underneath preserves area. Web Mercator distorts severely at high latitudes.
×Don’t

Let squares drift far from geography

If a square ends up halfway across the country from its region, the spatial intuition collapses. Constrain with strong gravity to centroids.
✓Do

Pin recognizable anchors

Capital cities, large states, or coastal landmarks anchor the reader’s mental map. Pin the obvious ones and let the rest pack around them.
×Don’t

Use Demers for hundreds of regions

Once the smallest squares shrink below a few pixels, the cartogram becomes noise. Aggregate to fewer regions or pick a different chart.
✓Do

Use color for a second variable

Square area encodes one variable; fill color is the perfect channel for a second. Population sized by area, growth rate colored — a classic combination.
×Don’t

Compare cartograms with different scales

If you show two Demers cartograms side by side (e.g., 2010 vs 2020 population), keep k constant so squares are directly comparable across panels.

// 14 — Alternatives

Related and alternative charts

If a Demers cartogram isn’t quite what you need, these adjacent geospatial charts cover similar ground.

Dorling cartogram

The circle-based sibling — use when labels are less important and you prefer the aesthetic of circular shapes.

Geospatial

Choropleth map

When actual geographic boundaries matter and you want to encode data through color intensity.

Geospatial

Tile grid map

When you want equal-sized tiles for each region, removing size encoding but guaranteeing every region is equally visible.

Geospatial

// 15 — Tool instructions

How to build it in your tool of choice

Recipes for the libraries and GUI tools that ship a Demers (or adaptable non-contiguous) cartogram implementation. The R cartogram package and QGIS Cartogram plugin are the closest things to canonical references.

Python (geopandas + Matplotlib)

Code — ~12 min
  1. 01Install with pip install geopandas matplotlib shapely numpy.
  2. 02Read the regions GeoDataFrame and join the data variable.
  3. 03Reproject to an equal-area CRS (e.g., EPSG:3035 for Europe).
  4. 04Compute side = k * sqrt(value) and seed each square at the region centroid.
  5. 05Run a simple axis-aligned packing loop (or use cartogram_geopandas).
  6. 06Render with matplotlib.patches.Rectangle and add labels with ax.text() centered on each square.

geopandas + Matplotlib gives you full control over the packing and labeling. For a one-liner alternative, the cartogram_geopandas package implements both Dorling and Demers variants.

R (cartogram + tmap)

Code — ~10 min
  1. 01Install with install.packages(c('sf', 'cartogram', 'tmap')).
  2. 02Read polygons with st_read() and join the data variable.
  3. 03Reproject with st_transform() to an equal-area projection.
  4. 04Use cartogram_ncont() for a non-contiguous cartogram, then convert each circle to an axis-aligned square at the centroid.
  5. 05Pipe to tm_shape() + tm_polygons() in tmap for fill aesthetics.
  6. 06Add tm_text() for inside-square labels and tm_layout() for legend placement.

The cartogram package is the de-facto R reference. Its non-contiguous mode plus a small custom transform gives the Demers square layout cleanly.

JavaScript (D3)

Code — ~15 min
  1. 01Install with npm i d3 d3-geo or include via CDN.
  2. 02Project region centroids using a d3-geo equal-area projection (geoAlbers, geoConicEqualArea).
  3. 03Compute side = k * Math.sqrt(value) for each region.
  4. 04Run a d3.forceSimulation with a custom axis-aligned collision force, plus a forceX / forceY toward the projected centroid.
  5. 05Render an SVG <rect> per region with width = height = side, centered on the simulated position.
  6. 06Append <text> elements with text-anchor='middle' for inside-square labels.

D3 has no built-in Demers helper, but the recipe above is short. Observable’s notebooks have several published examples to crib from.

Observable Plot

Notebook — ~6 min
  1. 01Open observablehq.com and start a new notebook.
  2. 02Load your data with d3.csv() or a FileAttachment.
  3. 03Project centroids with d3.geoAlbers().fitSize().
  4. 04Use Plot.rect() with custom x, y, width, height channels driven by a tiny packing pre-computation.
  5. 05Add Plot.text() for labels with text-anchor='middle'.
  6. 06Style with Plot’s tickFormat and color schemes for the size legend.

Plot doesn’t ship a cartogram mark, but rect() + a small packing pass is enough. Reuse one of the Observable demers cartogram notebooks as a starting point.

QGIS

GUI — ~10 min
  1. 01Open QGIS and load your regions vector layer plus the joined data variable.
  2. 02Reproject to an equal-area CRS via Layer Properties → Source.
  3. 03Run the ‘Cartogram’ plugin (install from the plugin manager) and choose the non-contiguous variant.
  4. 04Pick the data attribute that drives square size and run the algorithm.
  5. 05Style the result with axis-aligned square markers in the Symbology panel.
  6. 06Add a size legend with two reference squares using a Print Layout legend item.

QGIS is the strongest no-code option. The Cartogram plugin focuses on contiguous and Dorling layouts but its non-contiguous mode pairs naturally with a square symbology.

// 16 — Code examples

Working code in the most common stacks

Three runnable snippets that produce equivalent Demers cartograms in Python, R, and JavaScript. Each does the equal-area projection, the sqrt-of-value sizing, and a simple axis-aligned packing pass.

demers.py
import geopandas as gpd
import matplotlib.pyplot as plt
import matplotlib.patches as mpatches
import numpy as np

# regions: GeoDataFrame with 'name' and 'value' (e.g. population) columns,
# and a polygon 'geometry' column in an equal-area CRS.
regions = gpd.read_file("europe.geojson").to_crs("EPSG:3035")

# 1. Compute centroids and side lengths (area proportional to value)
regions["cx"] = regions.geometry.centroid.x
regions["cy"] = regions.geometry.centroid.y
k = 0.6e3                                            # tune so largest fits canvas
regions["side"] = k * np.sqrt(regions["value"])

# 2. Trivial packing pass: nudge along x then y while overlap exists.
def overlap(a, b):
    return (
        abs(a["cx"] - b["cx"]) * 2 < (a["side"] + b["side"]) and
        abs(a["cy"] - b["cy"]) * 2 < (a["side"] + b["side"])
    )

for _ in range(200):
    moved = False
    for i, a in regions.iterrows():
        for j, b in regions.iterrows():
            if i >= j or not overlap(a, b):
                continue
            dx = b["cx"] - a["cx"]
            dy = b["cy"] - a["cy"]
            if abs(dx) > abs(dy):
                shift = (a["side"] + b["side"]) / 2 - abs(dx)
                regions.at[j, "cx"] += np.sign(dx) * shift / 2
                regions.at[i, "cx"] -= np.sign(dx) * shift / 2
            else:
                shift = (a["side"] + b["side"]) / 2 - abs(dy)
                regions.at[j, "cy"] += np.sign(dy) * shift / 2
                regions.at[i, "cy"] -= np.sign(dy) * shift / 2
            moved = True
    if not moved:
        break

# 3. Render
fig, ax = plt.subplots(figsize=(9, 8))
for _, r in regions.iterrows():
    rect = mpatches.Rectangle(
        (r["cx"] - r["side"] / 2, r["cy"] - r["side"] / 2),
        r["side"], r["side"],
        facecolor="#c94a2e", edgecolor="white", lw=1.2,
    )
    ax.add_patch(rect)
    ax.text(r["cx"], r["cy"], r["name"], ha="center", va="center",
            color="white", fontsize=9, fontfamily="DM Mono")

ax.set_aspect("equal"); ax.autoscale_view(); ax.set_axis_off()
ax.set_title("European GDP — Demers cartogram (area ∝ GDP)", loc="left")
plt.tight_layout()
plt.savefig("demers.png", dpi=200, bbox_inches="tight")
plt.show()
$ python demers.py

// 17 — FAQs

Frequently asked questions

What is a Demers cartogram?+

A Demers cartogram is a variation of the Dorling cartogram that replaces geographic regions with non-overlapping squares instead of circles. Each square’s area is proportional to a data variable such as population, GDP, or electoral votes.

When should you use a Demers cartogram?+

Use a Demers cartogram when you want the benefits of a Dorling cartogram but need better label readability. It also works well when text labels (abbreviations, short names) need to fit cleanly inside each region, and when you have many small regions that would pack poorly as circles.

When should you avoid a Demers cartogram?+

Avoid a Demers cartogram when precise geographic shapes or boundaries matter for the analysis. It is also a poor fit when your audience won’t recognize the regions from approximate positions alone, or when you have hundreds of regions — the layout becomes cluttered and hard to read.

How is a Demers cartogram different from a Dorling cartogram?+

Both are non-contiguous cartograms that abandon real geographic shapes and pack proportional symbols on the map. Dorling uses circles; Demers uses squares. Squares pack more tightly with less wasted space and offer flat edges that fit short labels more cleanly, at the cost of a slightly more rigid visual style.

How do you scale the squares correctly?+

Always scale the side length so that area is proportional to value: side = k · √value. Doubling the side length quadruples the area, which would dramatically overstate the data. Most cartogram libraries handle this automatically; raw plotting code rarely does.

Is a Demers cartogram suitable for dashboards?+

Yes — a Demers cartogram can work well in dashboards as long as the panel is large enough for readers to perceive the encoded values, has a clear title, and includes the legend or axis labels needed to interpret it.

What category of chart is a Demers cartogram?+

Demers Cartogram belongs to the Geospatial family of charts. Charts in that family are designed to answer the same kind of question — how a quantitative variable is distributed across geography — so they often work as alternatives when one doesn’t quite fit your data.

How do you read a Demers cartogram?+

Start with the title and legend, then orient yourself geographically by recognizing approximate region positions. Compare square sizes (which encode the data value) and read the labels inside each square. Check whether color encodes a second variable such as growth rate or political alignment.

What’s the best library for building Demers cartograms?+

For Python, the geopandas + cartogram_geopandas combination is the most flexible, and matplotlib renders the squares directly. For R, the cartogram package and tmap together produce publication-quality output. For the web, D3’s force simulation with axis-aligned constraints is the standard recipe.

// 18 — References

References and further reading

Primary sources, official library documentation, and accessibility guidance cited throughout this guide.

← Previous: Dorling cartogram
Next: Non-contiguous cartogram →