Theme 070 · Data storytelling

Hex Tile Cartogram

The election-night hex map, borrowed from newsroom graphics: every region is one equal hexagon, so no big empty area hides a small hot spot. Pulse lights the map up ring by ring, and the anomaly is a coral contagion spreading from one tile after the deploy.

readability ●●●trust ●●○effort med

1 · HOOK0:00–0:08

Hexes drop onto the grid in random order with random colours like a confusing results night; the single coral tile lands last, on the downbeat before the drop.

2 · REVEAL0:08 (drop)

On the drop every tile flips to grey, then teal rings ripple outward from the centre tile, one ring per beat; the Acme mark stamps into the centre hex on beat 1.

3 · PROOF MOMENT0:12–0:32

The map holds calm teal; at 09:42 W2 flips coral on the snare and neighbours tint ring by ring on the next beats while the leader line draws to the legend and the decision strip rises.

4 · CTA0:36–0:45

A small calm hex cluster flips tile by tile back to teal from left to right; the italic line lands on the downbeat and Start free presses on the last bar.

COMPONENT KIT

Hex tile — equal-area region with 4 px paper gutters
Ramp legend — 5-step diverging key, coral ↔ teal, mono end labels
Tile code — short mono code inside the hot tile (W2)
Leader line — ink elbow from the hot tile to the explanation
Ring ripple — colour wave spreading by hex distance
Decision strip — rule, −18%, context and the two actions

MOTION · MUSIC

Tile flip — each hex rotates Y 180° with power2.inOut 0.25 s (8th note at 120 BPM), colour swaps at the midpoint
Ring ripple — rings keyed by hex distance, delay = ring × 0.5 s so each ring hits a beat
Contagion — hot tile flips on the snare, neighbours follow at +0.25 s and +0.5 s with a 1.06 scale pulse, sine.out

WHY / RISK · ADAPT IT

Newsroom hex maps are instantly legible and feel like journalism, which lends authority; the spreading colour makes an anomaly feel urgent. Risk: implying geography where there is none — label tiles honestly.

Adapt to your product: Tile whatever your product has many of (regions, stores, services, customers, devices) into an equal-size hex grid; the anomaly is the tile that flips and starts to spread.

References: blog.apps.npr.org/2015/05/11/hex-tile-maps.html (NPR on why equal hex tiles beat choropleths for quick reads)