TREND COMPARISON COMPOSITION

Line Multi-line Step line Bar Multi-bar Tornado Pie Donut Semi-donut
Trend of a variable Trends comparison A variable changing Comparing categories Comparing multiple Comparing two Part-to-whole Part-to-whole Part-to-whole
intermittently variables variables side by side relation relation relation

HIGH AM D3 HIGH AM D3 AM HIGH AM HIGH AM D3 HIGH AM D3 HIGH AM D3 HIGH AM D3 HIGH

Area Stacked area Stacked % area Stacked bar Stacked % bar Floating bar Tree Sunburst Pyramid
Trend of an Composition changing Standardized com- Comparing com- Standardized com- Comparing ranges by Composition by Compostion by Composition with
accumulative value over time position over time position by category position by category category category category hierachy

HIGH AM D3 HIGH AM D3 HIGH AM HIGH AM AM HIGH AM D3 HIGH D3 HIGH D3 HIGH AM

Overlap area Area range Streamgraph Column Multi-column Layered column

Comparing Trend with range Composition changing Comparing categories Comparing multiple Comparing two
accumulative values over time around a or trend variables variables by category
over time central axis

HIGH HIGH AM D3 HIGH D3 HIGH AM D3 HIGH AM D3 HIGH AM

SINGLE VALUE
Stacked column Stacked %column Negative column Speedometer Solid gauge Multi gauge
Comparing com- Standardized com- Comparing a variable Single value on a Single value on a Multiple values on

GEO position by category

or over time
position by category
or over time
with negative value by
category or over time
radial scale radial scale radial scales

Thematic map Pin map Bubble map 42%

Comparing a variable Geographical Comparing up to two
by location distributiion variables by location HIGH AM D3 HIGH AM D3 HIGH HIGH AM D3 HIGH AM HIGH AM

Column & Line Bubble Word cloud Sparkline Progress Bullet

HIGH AM D3 HIGH AM HIGH AM Comparing two Comparing a data Comparing a data Trend of a variable Percentage A value comparing
variables by category series by bubble size series by font size without axes with mult-measures
or over time
SILVER GRAY PURPLE
MAROON LIME BLACK TEAL 120 79%
FUCHSIA NAVY
GREEN
GOLD

Pie map Map with lines Flight route AQUA OLIVEWHITE

YELLOW 6% 79%
PURPLE BLUE
Composition of a Flows or relationship Flight route
HIGH AM HIGH AM D3 HIGH D3 HIGH AM AM HIGH AM D3
variable by location among locations

Polar Radar Wind rose

HIGH AM AM AM Outliers and commo- Outliers and commo- Wind speed and
nality of multivariate nality of multivariate directions
data data

DISTRIBUTION HIGH AM D3 HIGH AM D3 HIGH D3

RELATIONSHIP
Histogram Scatter 3D scatter Chord Force-directed Node-link tree
Distribution of a Distribution of a data Distribution of a data
Inter-relationships Network with nodes Tree hierachy with
continuous variable series with two series in three
among data series and links in two or nodes and links
variables dimensions
three dimensions

HIGH D3 HIGH AM D3 HIGH AM D3

D3 D3 D3

SEQUENCE
Bubble on XY Polar scatter Heat map Funnel Gantt Waterfall Sankey Slopegraph Parallel
Distribution of a data Distribution of a data Values of a matrix by Stages of a variable Project schedule Cumulative effect of Flows with quantity Changes of data Coordinates
series with three series in polar axis color progressively positive and negative series, usually over Multiple variables of a
variables decreasing contributions time data series

HIGH AM HIGH D3 HIGH AM AM D3 HIGH AM D3 HIGH D3 D3 HIGH D3

CHART DESIGN CHECKLIST ALSO CONSIDER

60 charts to visualize Understand your data How large is your data

set? How many units of measures? What’s the
timeframe?
•
•
•
Benchmark, median, start value, peak value
Hover, expand, zoom, slide
Hybrid chart, companion chart

your data
Know your users What’s their domain • Color-blindness
knowledge? What tools do they use? How • Meaning of red
frequent will they use your charts? • Motion
Clear about your story Frame it as a • Emotional design
question. Can users get the answer from your
chart?
Iterate and pick the most effective and WHEN TO USE TABLE
attractive chart Have you explored all • More than two units of measure (columns)
appropriate charts in the cheatsheet? • Long data series (rows)
Validate with real data Your design will never • No specific pattern among whole sets of values
WENJUN WU | 2017 OCT be done until you validate it with real data. • Need to look up individual values