Data Visualization Mastery

Data Visualization Mastery

Why Data Visualization Mastery Matters

Data visualization is the art and science of encoding information visually so humans can perceive patterns, outliers, and trends faster than reading raw numbers. A poorly chosen chart misleads. A poorly designed chart confuses. A well-designed chart tells the truth instantly. This skill codifies the principles of Edward Tufte, Stephen Few, Jacques Bertin, and Tamara Munzner into a systematic framework for building data-dense UIs that are beautiful, honest, and accessible.

The gap between a developer-built dashboard and a professionally designed data experience is systematic craft: choosing the right chart type, encoding data correctly, managing visual hierarchy across dozens of data points, and ensuring every pixel of ink serves the data.

Reference Architecture

| File | Contents | Use When | |------|----------|----------| | references/chart-type-encyclopedia.md | 50+ chart types organized by purpose (comparison, trend, distribution, relationship, part-to-whole, flow, geo, hierarchy). Each chart: when to use, when NOT to use, data shape, max data points, design specs (colors, spacing, typography, gridlines), accessibility notes, thumbnail description. | Selecting the right chart for a dataset. Reviewing chart design specs. Auditing chart choices in an existing UI. | | references/dashboard-layout-patterns.md | 30+ dashboard layout patterns: KPI rows, chart grids, filter bars, drill-down hierarchies, real-time monitoring, executive summary, operational, analytical, mobile card-stack. Each: CSS grid layout, spacing, component hierarchy, responsive collapse strategy. | Designing dashboard layouts. Reviewing dashboard information architecture. Building responsive analytics UIs. | | references/data-table-mastery.md | Complete data table design system: anatomy, column types (15+), sorting, filtering, pagination, selection, expansion, fixed headers, inline editing, cell formatting, empty/loading states, responsive strategies, density modes, full accessibility spec, production React/TypeScript code. | Designing or building data tables. Auditing table usability. Adding features to existing tables. | | references/dataviz-accessibility.md | Dataviz accessibility: alt text patterns for every chart type, data table alternatives, 8 colorblind-safe palettes with hex codes, pattern fills, high contrast mode, screen reader announcements, keyboard navigation, sonification, WCAG success criteria mapping. | Making charts accessible. Auditing dataviz accessibility. Building inclusive dashboards. | | references/dataviz-code-patterns.md | Production code for top 20 chart types using Recharts (React). Chart wrapper component with loading/error/empty states. Design tokens for dataviz. Responsive containers. Theme integration. Tooltip and legend customization. Print styles. | Implementing charts in React. Building chart component libraries. Setting up dataviz design tokens. |

Cross-References

• visual-design-mastery -- Color science (oklch, palette generation) applies directly to dataviz color palettes. Typography mastery (tabular figures, alignment) is critical for number-heavy UIs.
• ui-pattern-intelligence -- Dashboard and table patterns at the component level. This skill provides the deeper dataviz-specific design intelligence.
• accessibility-inclusive-design -- WCAG foundation. This skill extends it with dataviz-specific accessibility patterns.
• component-patterns-code -- Component architecture. This skill provides dataviz-specific component patterns and code.
• design-systems-architecture -- Token architecture. This skill defines dataviz-specific tokens (chart colors, gridlines, axes).
• performance-states-patterns -- Loading, error, and empty states apply to every chart and table component.
• cognitive-psychology-ux -- Perceptual principles (pre-attentive processing, Gestalt grouping) underpin all visual encoding decisions.

---

1. Foundational Principles

1.1 Edward Tufte's Core Principles

Data-Ink Ratio: Maximize the share of ink devoted to data. Every pixel that does not encode data should be questioned and likely removed. Remove chartjunk: decorative gridlines, 3D effects, gradient fills, drop shadows on bars, unnecessary legends, redundant labels.

Data-Ink Ratio = (Data Ink) / (Total Ink Used in the Graphic)
Target: > 0.8

Lie Factor: The size of an effect shown in the graphic divided by the size of the effect in the data. A lie factor of 1.0 is truthful. Above 1.05 or below 0.95 is distortion.

Lie Factor = (Size of effect in graphic) / (Size of effect in data)
Acceptable range: 0.95 - 1.05

Chartjunk Checklist -- Remove These:

• 3D effects on 2D data (bars, pies)
• Gradient fills that imply data variation where none exists
• Decorative background images
• Heavy gridlines that compete with data
• Redundant legends (when labels are directly on data)
• Unnecessary borders and boxes
• Excessive decimal places
• Animated entrances that delay comprehension

Small Multiples: When comparing across categories or time periods, use small multiples (the same chart repeated with different data) rather than cramming everything into one chart. Same scale, same axes, same visual encoding -- only the data changes.

1.2 Visual Encoding Hierarchy (Jacques Bertin + Cleveland & McGill)

Humans decode visual channels with different accuracy. Always use the most accurate channel for the most important data dimension:

