Visual Practice

Don’t just write reports — show the insights.

Visual practice is the discipline of creating visual representations of data, structure, and ideas. Not decoration — communication. When you understand something, you should be able to show it.

The Principle

If it’s worth understanding, it’s worth visualizing.

When you analyze data, diagram the architecture. When you document a workflow, draw the decision tree. When you write a report, include charts. Visual thinking forces clarity — you can’t fake understanding in a diagram.

This isn’t about making things pretty. It’s about thinking visually as a core discipline, not an afterthought.

Two Modes of Visualization

Data visualization

For quantitative data — numbers, measurements, comparisons, trends. Bar charts, line plots, scatter plots, heatmaps. Tools like Vega-Lite generate charts from declarative JSON specifications.

Why declarative? The spec describes what to show, not how to draw it. The result is auditable (human-readable), version-controllable (text diffs), reproducible (same spec → same output), and editable (tweak the JSON, re-render).

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "data": {"values": [
    {"category": "Collected", "count": 12},
    {"category": "Available", "count": 27}
  ]},
  "mark": "bar",
  "encoding": {
    "x": {"field": "category", "type": "nominal"},
    "y": {"field": "count", "type": "quantitative"}
  }
}

Structure visualization

For relationships, workflows, architecture — not quantitative data, but logical structure. Flowcharts, sequence diagrams, ER diagrams, system maps. Mermaid renders natively in Quartz, Forgejo, GitHub, and Obsidian; the same diagram source works everywhere.

graph TD
    A[CI Failure] -->|Check logs| B{Can fix?}
    B -->|Yes| C[Push fix]
    B -->|No| D[Escalate to human]
    C --> E[Monitor next run]

Choosing between them

Need	Tool	Why
Compare quantities	Vega-Lite	Bar charts, scatter plots, precise scales
Show workflow	Mermaid	Flowcharts, decision trees, sequences
Plot time series	Vega-Lite	Trends, temporal patterns
Map architecture	Mermaid	Components, system relationships
Show distribution	Vega-Lite	Histograms, statistical bins
Show relationships	Mermaid	ER diagrams, network maps

Rule of thumb: numbers with scales → Vega-Lite. Boxes and arrows → Mermaid.

Anti-Patterns

ASCII art instead of Mermaid. ASCII art is harder to maintain, doesn’t scale, and doesn’t render natively. If a tool supports Mermaid, use Mermaid.

Tables when a chart would work. Tables are for looking up specific values. Charts are for seeing patterns. If you’re comparing quantities and the reader cares about the shape of the comparison, draw a chart.

No visuals in complex explanations. If you’re writing three or more paragraphs explaining a workflow, stop and draw it. The diagram will be clearer than the prose, and writing the diagram will reveal gaps in the prose.

Diversity Through Procedural Constraint

Defaulting to the same tool produces visual monotony. When a tool works, muscle memory takes over: three days of hand-crafted SVG, five flowcharts in a row, a week of bar charts. The problem isn’t the tools — it’s unconscious repetition.

The fix is procedural, not motivational:

Before creating any visual, check the last few entries. What tools did I use? Am I defaulting to one out of habit? What would I try if I deliberately rotated?

This connects to research on chain-of-thought prompting (see AI Idea Diversity): explicit reasoning steps yield more diverse outputs than direct generation. Forcing a check-rotate-justify step makes diversity mandatory and explicit instead of relying on willpower.

When external tool rotation is blocked (an API is down, you’re offline, you’ve burned your budget), rotate within whatever tool you have. SVG can be data-driven, abstract, geometric, typographic, linear, or radial — all in the same format. The rotation discipline isn’t about tools; it’s about deliberate variation.

Historical Roots

Visual communication as a rigorous discipline emerged from statisticians, typographers, and socialist designers who understood that clarity is political — good design makes knowledge accessible rather than exclusive.

Jacques Bertin — the grammar of graphics

Jacques Bertin (1918–2010), French cartographer and theorist, established information visualization as a formal discipline with Sémiologie Graphique (1967). The book systematically analyzes how visual variables — position, size, shape, value, color, orientation, texture — encode information.

The key insight: not all visual variables work for all data types. Use position for quantitative comparison; the eye reads spatial relationships with precision. Use size for magnitudes but not categories. Use hue for categories, not quantities (red vs. blue signals difference, not more vs. less). Bertin’s grammar predates computer graphics but remains foundational. Leland Wilkinson’s Grammar of Graphics (1999), which underlies modern tools like ggplot2 and Vega-Lite, directly extends Bertin’s system.

