Dataviz Handbook
An opinionated field guide for designing honest, clear, and accessible charts — the editorial principles behind Blueprint Chart, distilled into a working reference.
This handbook is not API documentation. It is the editorial point of view that shapes every default in Blueprint Chart: what to draw, what to strip, what to highlight, and what to refuse.
What you'll find here
The handbook reflects how we think charts should be built for journalism, research, and any context where the reader's understanding matters more than the author's flourish.
- Decision frameworks for picking the right chart type before you sketch a single axis.
- Visual rules for axes, grid lines, color, typography, labels, and annotations.
- A catalog of anti-patterns — what to avoid and why.
- Accessibility guidance that treats CVD support, contrast, and keyboard reach as baseline, not bonus.
The shape of a good chart
Every page in this handbook orbits the same set of principles:
- Purposefulness — every visual element earns its place.
- Data-ink ratio — maximize pixels devoted to data; whisper everything else.
- Start with grey — color becomes meaningful only when grey is the default.
- Comparisons make the story — data in isolation has no meaning.
- No 3D, ever — tilted surfaces lie.
If you read only one page, read Design Principles. Everything else is the application of those rules to a specific surface of the chart.
One chart that uses every principle
chart line {
title = "2024 was the hottest year on record"
description = "Deviation from the 1951–1980 average, in °C"
source = "NASA GISS"
colors = "#e15759"
interpolation = "monotoneX"
showVerticalAxis = false
verticalGridStyle = "dashed"
horizontalGridStyle = "none"
lineSymbols = true
lineSymbolShowOn = "firstLast"
data {
"1980" = 0.26
"2000" = 0.42
"2015" = 0.9
"2024" = 1.29
}
annotation "2015" {
text = "2015 Paris Agreement to limit global warming to 1.5°C"
showLine = true
lineStyle = curve-right
showArrow = true
}
}From packages/lib/src/samples/temperature-anomaly.bpc
A takeaway title states the insight; a single red hue carries meaning; gridlines whisper; an annotation points the reader at the moment that matters. Each principle on every page traces back to a chart like this one.
Where to start
| If you want to... | Read |
|---|---|
| Decide which chart fits your data | Choosing the Right Chart |
| Internalize the foundations | Design Principles |
| Avoid the most common mistakes | Anti-Patterns |
| Structure the chart frame | Frame Elements |
| Type for legibility | Typography |
| Pick safe, meaningful color | Color & Palettes |
| Tame axes and grids | Axes & Grid Lines |
| Label directly | Labels & Legends |
| Tell the story with annotations | Annotations |
| Design interaction honestly | Tooltips & Interaction |
| Make charts accessible to everyone | Accessibility |
How this connects to Blueprint Chart
Blueprint Chart is the tool we built to make these principles the path of least resistance: grey defaults, baseline-zero where it matters, CVD-aware palettes, direct labeling, and a frame model that mirrors the hierarchy described here. The handbook is editorial; the Guide, DSL Spec, and API Reference are how you put it into practice.