MOST ACCURATE (use first)
  1. Position on a common scale (bar chart, dot plot, scatter plot)
  2. Position on non-aligned scales (small multiples)
  3. Length (bar chart)
  4. Direction / Angle (slope, but NOT pie chart angles)
  5. Area (bubble chart, treemap)
  6. Volume (3D -- almost never use)
  7. Color saturation / Luminance (heatmap, choropleth)
  8. Color hue (categorical encoding only)
LEAST ACCURATE (use last)

Practical implication: A bar chart (position + length) will ALWAYS be more accurately read than a pie chart (angle + area). Use pie charts only when part-to-whole relationship matters more than precise comparison, and only with 2-5 slices.

1.3 Stephen Few's Dashboard Design Principles

1. Fit on a single screen -- no scrolling for the primary view
2. Group related information using Gestalt proximity and enclosure
3. Place the most important information top-left (F-pattern scanning)
4. Use consistent visual encoding across all charts on the dashboard
5. Provide context -- comparison values, targets, historical ranges
6. Highlight what matters -- use pre-attentive attributes (color, size) to draw attention to exceptions, not to decorate
7. Minimize non-data pixels -- every border, background, and separator should earn its place
8. Support progressive disclosure -- summary first, details on demand

1.4 Tamara Munzner's Nested Model

Four levels of visualization design, each validated differently:

| Level | Question | Validation | |-------|----------|------------| | Domain situation | Who are the users? What are their tasks? | Observe users in context | | Data/task abstraction | What data types? What analytical tasks? | Test task completion | | Visual encoding/interaction | What marks and channels? What interactions? | Perceptual experiments | | Algorithm | How to compute and render efficiently? | Performance benchmarks |

---

2. Chart Selection Decision Framework

2.1 By Analytical Purpose

| Purpose | Best Charts | Avoid | |---------|-------------|-------| | Compare values | Bar (horizontal for many categories), Column, Dot plot, Lollipop | Pie (bad for comparison), Radar (distorts) | | Show trend over time | Line, Area, Sparkline, Slope chart | Bar (unless discrete periods), Pie | | Show part-to-whole | Stacked bar (100%), Treemap, Donut (2-5 parts), Waffle | Pie (>5 slices), Stacked area (hard to read middle layers) | | Show distribution | Histogram, Box plot, Violin, Density, Strip plot | Bar chart (not the same as histogram) | | Show relationship | Scatter, Bubble, Correlation matrix | Line chart (implies time sequence) | | Show flow/process | Sankey, Funnel, Alluvial | Pie, Bar | | Show geographic data | Choropleth, Bubble map, Heat map | Bar chart (loses spatial context) | | Show hierarchy | Treemap, Sunburst, Circle packing, Dendrogram | Pie (flat, no hierarchy) | | Show composition over time | Stacked area, Stream graph | Multiple pie charts over time |

2.2 By Data Shape

| Data Shape | Recommended | |------------|-------------| | 1 number (KPI) | KPI card with delta, sparkline, context | | 1 categorical + 1 quantitative | Bar/Column chart | | 1 time + 1 quantitative | Line chart | | 1 time + multiple quantitative | Multi-series line, Small multiples | | 2 quantitative | Scatter plot | | 3 quantitative | Bubble chart (3rd = size) | | 1 categorical + parts | Stacked bar, Treemap | | Hierarchical categories + 1 quantitative | Treemap, Sunburst | | Source to Target + flow magnitude | Sankey diagram | | Geographic + 1 quantitative | Choropleth | | Matrix (rows x cols x value) | Heatmap |

2.3 By Audience

| Audience | Approach | |----------|----------| | Executive | KPI cards, sparklines, single-number summaries, traffic lights. Max 5-7 data points visible. Summary first, drill-down available. | | Analyst | Interactive charts, filters, cross-filtering, tooltips with detail. Support exploration. Higher data density acceptable. | | General public | Simple charts (bar, line, donut). Annotations explaining "what this means." No jargon. Large text. | | Domain expert | Specialized chart types acceptable (candlestick for finance, survival curves for medicine). Dense data OK. |

---

3. Color for Data Visualization

3.1 Palette Types

Sequential (low to high): Single hue varying in lightness. Use for ordered data (temperature, population, revenue).

Example (Blue sequential):
#f7fbff -> #deebf7 -> #c6dbef -> #9ecae1 -> #6baed6 -> #4292c6 -> #2171b5 -> #084594

Diverging (negative positive): Two hues diverging from a neutral midpoint. Use for data with a meaningful center (profit/loss, above/below average, sentiment).

Example (Red-Blue diverging):
#b2182b -> #d6604d -> #f4a582 -> #fddbc7 -> #f7f7f7 -> #d1e5f0 -> #92c5de -> #4393c3 -> #2166ac

Categorical (distinct groups): Maximally distinct hues at similar lightness. Use for nominal categories (product lines, regions, user segments). Maximum 8-10 colors before confusion.

Colorblind-safe categorical (8 colors):
#4e79a7  #f28e2b  #e15759  #76b7b2  #59a14f  #edc948  #b07aa1  #ff9da7
(Tableau 10 subset -- optimized for distinguishability including colorblind viewers)

3.2 Colorblind-Safe Design Rules

