Design Principles
Data visualization standards after Edward Tufte. Every chart, dashboard, pipeline indicator, and data display across the Mostly platform follows these six principles.
01 Brutal Simplicity of Thought and Clarity of Data
The Visual Display of Quantitative Information, 1983
“Above all else, show the data.”
Every element must serve the data. If it doesn’t encode information, it is chartjunk — remove it. Clarity comes from elimination, not addition.
Do: Let data speak without decoration. Use white space as structure. Remove until nothing remains but data.
Don’t: 3D effects, shadows, bevels. Decorative gridlines or borders. Gradient fills, ornamental icons.
02 Charting Change Across Multiple Variables
The Visual Display of Quantitative Information, 1983
“The best graphics show causality, mechanism, and explanation.”
The most powerful visualizations integrate multiple variables into one coherent view. Minard’s 1869 map encodes six variables in a single image with no legend.
Encoding toolkit for Mostly:
- Position (x/y) for two variables
- Color for a third (branch, status)
- Size for a fourth (invoice amount)
- Shape for a fifth (account type)
- Border for a sixth (guardrail, RFI flag)
03 Small Multiples
Envisioning Information, 1990
“At the heart of quantitative reasoning is a single question: Compared to what?”
Identical charts, each showing different data slices, arranged in a grid with identical scales, axes, and sizes. The viewer learns one visual pattern and applies it across all panels.
Mostly applications: Revenue by branch (5 identical line charts), project status distribution by branch, RFI aging by month, cert processing time by certifier.
04 Sparklines — Datawords
Beautiful Evidence, 2006
“Small, intense, simple, word-sized graphics with typographic resolution.”
Graphics as ubiquitous as text. No frames, axes, or tic marks — just the data trace, roughly 2cm wide, embedded inline. Data-ink ratio = 1.0.
Types: line (trend), bar (magnitude), win/loss (binary), dot plot (distribution).
Mostly applications: Payment progress sparkline per invoice row, stage-progress dots per project row, RFI response time per scheduler, daily inspection count in the Dashboard morning briefing.
05 Escaping Flatland
Envisioning Information, 1990
“Even though we navigate daily through a perceptual world of three spatial dimensions and reason occasionally about higher dimensional arenas with mathematical ease, the world portrayed on our information displays is caught up in the two-dimensionality of the endless flatlands of paper and video screen.”
Use layering, hierarchy, and depth cues (borders, shadows at 1px, background tints) to separate information planes without adding chartjunk.
Mostly approach: Pipeline indicators use dot size + fill + ring animation to encode three dimensions. Calendar events use position + color bar + status stripe + RFI dot to encode four dimensions. friday-ai charts render with background grid at 0.1 opacity.
06 The Data-Ink Ratio
The Visual Display of Quantitative Information, 1983
“A large share of ink on a graphic should present data-information, the ink changing as the data change.”
Data-ink ratio = data-ink / total ink. Maximize this ratio. Every non-data pixel is a candidate for removal.
Mostly rules:
- No container borders on charts (data defines the boundary)
- Axis labels only when ambiguous
- Grid lines at 0.1 opacity maximum
- Legend only when color meaning is not obvious from context
- No chart titles when the section heading already states what the chart shows
Pre-Ship Checklist
Before deploying any data visualization:
- Can I remove anything without losing information?
- Does every color encode data (not aesthetics)?
- Are scales identical across small multiples?
- Could a sparkline replace a full chart?
- Is the data-ink ratio above 0.8?
- Would Tufte approve?