Data Visualization

Data Visualization -- Storytelling with Data

Acknowledgement: Shared by Peter Bamuhigire, techguypeter.com, +256 784 464178.

Use When

• Choosing or reviewing an individual chart's encoding — picking the chart type, mapping the key quantity to the most accurately decoded channel (Cleveland–McGill: position > length > angle > area > colour), enforcing zero baselines, sorting bars by value.
• Killing chart-junk on a specific exhibit: a pie/donut/3-D chart, a secondary y-axis, a spaghetti line graph, a rainbow scale, a legend stranded from its data, or diagonal axis labels.
• Making a chart colour-blind-safe and WCAG-compliant — replacing red/green with blue+orange plus a non-colour cue, hitting the 3:1 mark / 4.5:1 text contrast floor, adding captions/alt text and keyboard-reachable points.
• Turning a number or table into a decision-ready exhibit: applying Knaflic's context → visual → declutter → focus → design → story arc, writing an action title, and annotating the one insight that drives the call to action.
• Hand-building a custom chart in SVG/D3/CSS/JS, or adapting a chart to narrow mobile viewports.

Do Not Use When

• The work is page-level dashboard composition — zone sequence, layout archetypes, KPI tiering, drill-down, cross-filtering, real-time UX. Use sibling 12-data-viz-and-dashboards/dashboard-and-data-product-design; this skill owns the single chart inside a tile.
• You need the categorical/sequential colour scales themselves or the WCAG contrast tooling — those live in 02-color-brand-and-visual-identity/color-system-and-palette; this skill only consumes them.
• The task is the grid, alignment, or spacing rhythm the exhibit sits on — defer to 03-layout-grid-and-composition/layout-grid-and-spacing.

Required Inputs

• The data and its types (quantitative / ordinal / categorical, number of series, time vs. category x-axis) and the single message the chart must carry.
• The audience and the decision/action the exhibit should drive (who, what they must do) — the seed for the action title.
• The medium: live presentation vs. circulated document vs. mobile/320px, since it changes annotation, animation, and detail density.
• Brand colour constraints and the target contrast/accessibility bar (or confirmation to default to grey-base + blue accent, Okabe–Ito palette).

Workflow

1. Confirm the decision, audience, data provenance, and single intended message.
2. Verify the chosen chart and encoding before styling.
3. Remove non-data ink, establish visual hierarchy, and annotate the evidence that matters.
4. Add uncertainty, source, unit, accessibility, and responsive behaviour.
5. Render at target sizes and test the stated takeaway. Stop release when source, scale, accessibility, or render evidence is unavailable; recover with a labelled table or conditional draft.

Quality Standards

• Preserve denominators, baselines, missingness, uncertainty, and units.
• Prefer position and length over area, angle, volume, or decorative effects.
• Never rely on colour alone; include direct labels, patterns, shapes, or text alternatives.

Decision Rules

Capability Contract

Read and search are required for data, definitions, sources, and medium constraints. Editing is allowed only for requested production. Calculation and rendering are required for accuracy, accessibility, and responsive claims; publication requires separate authority.

Degraded Mode

If required evidence or tooling is unavailable, use the scoped fallback below and mark the result unverified. Without validated data, deliver a labelled specification or placeholder, not a factual chart. Without rendering, provide chart source and exact checks, mark the result unverified, and block publication where distortion or accessibility risk is material.

Anti-Patterns

• Decorative 3D: use position or length on a flat common scale.
• Rainbow categories: use restrained colour plus direct labels or shapes.
• Truncated quantitative axis without disclosure: restore zero or explicitly justify the bounded range.
• Unlabelled uncertainty: show intervals, ranges, or caveats beside the estimate.
• Chart junk and redundant legends: remove decoration and label the evidence directly.

Outputs

• A data visualisation review applying the Knaflic framework, perceptual encoding rules, and accessible-chart floor to the dashboard, report, or chart under review.
• A chart spec, implementation guidance, review findings, templates, or generated artifacts when the task is creation rather than review.

References