1. Never use red/green as the only differentiator -- 8% of males have red-green deficiency
2. Use lightness variation in addition to hue -- colorblind viewers can still distinguish light from dark
3. Add redundant encoding -- patterns, labels, icons, or position in addition to color
4. Test with simulation -- Sim Daltonism (macOS), Color Oracle, or Figma colorblind plugins
5. Use pre-tested palettes -- see references/dataviz-accessibility.md for 8 verified palettes

3.3 Color Assignment Rules

• Semantic colors should be respected: red = danger/loss/down, green = success/gain/up, blue = information/neutral, yellow/amber = warning
• Gray for context, saturated color for focal data -- e.g., gray bars for all categories, blue bar for the selected one
• Consistent mapping -- if "Product A" is blue on chart 1, it must be blue on chart 2
• White/light background for charts -- data should be the most visually prominent element
• No more than 8 categorical colors -- group remaining into "Other"

---

4. Typography for Data-Dense UI

4.1 Tabular (Monospace) Figures

Numbers in tables and charts MUST use tabular figures (all digits occupy the same width) so columns align perfectly. Most professional fonts include a font-feature-settings: "tnum" OpenType feature.

/* Enable tabular figures for all data displays */
.dataviz-number,
.table-cell-number,
.kpi-value {
  font-feature-settings: "tnum" 1;
  font-variant-numeric: tabular-nums;
}

Fonts with excellent tabular figures: Inter, IBM Plex Sans, Roboto, SF Pro, DM Sans, JetBrains Mono.

4.2 Number Formatting Rules

| Context | Format | Example | |---------|--------|---------| | Currency | Symbol + comma grouping + 2 decimal | $1,234,567.89 | | Large currency | Abbreviate with suffix | $1.2M, $3.4B | | Percentage | 1 decimal max, % symbol | 45.2% | | Large numbers | Comma grouping or abbreviate | 1,234,567 or 1.2M | | Dates in tables | Consistent format, sortable | 2026-03-12 or Mar 12, 2026 | | Deltas/changes | Sign + color + arrow | +12.3% with green up-arrow | | Negative numbers | Parentheses or minus + red | ($1,234) or -$1,234 |

4.3 Alignment Rules

• Numbers: Right-align (decimal points line up)
• Text: Left-align
• Headers: Match cell alignment (right-align number headers, left-align text headers)
• Dates: Left-align or right-align consistently
• Status/tags: Center-align
• Actions: Right-align or center-align

4.4 Type Scale for Dashboards

KPI hero number:     32-48px, font-weight 700
KPI label:           12-14px, font-weight 500, text-transform uppercase, letter-spacing 0.05em, muted color
Chart title:         16-18px, font-weight 600
Axis labels:         11-12px, font-weight 400, muted color
Axis tick labels:    10-11px, font-weight 400, muted color
Tooltip title:       13-14px, font-weight 600
Tooltip value:       13-14px, font-weight 400
Data label on chart: 11-12px, font-weight 500
Table header:        12-13px, font-weight 600, text-transform uppercase, letter-spacing 0.03em
Table cell:          13-14px, font-weight 400

---

5. Grid and Spacing for Dashboards

5.1 Dashboard Grid System

Container max-width: 1440px (centered)
Outer padding:       24px (desktop), 16px (tablet), 12px (mobile)
Column grid:         12 columns, 24px gutter
Card padding:        20-24px
Card border-radius:  8-12px
Card gap:            16-24px
Chart minimum height: 240px (desktop), 180px (mobile)
KPI card height:     ~120px

5.2 Chart Internal Spacing

Chart title to chart area:    12-16px
Chart area to legend:         16-20px
Axis label to axis line:      8px
Axis tick label to axis line: 4px
Gridline opacity:             0.1-0.15 (barely visible)
Bar gap (within group):       2-4px
Bar gap (between groups):     8-16px (> within-group gap)
Minimum bar width:            12px
Line stroke width:            2px (primary), 1.5px (secondary)
Data point dot radius:        4px (hover: 6px)
Tooltip offset from cursor:   8-12px

---

6. Animation and Interaction in Dataviz

6.1 When to Animate

DO animate:

• Data transitions (values changing from old to new)
• Chart type transitions (bar morphing to line)
• Progressive data loading (bars growing from zero)
• Hover states (tooltip appearance, highlight active series)
• Drill-down transitions (zooming into a segment)

DO NOT animate:

• Initial page load with complex entrance sequences (delays comprehension)
• Gratuitous bouncing, spinning, or pulsing
• Decorative animations that do not encode data
• Anything that takes > 500ms before data is readable

6.2 Transition Timing

/* Dataviz transition tokens */
--dataviz-transition-fast:    150ms ease-out;   /* hover highlights */
--dataviz-transition-medium:  300ms ease-in-out; /* data updates */
--dataviz-transition-slow:    500ms ease-in-out; /* chart type changes */
--dataviz-tooltip-delay:      200ms;             /* tooltip show delay */
--dataviz-tooltip-duration:   150ms ease-out;    /* tooltip fade in */

##

…

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: phazurlabs
• Source: phazurlabs/sumi
• License: Apache-2.0

Install and usage instructions live in the source repository linked above.