Every chart, dashboard, pipeline indicator, and data display across the Mostly platform follows these six principles. They are not independent—they reinforce each other. The goal is always the same: show the data with the least possible interference.
Every element must serve the data. If it doesn't encode information, it is chartjunk—remove it. Clarity comes from elimination, not addition.
The most powerful visualizations integrate multiple variables into one coherent view. Minard's 1869 map of Napoleon's Russian campaign encodes six variables—location, army size, direction, losses, temperature, and time—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).
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. Small multiples make differences and patterns obvious without overloading a single view.
Mostly applications: Revenue by branch (5 identical line charts), project status distribution by branch, RFI aging by month, cert processing time by certifier.
Graphics should be as ubiquitous as text. No frames, axes, or tic marks—just the data trace, roughly 2cm wide, embedded inline with surrounding text, numbers, or table cells. 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-progression sparkline per project, inline trend next to KPI numbers, RFI aging dot-plot per branch.
Represent 3+ dimensions on 2D surfaces without resorting to 3D charts. Tufte explicitly warns against them—3D pie charts distort slice sizes, 3D bar charts create false depth perception. Instead, use 2D encoding strategies.
The encoding toolkit:
| Position (x/y) | Dimensions 1–2 |
| Color | Dimension 3 — categorical grouping (branch, status) |
| Size | Dimension 4 — bubble diameter, line width |
| Shape | Dimension 5 — limit to 4–5 types |
| Texture | Dimension 6 — solid, dashed, dotted |
| Small multiples | Dimension 7+ — panel arrangement itself |
| Connection/flow | Relational — lines encoding relationships |
Data-Ink Ratio = ink devoted to data ÷ total ink. Maximize the proportion representing actual data. Every pixel earns its place or gets cut.
Erasing strategies:
| Gridlines | Remove, or 1px light gray only where axis readings are ambiguous |
| Legends | Label data directly instead of a separate legend box |
| Fills | Flat color or transparent — no gradients, shadows, rounded corners |
| Axis labels | Show 0, 50, 100 — not every increment |
| Pie charts | Replace with horizontal bars |
| Color | Use for data encoding only — never for decoration |
“Within reason” — new audiences may need more annotation. Accessibility may require redundancy (labels + colors for color-blind users).
Tufte gives us the rules. These are the choices that make the work ours—drawn from visualizations we find stunning and want to emulate. Data should feel like a natural material, not a spreadsheet.
Every surface starts warm. #fffff8
is the floor, not #ffffff.
Clinical white creates tension between the eye and the data. Warm off-white lets the ink settle into the page
like letterpress on cotton stock. This applies to every background—dashboards, charts, panels, modals.
Data should have the visual weight of a physical substance—geological strata, flowing rivers, woven threads. Streamgraphs and alluvial diagrams give temporal data a presence that bar charts cannot. When data flows, merges, splits, and fades, the shape is the story.
Warm monochromatic strata—the palette of the earth-tone streamgraph.
Preferred forms: streamgraphs for temporal evolution, alluvial/Sankey for flow between categories, network graphs for relationships that grow over time, bubble timelines for significance + lineage. These forms make data feel alive. Bar charts and tables are not wrong—but when the data has movement, give it a form that moves.
Information density is not clutter. Clutter is decoration without data; density is data without decoration. The network growth chart (1982–2012) is packed with dots and connections—and it is beautiful because every mark encodes a real relationship. The pop/rock genealogy has thousands of labels embedded in flowing streams—and it rewards sustained attention.
Don't simplify by removing data. Simplify by removing everything that isn't data. A dashboard showing 200 projects with pipeline indicators, sparklines, and status dots is not overwhelming if every pixel earns its place.
When data has lineage, ancestry, or progression, show it with connections—not separate tables. Lines between nodes, bands between stages, threads between institutions. The university Sankey combines scatter plots, summary bars, and alluvial flow in one left-to-right reading. Three views, one story, one direction.
Every reference work embeds labels directly in the visualization—genre names inside the stream, institution names at the end of the flow, year labels along the axis without a separate legend. When labels live in the data, the eye never leaves. When labels live in a separate box, the eye shuttles back and forth and the story breaks.
Our colors come from earth, not from a UI kit. Gold, amber, sienna, burgundy, warm browns, muted teal, dusty purple. Not neon. Not corporate blue. The streamgraph's monochromatic brown family, the university Sankey's muted jewel tones, the computation timeline's soft pastels on cream—these are our reference points.
Color should feel like pigment on paper, not pixels on a screen. When a chart uses only one hue family (browns, or ambers, or slate blues), the data reads as a unified material, not a collection of competing categories.
The TUFTE_COLORS palette from the chart service. Muted earth tones—distinct but never loud.
Start with brutal simplicity. What is the core story? Erase everything else.
Measure data-ink ratio. Remove decoration. Target 0.7–0.85.
Choose technique by variable count. 1–2 variables → sparklines. 3+ variables → small multiples (categories), multivariate display (relationships), or escaping flatland (dimension encoding).
Test before shipping. Can anything be removed without losing information? If yes, remove it.
| 1983 | The Visual Display of Quantitative Information | Principles 1, 2, 6 |
| 1990 | Envisioning Information | Principles 3, 5 |
| 1997 | Visual Explanations | Causality, mechanism |
| 2006 | Beautiful Evidence | Principle 4 (sparklines) |