• doctrine/design-doctrine.md — the Mission and Anti-Slop Charter; charts must be authored and clutter-free, never decorative chart-junk.
• doctrine/references/ai-slop-taxonomy.md — the "dashboard decoration" / chart-junk tells (3D, gauges, rainbow palettes) this skill rejects.
• Sibling — 03-layout-grid-and-composition/layout-grid-and-spacing for the grid, alignment, and spacing rhythm that exhibits sit on (this skill's alignment and white-space rules inherit from it).
• Sibling — 02-color-brand-and-visual-identity/color-system-and-palette for the categorical/sequential colour scales and the WCAG contrast gate the "grey base + one accent" rule depends on.
• The deep references in this folder: references/chart-encoding.md (the perceptual-accuracy ranking + the accessible-chart floor — load whenever choosing or reviewing an encoding), references/dashboard-patterns.md (per-chart behaviour inside a dashboard tile; page-level layout/drill/real-time is the sibling dashboard-and-data-product-design), references/analytics-dashboard-decision-story.md, references/responsive-mobile-charts.md, references/svg-css-js-implementation.md. The book sources are listed in the References block below.
• Sibling — 12-data-viz-and-dashboards/dashboard-and-data-product-design owns page-level dashboard design (zone sequence, layout archetypes, KPI tiering, drill-down, cross-filtering, real-time UX). This skill owns the individual chart; defer page composition to it.

Source: Storytelling with Data by Cole Nussbaumer Knaflic (Wiley, 2015)

The 6-Lesson Framework

1. Understand the context — Who, What, How before any visual
2. Choose an appropriate visual — Match chart type to data + message
3. Eliminate clutter — Remove everything that does not add informative value
4. Focus attention — Use preattentive attributes to direct the eye
5. Think like a designer — Affordances, accessibility, aesthetics, acceptance
6. Tell a story — Beginning (plot), middle (twists), end (call to action)

2026 Standards — Perceptual Encoding & Accessible Charts (apply on every chart)

These two standards sit underneath Knaflic's lessons and make them non-negotiable. Full treatment + checklists in references/chart-encoding.md.

Perceptual encoding (the why behind chart choice)

Encode the most important quantity in the most accurately decoded channel available. Ranked most → least accurate: position on a common scale → length → angle/slope → area → 3-D volume → colour intensity → colour hue. Operational rules:

• The more precisely a quantity must be compared, the higher up that list its encoding must sit. (This is the reason pies/donuts/3-D are banned — they push the key comparison onto angle/area; a sorted horizontal bar puts it back on position.)
• Hue is categorical, intensity is ordinal, length/position are quantitative. Match the channel to the data type; never use hue to carry magnitude or rainbow to carry order (use a single-hue ramp). Length encodings require a zero baseline (expressiveness).

Accessible charts (the measurable a11y floor — doctrine/references/wcag-2.2-criteria.md)

• Never colour-alone (WCAG 1.4.1). ~8% of men have red–green CVD. Every colour distinction carries a second, non-colour cue — direct labels, dash/marker/shape, pattern, or a +/− sign. Use blue (positive) + orange (negative), never red+green, and add a sign/arrow.
• Contrast, concretely: data marks & key points ≥ 3:1 vs background and vs adjacent marks (1.4.11); chart text/labels ≥ 4.5:1 (≥3:1 for ≥24px / ≥18.66px-bold) (1.4.3). Design with APCA, certify with the WCAG ratio.
• Colour-blind-safe palettes (Okabe–Ito / ColorBrewer "colorblind-safe"); test in a CVD simulator before shipping. Source the actual scales from color-system-and-palette.
• Text alternative + targets: every chart has an informative caption/alt (the action title is its seed) and ideally a backing data table (1.1.1); interactive points are keyboard-reachable with name/role/value (4.1.2) and ≥ 24×24px (2.5.8); animation honours prefers-reduced-motion and never flashes >3×/s; usable at 320px / 200% zoom.

Lesson 1: Context First

The Exploratory vs Explanatory Distinction

• Exploratory = hunting for pearls in oysters (100 hypotheses, maybe 2 findings)
• Explanatory = presenting the pearls (the specific story you want to tell)
• NEVER show exploratory analysis to stakeholders — concentrate on the pearls

Who, What, How (in this order)

Communication Mechanism Continuum

• Live presentation (left) — you control pacing, less detail needed on slides
• Written document (right) — audience controls, more detail needed
• Slideument — hybrid serving both; poses challenges for both needs

Key Tools

• 3-minute story: If you had 3 minutes, what would you say? Forces clarity.
• Big Idea (Duarte): A single sentence that (1) articulates your unique POV, (2) conveys what is at stake, (3) is a complete sentence.
• Storyboarding: Use Post-it notes or whiteboard BEFORE opening software. Easier to rearrange and discard without attachment.

Context Questions Checklist

• What background information is relevant or essential?
• Who is the audience/decision maker? What do we know about them?
• What biases might make them supportive or resistant?
• What data strengthens our case? Is it familiar or new to them?
• Where are the risks that could weaken our case?
• What would a successful outcome look like?
• If you had one sentence, what would you say?

Lesson 2: Choosing the Right Visual

Decision Tree — When to Use What

Visuals to AVOID

Critical Rules

• Bar charts MUST have a zero baseline — violating this creates false visual comparison (Fox News example: 460% visual increase vs 13% actual)
• Line graphs CAN have nonzero baselines — but make it clear and don't overzoom
• Bar width should be wider than white space between bars, but not so wide audience compares areas
• Consistent time intervals on x-axis for line graphs — never mix decades with years
• Logical category ordering: natural order if it exists; otherwise biggest-first or smallest-first depending on emphasis

Lesson 3: Eliminate Clutter

Cognitive Load Principle

• Every element on the page costs the audience brain power
• Perceived cognitive load matters most — if it LOOKS hard, audience gives up
• Maximise the data-ink ratio (Tufte): larger share of ink devoted to data = better
• Maximise signal-to-noise ratio (Duarte): signal = message, noise = clutter

The 6 Gestalt Principles (Applied to Charts)

Decluttering Step-by-Step (the 6 Moves)

1. Remove chart border — use white space instead (closure principle)
2. Remove gridlines — if kept, make thin and light grey; never compete with data
3. Remove data markers — only use with purpose, not as default
4. Clean up axis labels — remove trailing zeros, abbreviate months to fit horizontally, eliminate diagonal text
5. Label data directly — eliminate legend; leverage proximity principle
6. Use consistent colour — label text same colour as its data series (similarity principle)

Alignment Rules

• Left-justify text (avoid centre-aligned — creates no clean lines)
• Upper-left-most justify titles, axis titles, legends — audience sees how to read before reaching data
• Avoid diagonal elements — diagonal text is 52% slower to read (45—) and 205% slower at 90—
• Create clean vertical and horizontal lines of elements and white space

White Space Rules

• Margins must remain free of text and visuals
• Do NOT stretch visuals to fill available space
• NEVER add data just to fill space
• White space = dramatic pause in a presentation — strategically powerful
• If one thing is really important, make it the ONLY thing on the page

Contrast Rule

• "Easy to spot a hawk in a sky full of pigeons, but as variety of birds increases, the hawk becomes harder to find" (Ware)
• The more things we make different, the less any single thing stands out
• Make the ONE important thing very different from everything else

Keep These Redundant Details

• Dollar signs ($), percent signs (%), commas in large numbers — always retain with data
• These ease interpretation even if title already states the unit

Lesson 4: Focus Attention — Preattentive Attributes

How Vision Works

• Iconic memory: fraction-of-a-second processing, tuned to preattentive attributes
• Short-term memory: holds ~4 chunks — legend with 10 colours = cognitive overload
• Long-term memory: visual + verbal combined trigger strongest recall

The Preattentive Attributes (Adapted from Few)

Orientation | Shape | Line length | Line width | Size | Curvature | Added marks | Enclosure | Hue | Intensity | Spatial position

Quantitative vs Categorical

• Quantitative encoding: line length, spatial position, line width, size, intensity (longer = greater)
• Categorical encoding: colour hue, shape — NOT quantitative (red is not "more" than blue)

Two Strategic Uses

1. Direct attention — make the audience see what you want BEFORE they consciously think
2. Create visual hierarchy — establish implicit order for processing information

The "Where Are Your Eyes Drawn?" Test

• Create your visual — close eyes — look back — note where eyes land first
• Better: show colleague and have them narrate what they see and in what order

Rules for Using Preattentive Attributes

• 3-8 seconds: studies show we have this window before audience decides to engage or move on
• Use preattentive attributes so that even in 3 seconds, the gist comes through
• Push everything to background first (grey), then make explicit choices about what to bring forward
• Data labels: use sparingly as "look here" signals, not on every data point

Size

• Relative size = relative importance
• If 3 things are equally important, size them the same
• If one thing is most important, make it BIG
• Don't let layout accidents (e.g., placeholder sizing) signal false importance

Colour — The Most Powerful Attribute

Core approach: Design in shades of grey, pick ONE bold colour to draw attention.

Position on Page

• Audience starts top-left, scans in z-pattern zigzags
• Put the most important thing at the top
• On slides: action title at top = main takeaway
• In data: consider whether reordering data to put key insight at top makes sense
• Never make audience read bottom-right to top-left

Lesson 5: Think Like a Designer

Four Design Principles

1. Affordances (from product design)

• Visual cues that indicate how to interact with the visualisation
• Three sub-rules: highlight important stuff, eliminate distractions, create clear hierarchy
• 10% rule: highlight at most 10% of the visual design (Lidwell et al.)

Highlighting techniques ranked:

• Bold — preferred: minimal noise, clearly highlights
• Italics — minimal noise but less standout, less legible
• Underline — adds noise, compromises legibility, use sparingly
• UPPERCASE — works for titles/labels/keywords (short sequences)
• Colour — effective when used sparingly, best combined with bold
• Size — signals importance
• Inversing — effective but noisy, use sparingly
• Layering multiple attributes (large + coloured + bold) for highest-priority items

2. Accessibility

• "If it's hard to read, it's hard to do" (Song & Schwarz, 2008) — fussy fonts made students judge exercise routines as harder
• Make it legible: consistent, easy-to-read font
• Keep it clean: leverage visual affordances
• Straightforward language: simple > complex, fewer words > more, spell out acronyms
• Remove unnecessary complexity: when choosing between simple and complicated, favour simple
• Text is your friend: every chart needs a title, every axis needs a title (exceptions are extremely rare)
• Action titles on slides: "Estimated 2015 spending is above budget" beats "2015 Budget"
• Annotations: few choice words on a graph dramatically accelerate understanding

3. Aesthetics

• More aesthetic designs are perceived as easier to use (whether they are or not)
• Aesthetic designs promote creative thinking, foster positive relationships, increase tolerance of problems
• Three aesthetic priorities: smart colour, proper alignment, leveraged white space

4. Acceptance

• Strategies for resistant audiences:
  • Articulate benefits of the new approach
  • Show side-by-side comparison (old vs new)
  • Provide multiple options and seek input
  • Get a vocal audience member on board first

Lesson 6: Tell A Story

Use references/data-storytelling-and-case-patterns.md for narrative structures, spoken-versus-written choices, story-clarity tests, spaghetti-graph repairs, pie-chart alternatives, animation strategy, and stable ordering.

Model Visual Checklist

Apply this checklist to every data visualisation before sharing:

• Context: Can I state in one sentence who this is for and what they should do?
• Visual type: Is this the easiest-to-read chart type for this data and message?
• Zero baseline: If bar chart, does y-axis start at zero?
• No 3D: Is the chart free of 3D effects?
• No pie/donut: Have I avoided pie and donut charts (or justified their use)?
• Chart border removed: No unnecessary box around the chart?
• Gridlines: Removed or made thin light grey?
• Data markers: Only present with purpose, not by default?
• Axis labels: Clean (no trailing zeros, no diagonal text)?
• Direct labels: Data series labelled directly (no distant legend)?
• Colour strategy: Grey base + one bold colour for emphasis?
• Colourblind safe: Avoided red+green together? Added backup cues?
• Alignment: Left-justified text, upper-left titles, clean vertical/horizontal lines?
• White space: Margins preserved, visuals appropriately sized?
• Titles: Graph title and all axis titles present?
• Action title: Title states the "so what," not just a description?
• Annotations: Key insights called out directly on the visual?
• Visual hierarchy: "Where are your eyes drawn?" test passed?
• Story: Does this visual support a clear beginning-middle-end narrative?
• Call to action: Is it obvious what the audience should know or do?

Anti-Patterns Summary

References

• Knaflic, Cole Nussbaumer. Storytelling with Data. Wiley, 2015.
• Tufte, Edward. The Visual Display of Quantitative Information. Graphics Press, 2001.
• Few, Stephen. Show Me the Numbers. Analytics Press, 2004.
• Duarte, Nancy. Resonate. Wiley, 2010.
• Lidwell, Holden, Butler. Universal Principles of Design. Rockport, 2010.
• Ware, Colin. Information Visualization: Perception for Design. Morgan Kaufmann, 2004.
• Atkinson, Cliff. Beyond Bullet Points. Microsoft Press, 2011.

Responsive charts on narrow viewports

When charts must work at 360 px or similar mobile widths, load references/responsive-mobile-charts.md. It covers chart-type switching, aggregation, sparkline/headline patterns, horizontal-scroll safeguards, touch targets, and mobile anti-patterns.

Beyond Knaflic: building custom visualisations

When hand-building charts in HTML/SVG/CSS/JS, load references/svg-css-js-implementation.md for SVG, D3, responsive, accessibility, and runnable skeleton patterns.

When the visual carries a management decision, KPI review, forecast, risk score, or analytics output, load references/analytics-dashboard-decision-story.md.

For data-product lineage, freshness, uncertainty, and decision drilldown, load data-foundation to decision visualisation.

Examples

• examples/chart-worked-examples.md — five real good vs bad chart encodings (pie→sorted bar, dual-axis→split panels, red/green→colour+non-colour cue, rainbow→single-hue ramp, gauge→bullet graph), each with the perceptual + accessibility reasoning. Use it as the reasoning pattern when choosing or reviewing an encoding.