A Proportional Area Chart encodes quantitative values as the area of geometric shapes — most commonly circles, but any closed shape works. The perceptual mechanism is area estimation: the eye reads the space inside the shape and compares it across items. Area estimation is less precise than position on a common axis (the bar chart's mechanism), which makes proportional area charts better suited to presentational contexts — conveying the scale of differences at a glance — than to analytical ones, where readers need to extract specific values. Value labels inside or beside circles are required; the chart alone cannot support accurate reading.
The data spans 43:1 from the largest to the smallest value ($8,420M to $195M). A bar chart would render this honestly but the smallest bars would be barely visible without a log scale, which introduces its own perceptual problems. A proportional area chart handles extreme ratios naturally: the eye tolerates wide size variation between circles and still perceives the relative scale. The circular form also avoids implying a ranking or sequence — these are independent regions, not ordered categories. The packed layout groups them naturally without imposing a spatial hierarchy that doesn't exist in the data.
If you set radius ∝ value instead of area ∝ value, area grows as value². North America ($8,420M) is 43× larger than Oceania ($195M). With correct area encoding: visually 43× larger area. With radius encoding: visually 1,849× larger area. The error amplifies differences by a factor equal to the value ratio. Hit the radius error toggle on slide 1 and watch the small circles become nearly invisible.
D3's fix: use d3.scaleSqrt() or pass the raw value to
hierarchy.sum() and let d3.pack() compute
r = sqrt(value) internally. Never map value directly to radius.
FT Visual Vocabulary: Magnitude — Size comparison. Abela quadrant: Comparison — comparing the relative magnitude of items without a continuous axis. Tufte: proportional area charts sacrifice data-ink ratio precision for gestalt comprehension; acceptable only when the scale of difference is the message, not the precise values.
The one decision worth knowing: circle color uses the same sequential scale as the size (darker = larger value). This is double encoding — both area and colour encode the same variable. That's usually redundant and inefficient; here it is deliberate. Double encoding reinforces the size hierarchy for viewers who find area estimation difficult, and it makes the smallest circles (which are almost invisible by area) still perceptible by hue contrast.