Data Visualization

A chart is an argument, not decoration. Every visualization you produce must make one point faster than the same numbers in a paragraph would. If it does not, remove it. This document is the ruleset an AI design assistant applies whenever it draws a chart, builds a KPI tile, or lays out a dashboard. Where a dataviz skill is available in the environment, defer to it for palette generation and validation — the rules below are the underlying principles it operationalizes.

Part 1 — Tufte: the structural foundation

Edward Tufte established the measurable grammar of honest, high-density graphics. Treat these as non-negotiable defaults.

Maximize the data-ink ratio

Data-ink is the ink (pixels) that would change if the data changed. Everything else is non-data-ink. Tufte's ratio is data-ink divided by total ink; push it toward 1 by erasing non-data-ink first, then erasing redundant data-ink.

Delete heavy gridlines; if you keep any, make them faint (a light gray, low opacity) so

they recede behind the marks.

Remove chart borders, boxes, and background fills.
Drop tick marks that duplicate a label already present.
Do not outline bars or add drop shadows. A filled bar needs no stroke.
Direct-label lines and bars at their end instead of drawing a heavy axis and a legend.

Caveat: data-ink minimization is a heuristic, not a religion. A little redundant ink (a value label, a reference line) that speeds comprehension is worth its cost. Never strip a chart so bare that it becomes a puzzle.

Eliminate chartjunk

Chartjunk is Tufte's term for graphical elements that carry no information or actively obscure it: moiré vibration patterns, gratuitous 3-D extrusion, decorative clip-art, faux textures, and "ducks" (charts styled into pictures). Rules:

Never render a chart in 3-D. 3-D distorts area and hides marks behind other marks.
No gradients, bevels, or glows on bars, slices, or points.
No background images behind plotted data.
Color and shape must encode data, never mood.

Small multiples

When you must compare many series or many categories, do not overplot them onto one busy chart. Repeat a small, identical chart once per category in a grid — same axes, same scale, same encoding. The reader learns the shape once, then scans. Small multiples beat a single crowded chart and beat animation for comparison, because everything is visible at once.

Keep every panel on an identical scale; a shared scale is what makes them comparable.
Sort panels by a meaningful order (magnitude, geography, time), never alphabetically by

default.

Keep each panel small; the power is in the array, not the individual.

Graphical integrity and the lie factor

The lie factor is the size of the effect shown in the graphic divided by the size of the effect in the data. Honest graphics sit at 1.0.

Bar and column charts must start their value axis at zero. Truncating a bar axis inflates

differences — a classic lie-factor violation.

Line charts may use a non-zero baseline because they encode change via slope, not area —

but label the axis clearly and never imply a false floor.

Keep area proportional to value. Never scale an icon or bubble by its height when the eye

reads its area (that squares the distortion).

One axis, one scale. No dual y-axes unless unavoidable, and if used, make the pairing

explicit — dual axes let you manufacture almost any correlation.

Sparklines

A sparkline is a word-sized, axis-free line or bar chart embedded inline in text, a table cell, or a KPI tile. Use them to show trend and variation next to the current value without spending layout space. Show the latest point (a dot) and optionally a shaded normal band. They are ideal in dense tables and metric rows.

Part 2 — Knaflic: the storytelling layer

Tufte makes a chart honest and dense. Cole Nussbaumer Knaflic's Storytelling with Data makes it land with a business audience. Apply this layer on top of Tufte.

Declutter relentlessly

Every element added to a view spends the audience's cognitive load. Before shipping a chart, remove: chart borders, gridlines, redundant axis labels, data markers you do not need, legends you can replace with direct labels, and background shading. Ask of each pixel: "does removing this lose information?" If not, remove it.

Focus attention with preattentive attributes

The eye processes certain properties — color, size, position, intensity, orientation, enclosure — before conscious attention. Use them deliberately to point at the one thing that matters:

Gray everything, then color the single series or bar the story is about. One accent color

against neutral gray is the single most powerful move in business dataviz.

Use bold weight or larger size on the number the audience should remember.
Reserve red and green for genuinely good/bad semantics, and never rely on them alone (see

accessibility below).

Do not use color decoratively. If more than one hue is "important," nothing is.

Annotate the insight

A chart titled "Revenue by Quarter" makes the reader do the work. Instead, write the takeaway as the title: "Revenue fell 12% after the Q3 price change." Add a short annotation directly on the relevant point or region. The words carry the conclusion; the chart is the evidence. State the "so what" in the title; support it in the marks.

Charts to avoid

Pie and donut charts. The eye compares angles and arc areas poorly. Anything beyond

2–3 slices is unreadable, and you cannot rank slices reliably. Use a bar chart instead; if part-to-whole is truly the point and slices are few, a single stacked bar or a labeled bar chart still beats a pie.

3-D anything. Covered above — it distorts and occludes.
Secondary y-axes, dense legends the reader must ping-pong to, and rainbow categorical

