Every visualization is a chain: data becomes
marks through a channel,
the viewer acts through interaction, and the
designer guides attention with highlight. Every
skill in this series teaches one link in that chain. The colors above are the
vocabulary the series uses to refer to those roles.
The skills are grouped into eight categories, loosely ordered from seeing to making. Each article stands alone.
Seeing Patterns
Seeing Structure
Seeing Place
Seeing Change
Making It Legible
Making It Work
Before You Render
Meta
The Vocabulary
Every skill colors its examples by the same five roles. The glyphs above use the same palette: a blue line is always data, a violet shape is always a mark.
The raw values being visualized, rows, points, edges, pixels.
data points in scatter · rows in a data table · records in streaming · individual values before encoding
The visual shape that represents data, what the viewer actually sees.
dots · lines · bars · paths · shapes · glyph bodies · polylines in parcoords
The mapping apparatus, the code and geometry that turns numbers into pixels.
scales · axes · colormaps · projections · the layout engine · small-multiples frames
User input, the hand of the viewer reaching into the chart.
brushes · drags · hovers · clicks · scrolls · pan/zoom · focus rings
Called-out subsets or annotations, what the designer points at.
selected marks · callouts · annotations · tooltips · emphasized regions