Playground
  • Introduction
  • Components

Charting data

Charts provide efficient ways to communicate complex information. A chart earns its place when the reader’s question is comparative — bigger than what, changing how, clustered where. Choosing a chart is choosing which comparisons become effortless and which become impossible.

No single rule picks the chart. Four things matter: what the reader needs to do, what the data looks like, how much of it there is, and how it is drawn. They are independent — start from whichever is clearest.

What the reader needs to do

Two ways to name the goal. The first breaks it down into what the reader is looking for and what they will do with it; the second just names what the chart is about. Use whichever comes to mind first.

Looking for what, to do what

TargetAimQuery
Trends — overall shape or directionExplain — communicate a findingCompare — magnitudes, ranks, change
Features — specific patterns or peaksDiscover — explore for unknownsIdentify — locate a specific value or outlier
Outliers — anomalies and exceptionsDiscover and explain — bothSummarise — aggregate, describe distribution

What the chart is about

SubjectWhat it shows
TimeChange across a sequence; temporal order on the x-axis
DistributionHow values spread; shape, spread, skew, outliers
AssociationRelationship between two or more continuous variables
ComparisonRelative magnitude across discrete categories
FlowVolume moving between states or nodes
HierarchyContainment and parent–child structure
NetworkConnections with no implicit hierarchy
SpatialValues tied to geographic or positional coordinates

What the data looks like

Structure rules out whole chart families before anything else gets a say.

Dataset type

TypeDescription
TablesRows and columns; the most common case
TreeParent–child hierarchy with a single root
NetworkNodes and edges; no single root
Spatial dataGeographic or positional coordinates

Value types

The mix of categorical, ordinal, and quantitative variables decides how many chart types remain.

  • Cat — pure categories, no inherent order
  • Quant — continuous numeric values
  • Cat, Quant — the most common combination; unlocks bar, scatter, line families
  • Cat, Ord, Quant — adds ranked categories; enables parallel coordinates and heatmaps
  • Quant, Quant — two numeric dimensions; scatter and bubble territory

How much data

Scale knocks out candidates on its own, whatever the data type or goal.

DimensionValues
Variables1 / 2 / 3 / 4 or more
Categoriesunder 10 / 10–99 / 100–999 / 1,000+
Data valuesunder 20 / dozens / hundreds / thousands / effectively infinite

A bar chart works under 10 categories; beyond that it degrades. A choropleth needs a fixed region set. A scatter plot tolerates thousands of points; a pie chart does not tolerate more than five.

Marks and channels

What a chart is made of. Some families are defined by their mark; within a family, which channel carries which variable is the real design decision. Position is the strongest channel — if a value matters, put it on an axis.

Marks

MarkTypical chart families
PointsScatter, bubble, dot plot, strip plot
LinesLine chart, area, parallel coordinates, step chart
AreasArea chart, treemap, choropleth, streamgraph
ConnectionNetwork, chord, arc, Sankey
ContainmentTreemap, circle packing, Euler/Venn

Channels

ChannelWhat it encodes well
PositionQuantitative values; highest accuracy for readers
ColourCategory membership or magnitude (use sparingly for magnitude)
SizeQuantitative values; works for magnitude, not fine differences
ShapeCategory membership; limited to ~5–6 distinguishable shapes

In the catalogue

  • Bar chart — the one built chart mechanism; it owns the comparison branch
  • Elements — the rendering conventions every chart family shares: categorical colour, time and number formatting, symbology
  • TODO: the rest…

Resources & references

  • Tamara Munzner, Visualization Analysis and Design — the source of the target/aim/query breakdown and the marks-and-channels vocabulary
  • IBM Carbon
  • WHO Data Design Language
  • Apple HIG
  • Salesforce Lightning
  • Tree of charts by Lars Verspohl

Related patterns

Related

  • Needs-based view — the monitoring variant is largely composed of charts; the needs-based framing decides which comparisons each chart must support
  • Data view — a chart is one of the representations a collection framing can take — the analytic sibling of table and cards