// Humanitarians AI — Program Performance 01 / 02

Most programs trail their targets —
Community Trust is the lone outlier

Poor
Satisfactory
Good
Actual
Target
Humanitarian Program Performance — Bullet Graph Five horizontal bullet graphs comparing actual program performance to targets. Each row shows actual value as a walnut bar, a blood-red target line, and three qualitative range bands behind.
hover / tab to explore

// About this chart type — Bullet Graph

A bullet graph, designed by Stephen Few in 2005, is a compact linear replacement for the dashboard gauges and speedometer dials that were common in early business intelligence tools. Each row packs three comparisons into a single horizontal strip: a featured measure bar (the walnut bar) showing actual performance, a comparative marker (the blood-red line) showing the target, and qualitative range bands (shaded from dark to light) showing what constitutes poor, satisfactory, and good performance. It exploits position along a common axis — the most accurate perceptual channel for quantitative comparison — while radial gauges use angle, which is among the least accurate.

The range bands are intentionally rendered in neutral grays, not red-yellow-green. Using traffic-light hues for the bands would pull the eye to the background and compete with the bar and target line. The walnut bar and blood-red target are the data; the bands are context. Gray keeps the hierarchy honest.

About this example: Five humanitarian program metrics are shown — each with its own scale, target, and qualitative bands. Community Trust is the only metric exceeding its target; hover it to see the surplus. The remaining four programs fall short by varying margins, visible both as the bar falling left of the target line and as the bar sitting in a darker (weaker) range band. The sort toggle reorders rows by actual value, making the performance ranking explicit. All data loads from ./bullet-graph/data.json.

// Learn — Bullet Graph 02 / 02

What this chart is and why it was chosen

What this chart is

The bullet graph, developed by Stephen Few in 2005, is a linear replacement for the radial gauges and speedometer dials that crowded early dashboards. It encodes a primary measure as a bar, layered over qualitative range bands and punctuated by a perpendicular target marker.

The perceptual mechanism it exploits is position along a common axis — the most accurate of all visual encoding channels for quantitative comparison. Radial gauges use angle, which is among the weakest channels. The bullet graph achieves the same task with roughly one-sixth the ink.

Three comparisons in one row

1. Is the actual value in the poor, satisfactory, or good band? 2. Did the actual value reach the target marker? 3. How far into the band did it land — barely satisfactory, or deep into good?

A bar chart answers only the first. A grouped bar chart requires separate colors and a legend with no qualitative context. A gauge cannot show the target as a reference line — it degrades to a secondary number label, stripped of visual meaning.

Why it was chosen here

The data structure is a named set of performance metrics, each with an actual value, a target, and a qualitative interpretation of the range. This is the canonical bullet graph use case: dashboard performance tracking where the viewer needs all three answers simultaneously.

Five bullet graphs in a vertical list share a common axis, enabling direct comparison of performance levels across programs — something five separate gauges cannot provide.

What the alternative would break

A radial gauge encodes value as angle — the perceptually imprecise encoding channel. Five gauges consume five times the screen area and provide no shared reference axis for cross-metric comparison. The target marker cannot be clearly rendered as a positional reference in a radial design.

A stacked bar would imply that the metrics sum to a meaningful whole — they do not. A grouped bar would require five color-coded series with no qualitative context bands.

The one design decision worth knowing

The range bands are encoded as gray intensities — not distinct hues — following Few's own specification. Using hues (red → yellow → green) for the bands would pull the viewer's eye to the background, inverting the visual hierarchy. The walnut bar and blood-red target line must dominate. The bands should answer only when interrogated. Gray intensities keep them subordinate while still legible as categorical zones.

// Framework Reference

FT Visual Vocabulary category: Magnitude — Ranking (comparing named items against a shared quantitative axis). Tufte's data-ink ratio is the direct ancestor of this chart: every element carries information — ranges, bar, target line. Nothing is decorative. The chart junk eliminated: the speedometer dial, the needle, the decorative arc shading, the redundant numeric callouts.