Finance and research lead , humanitarian AI lags in every region Figure 39.1 , Finance and research lead , humanitarian AI lags in every region

A heatmap encodes numeric values as colour across a matrix of two categorical variables. The two axes are independent category sets; every cell at their intersection carries one value, encoded as colour lightness or saturation. The perceptual mechanism is pre-attentive processing , the eye detects clusters of similar colour before any deliberate comparison occurs. Regions of high value and low value, and columns or rows that diverge from the pattern, surface immediately without the viewer needing to read individual numbers.

The data has two categorical dimensions (region and sector) and one numeric measure (index score) , exactly the structure a heatmap is designed to handle. With 8 rows and 7 columns, there are 56 data points. Any alternative that uses position as the primary encoding , grouped bars, small multiples, scatter plots , would require 56 individual reads to see what the heatmap reveals at a glance: the humanitarian column is consistently the dimmest ; the finance and research columns are consistently the darkest; the gradient from top

A grouped bar chart of this data requires either 8 groups of 7 bars or 7 groups of 8 bars , 56 bars in either case. At that density, the chart is illegible without zoom or scrolling, and the cross-dimension pattern (the humanitarian column's consistent underperformance) cannot be seen because bars are grouped by one axis, not both simultaneously. Small multiples would work but require 8 separate charts and active scanning to notice cross-chart patterns.

The one decision worth knowing: the colour scale domain is anchored at 0, not the data minimum (14). Anchoring to the data minimum would compress the scale and make Sub-Saharan Africa's 14-score read as medium . Anchoring to 0 makes it read as genuinely low , which is the true story. Scale anchoring is an editorial decision with real consequences for how viewers interpret gaps.

FT Visual Vocabulary + Tufte FT Visual Vocabulary: Relationship , Distribution across two dimensions . Abela quadrant: Comparison (multiple variables, multiple categories). Tufte: heatmaps achieve high data density per unit of ink , all 56 values occupy the same space a grouped bar chart would need for 8.

Paste this into Claude Code to generate a working version of this chart, plus its data file. The result will not be a perfect replica , the goal is that the reader can run the prompt, get a chart of this type, and read its source. Generate a complete, self-contained heatmap in D3 v7. Two files:

The ideas in this chapter didn't appear from nowhere. Toussaint Loua published the first known heatmap in 1873 , a shaded matrix of Paris neighborhood statistics , a century before computers made the form ubiquitous. The matrix layout he chose is essentially identical to a modern heatmap. Toussaint Loua, circa 1880. AI-generated portrait based on a public domain photograph (Wikimedia Commons).

The ideas in this chapter didn't appear from nowhere. Toussaint Loua published the first known heatmap in 1873 , a shaded matrix of Paris neighborhood statistics , a century before computers made the form ubiquitous. The matrix layout he chose is essentially identical to a modern heatmap. Toussaint Loua, circa 1880. AI-generated portrait based on a public domain photograph (Wikimedia Commons).