palettes where every category screams.

Part 3 — Which chart, when

Choose the chart from the question being asked, not from novelty. The decision guide:

Categorical comparison (which is biggest?) → horizontal bar chart, sorted by value.

Horizontal bars fit long labels and rank cleanly. Start the axis at zero.

Trend over time → line chart. For comparing the change between exactly two time points

across many categories, use a slope chart. Time goes on the x-axis, left to right.

Correlation / relationship between two measures → scatter plot. Add a trend line only

when a relationship genuinely exists; note that correlation is not causation in the copy.

Part-to-whole → stacked bar for a few components, but only when the total matters and

components are few. Beyond ~4 segments, switch to small multiples or a plain sorted bar.

100% stacked bar → use for composition share across categories, but warn: only the

bottom segment shares a common baseline, so middle segments are hard to compare precisely. Prefer it for "share of total" framing, not exact reads.

Single number / KPI → a large-type stat tile with the value, a short label, and a

comparison (vs. prior period or target). Optionally a sparkline. Use when one number is the whole story.

Distribution → histogram or box plot; for a single distribution a histogram, for

comparing several a set of box plots or a strip/beeswarm.

Exact values matter, or the data is sparse and mixed → a table. When the reader needs

to look up a precise figure or the dataset is small and heterogeneous, a well-formatted table beats any chart. Right-align numbers, use tabular figures, and consider embedded sparklines or tiny bars in cells.

Rule of thumb: if you cannot name the single question the chart answers, you have not earned the chart yet.

Part 4 — Dashboard design

A dashboard is not a chart dump. It is a designed reading order.

Inverted-pyramid layout

Lead with the conclusion, then supporting detail, then granular breakdowns. The most important metric goes top-left, because left-to-right, top-to-bottom is the default scan path in LTR locales (mirror for RTL). A viewer should get the headline in the first two seconds without scrolling.

Limit the tile count

Cap a single view at roughly 5–7 tiles. Beyond that, the viewer satisfices and ignores the rest. If you have more to show, split into tabbed or linked views by audience or by question, not one infinite wall. Resist dashboard sprawl — a dashboard that answers every possible question answers no question well.

Consistent encoding across the whole dashboard

One metric, one color, everywhere. If "revenue" is teal in the top chart, it is teal in

every chart. Inconsistent color encoding is the most common dashboard defect.

Consistent number formats, date formats, and axis conventions across tiles.
Align tiles to a grid; ragged edges read as broken.
Group related tiles with whitespace and shared headers, not boxes and borders.

Design the empty and loading states

Every tile needs a defined zero-data, loading, and error state. A blank tile looks broken; show a skeleton while loading and an explicit "no data for this range" message otherwise.

Part 5 — Accessible charts

A chart that only works for full-color vision is a broken chart.

Do not rely on color alone. Roughly 1 in 12 men has a color-vision deficiency.

Redundantly encode with position, shape, direct labels, or texture so the chart still reads in grayscale.

Use colorblind-safe palettes. Prefer palettes validated for deuteranopia/protanopia

(for example Okabe-Ito for categorical data, or ColorBrewer sequential/diverging ramps). Avoid the red/green pairing as the only distinction. Run the palette through a colorblind simulator before shipping.

Direct-label over legends. A legend forces the eye to leave the data, memorize a

color, and come back. Label lines at their end and segments in place wherever room allows. Reserve legends for when direct labeling truly will not fit.

Contrast. Marks and text must meet contrast minimums against the background; faint gray

data on white fails for low-vision users. Axis text should meet normal text contrast.

Provide a text alternative. Charts need a concise alt text or an adjacent data table so

screen-reader users get the same conclusion.

Do not encode meaning in hue alone for status (good/bad); pair with an icon or word.

Part 6 — Number formatting

Numbers in charts and tables are typography. Format them like a designer.

Tabular figures. Use font-variant-numeric: tabular-nums (or a font's tabular

figures) for any column or animated counter of numbers so digits align vertically and do not jitter. Proportional figures are fine in prose, wrong in tables.

Right-align numeric columns so the ones, tens, and hundreds line up for scanning;

left-align text columns.

Round to a decision-relevant precision. Do not show $1,234,567.89 when the reader needs

"$1.2M." Match precision to the decision, and keep precision consistent within a column.

Abbreviate large numbers (K, M, B) consistently, and show full precision on hover or in

a tooltip when exactness matters.

Always carry units — currency symbols, %, per-unit — either on the axis title or the

first value, not repeated noisily on every gridline.

Show comparison context on KPIs: a bare number is meaningless; pair it with a delta vs.

prior period or target, and color/arrow the delta (redundantly, not by color alone).

Localize separators and currency by locale; 1,000.5 in en-US is 1.000,5 elsewhere.

The one-line test

Before shipping any visualization, state its single takeaway in one sentence. If you cannot, the chart is not done. If you can, put that sentence in the title.