ClassLink · Frost · Guiding principles
Edward Tufte is a statistician and professor emeritus at Yale. His work on data visualization asks for maximum clarity, truthfulness and efficiency, with no visual distractions between people and the data.
01 · Core concepts
Each idea, in a line, and where you can see it in our sketches.
Spend as much ink, or as many pixels, as you can on the data itself, and erase what is not data or is said twice.
In this project. Columns go light, the peak goes dark, and gridlines and legends go away. Lollipops and pencils say the same with less.
Remove heavy gridlines, 3D effects and "ducks": decoration that gets in the way of reading.
In this project. No donuts, pies or rings. Where we add delight, such as imagery or motion, it never carries the data.
See: Gauges E · Health tiles with imagery · Gauges C · One bar
The size of the effect shown in the picture should match the size of the effect in the data. Aim for a ratio of 1.
In this project. Length or area is always proportional to the value. Unit charts let you count, so a share is something you can see.
See: Gauges B · A hundred students · Bars G · One hundred squares
Say a lot in a small space with small multiples and sparklines, so the eye compares instead of searching.
In this project. KPI cards carry their own trend. Whole pages are built from repeated panels with one frame and one scale.
See: Dashboards B · Small multiples · Heroes A · Sparklines · Lines F · Month tiles
02 · Graphical integrity
A graphic should never make the data look more, less or different than it is.
What you measure on the page matches the number it stands for.
In this project. Bars start at zero, bubbles are sized by area, and counts are drawn as countable marks.
See: Heroes E · Bubbles · Bars A
Write the explanation on the graph and label the events that matter.
In this project. Direct labels sit on the marks, and the peak and the latest value are named. No legend hunting.
See: Lines A · Direct labels · Gauges C
Keep scales and styling steady, so a change on the page is a change in the data.
In this project. Small multiples share one frame and one scale, and one blue ramp stays one meaning across charts.
See: Bars B · Same scale · Dashboards B
Compare like with like: the same window and the same unit throughout.
In this project. Each chart uses one time window and one unit, and charts of the same measure share the window. Money charts will need adjusting for inflation when real data arrives.
See: Dashboards C · Narrative · Lines B
The number of dimensions in the picture should not exceed the dimensions of the data.
In this project. No 3D and no fake depth. Pin size means cost and nothing else, and shade and size are not used for two different things.
Show data against its comparison, and never quote it out of context.
In this project. Change is shown against last month and last year, and each change names what it is compared with.
Back
Learn more at edwardtufte.com.