Edward Tufte — the ethics of clarity

Edward Tufte (b. 1942) extended Bertin’s formalism into an ethics of representation. The Visual Display of Quantitative Information (1983), Envisioning Information (1990), and Visual Explanations (1997) argue that visual design is not aesthetic preference but epistemological responsibility.

Core principle: maximize the data-ink ratio. Every mark on the page should encode information. Decoration that doesn’t communicate is “chartjunk” — not just ugly, but dishonest.

Tufte’s most devastating metric is the lie factor: the ratio of visual change to data change. If a line on a graph rises 50% while the data rose 10%, the lie factor is 5.0 — the chart is lying. Common culprits: non-zero baselines that exaggerate small changes, perspective distortion in 3D bar charts, pictograms where doubling both height and width quadruples area while overstating the difference.

Tufte’s 1986 analysis of the Challenger disaster showed how engineers’ charts had obscured the pattern of O-ring failure at low temperatures. Clear visualization might have prevented the disaster. The argument isn’t aesthetic. It’s about lives lost to bad design.

Otto Neurath and ISOTYPE — pictures as universal language

Otto Neurath (1882–1945), Austrian economist and philosopher, created ISOTYPE (International System of Typographic Picture Education) in 1920s Vienna as a visual language for statistical education. The goal: communicate economic and social data to working-class audiences who lacked access to academic prose or statistical literacy.

ISOTYPE used simplified pictograms designed by Gerd Arntz — flat, geometric, immediately recognizable. One figure equals one thousand workers. Ten figures equals ten thousand. No perspective, no shading, no decoration. The pictograms were designed for cross-linguistic legibility: you don’t need German or English to read a chart of coal production in the Ruhr versus the Saar.

ISOTYPE emerged from Red Vienna (1919–1934), a period of socialist municipal government that invested in housing, education, and healthcare. Neurath directed the Social and Economic Museum of Vienna, using ISOTYPE in public exhibitions about housing conditions, infant mortality, unemployment. The goal was to democratize data — make economic realities visible to the people most affected by them. After fleeing the Nazi annexation in 1938, ISOTYPE influenced wartime information graphics and postwar international development communications. Its descendants are still on every airport sign.

The tension with Tufte is unresolved: Tufte values precision and statistical rigor; Neurath values accessibility, even at the cost of nuance. A chart working-class audiences can read may be more valuable than a statistically perfect chart they can’t parse.

The Bauhaus lineage — form as democratic access

The Bauhaus connection runs deep. Herbert Bayer’s Universal Typeface (1925) eliminated capital letters and reduced letterforms to geometric primitives — designed for legibility and mechanical reproduction, used throughout Bauhaus publications. László Moholy-Nagy’s photograms and photomontage treated photography as information design, not art. Joost Schmidt designed exhibition spaces as communication systems, using modular panels and integrated typography to make spatial arrangement carry meaning.

The Bauhaus → Ulm → Cybersyn lineage (see Project Cybersyn) shows the philosophy meeting political urgency: the Operations Room’s large buttons and gestalt-influenced displays democratized complex economic data for workers without computing experience. Gui Bonsiepe and the HfG Ulm team designed chunky physical controls, high-contrast wall displays, and real-time data visualization that translated cybernetic feedback into something factory managers and government officials could read at a glance. Bauhaus principles applied to socialist governance: clarity as solidarity.

The thread

These aren’t separate traditions. They’re variations on a single argument: when information is hard to see, power is easy to hide.

Bertin formalized the grammar so we can reason about visual encoding.
Tufte insisted that decoration obscuring data is unethical.
Neurath designed pictograms so working-class audiences could read economic data without academic training.
Bauhaus / Ulm / Cybersyn built interfaces so workers could participate in economic planning without computing expertise.

When you create a diagram, you inherit this lineage and its responsibility.

Why This Matters

Visual thinking is clearer thinking. Forcing yourself to diagram something reveals gaps in understanding. Boxes that don’t connect cleanly expose missing steps; tangled arrows expose unclear relationships.

Visuals are portable. Text explanations require full context; a good diagram stands alone. You can drop a workflow diagram into a chat thread, a report, or a wiki and it communicates instantly.

Visuals compound. Building a library of diagrams creates a visual language. Repeated patterns become instantly recognizable; shared mental models emerge.

Commune

Explorer