VISUAL VOCABULARY / 01

Graph Atlas

Compare the same data, choose a chart for your task, and take away a creation instruction.

12 delivery times. What do you want to see?

Switch views below to compare individual values with their distribution.

Scroll the page to compare views Reduce motion

Individual values · 12

A histogram counts observations in numeric intervals; bars here show each category’s value.

Buttons choose a static view. All explanations remain readable without motion.

Bars vs histogram ↓

Delivery time · min · 8, 12, 14, 15, 16, 17, 18, 20, 22, 26, 32, 48

02 / Choose a purpose

Switch views below to compare individual values with their distribution.

Choose a purposeBin width · minutes

Bar chart

Histogram

Bar charts use categories; histograms use numeric intervals.

[0,10)=1; [10,20)=6; [20,30)=3; [30,40)=1; [40,50)=1; n=12

Charts and data are original fictional examples, not performance or predictions.

03 / 12

Choose a purpose

Find a name or taskChoose a purpose

12 entries

Bar chart

Comparison

Example data · ID 1–12; Delivery time · min [8, 12, 14, 15, 16, 17, 18, 20, 22, 26, 32, 48]

What it represents: Bar length compares amounts across categories.
How it differs: A histogram counts observations in numeric intervals; bars here show each category’s value.
When to use it: Compare departmental sales or individual delivery times.
Conditions and pitfalls: Start the quantity axis at zero and use consistent units.

Creation instruction

Create a chart using this fictional data. ID 1–12; Delivery time · min [8, 12, 14, 15, 16, 17, 18, 20, 22, 26, 32, 48]. Bar chart. Compare departmental sales or individual delivery times. Start the quantity axis at zero and use consistent units.

Line chart

Change over time

Example data · Month 1–12; Amount [8, 12, 14, 15, 16, 17, 18, 20, 22, 26, 32, 48]

What it represents: Connected points show change across an ordered sequence.
How it differs: A scatter plot shows two numeric variables. Joining points adds an assumption about order or continuity.
When to use it: Track monthly sales or a time series.
Conditions and pitfalls: Order time points and disclose gaps and missing observations.

Creation instruction

Create a chart using this fictional data. Month 1–12; Amount [8, 12, 14, 15, 16, 17, 18, 20, 22, 26, 32, 48]. Line chart. Track monthly sales or a time series. Order time points and disclose gaps and missing observations.

Area chart

Change over time

Example data · Month 1–12; Amount [8, 12, 14, 15, 16, 17, 18, 20, 22, 26, 32, 48]

What it represents: The filled space between a line and its baseline emphasizes magnitude over a sequence.
How it differs: A line emphasizes change; an area emphasizes magnitude above a baseline.
When to use it: Show changes in volume over time.
Conditions and pitfalls: Use a zero baseline and avoid hiding series behind overlapping areas.

Creation instruction

Create a chart using this fictional data. Month 1–12; Amount [8, 12, 14, 15, 16, 17, 18, 20, 22, 26, 32, 48]. Area chart. Show changes in volume over time. Use a zero baseline and avoid hiding series behind overlapping areas.

100% stacked bar chart

Part to whole

Example data · 1: A=25, B=40, C=35; 2: A=40, B=20, C=40; Share · %; Amount 1=100, 2=200

What it represents: Equal-length bars compare the proportional composition of different totals.
How it differs: Ordinary stacked bars retain total amounts. A 100% view removes differences in totals.
When to use it: Compare composition across departments or periods.
Conditions and pitfalls: Keep component definitions consistent and annotate original totals.

Creation instruction

Create a chart using this fictional data. 1: A=25, B=40, C=35; 2: A=40, B=20, C=40; Share · %; Amount 1=100, 2=200. 100% stacked bar chart. Compare composition across departments or periods. Keep component definitions consistent and annotate original totals.

Pie chart

Part to whole

Example data · A=25, B=40, C=35; Share · %

What it represents: Slices divide a full circle into mutually exclusive shares of one total.
How it differs: Bars support close comparisons; a pie emphasizes parts of one whole.
When to use it: Show a small number of non-overlapping components.
Conditions and pitfalls: Shares must total 100%; exclude negative or overlapping components.

Creation instruction

Create a chart using this fictional data. A=25, B=40, C=35; Share · %. Pie chart. Show a small number of non-overlapping components. Shares must total 100%; exclude negative or overlapping components.

Histogram

Distribution

Example data · ID 1–12; Delivery time · min [8, 12, 14, 15, 16, 17, 18, 20, 22, 26, 32, 48]

What it represents: Numeric intervals group observations to reveal their distribution.
How it differs: Bar charts use categories; histograms use numeric intervals.
When to use it: Inspect concentration, spread and long tails in delivery times.
Conditions and pitfalls: Disclose bin boundaries. For unequal widths, make area proportional to frequency.

Creation instruction

Create a chart using this fictional data. ID 1–12; Delivery time · min [8, 12, 14, 15, 16, 17, 18, 20, 22, 26, 32, 48]. Histogram. Inspect concentration, spread and long tails in delivery times. Disclose bin boundaries. For unequal widths, make area proportional to frequency. Bin width · minutes 10; [0,10), [10,20), [20,30), [30,40), [40,50).

Box plot

Distribution

Example data · ID 1–12; Delivery time · min [8, 12, 14, 15, 16, 17, 18, 20, 22, 26, 32, 48]

What it represents: Median, quartiles, whiskers and outside points summarize a distribution.
How it differs: A histogram shows the shape. A box plot can conceal multiple peaks.
When to use it: Compare delivery-time location and spread across groups.
Conditions and pitfalls: State the quartile and whisker conventions; outside points are not automatically errors.

Quartiles use linear interpolation; whiskers end at observations within 1.5 IQR. The outside point is 48 min.

Creation instruction

Create a chart using this fictional data. ID 1–12; Delivery time · min [8, 12, 14, 15, 16, 17, 18, 20, 22, 26, 32, 48]. Box plot. Compare delivery-time location and spread across groups. State the quartile and whisker conventions; outside points are not automatically errors. Quartiles use linear interpolation; whiskers end at observations within 1.5 IQR. The outside point is 48 min.

Scatter plot

Relationship

Example data · Distance · km 1–12; Delivery time · min [8, 12, 14, 15, 16, 17, 18, 20, 22, 26, 32, 48]

What it represents: Horizontal and vertical positions show the relationship between two numeric variables.
How it differs: Lines also imply point order. Scatter plots leave observations unconnected.
When to use it: Explore distance versus delivery time.
Conditions and pitfalls: Label axes and units; correlation alone does not establish causation.

Creation instruction

Create a chart using this fictional data. Distance · km 1–12; Delivery time · min [8, 12, 14, 15, 16, 17, 18, 20, 22, 26, 32, 48]. Scatter plot. Explore distance versus delivery time. Label axes and units; correlation alone does not establish causation.

Bubble chart

Relationship

Example data · Distance · km 1–12; Delivery time · min [8, 12, 14, 15, 16, 17, 18, 20, 22, 26, 32, 48]; Circle area = parcels 4 / 9 / 16 / 25

What it represents: A third quantity is encoded by circle area on a scatter plot.
How it differs: Scatter plots encode two quantities by position; bubbles also require reading size.
When to use it: Compare distance, delivery time and parcel count.
Conditions and pitfalls: Make area, rather than radius, proportional to value; disclose the size scale and overlap.

Creation instruction

Create a chart using this fictional data. Distance · km 1–12; Delivery time · min [8, 12, 14, 15, 16, 17, 18, 20, 22, 26, 32, 48]; Circle area = parcels 4 / 9 / 16 / 25. Bubble chart. Compare distance, delivery time and parcel count. Make area, rather than radius, proportional to value; disclose the size scale and overlap.

Ranked bar chart

Ranking

Example data · A=25, B=40, C=35; Share · %

What it represents: Sorting bars by value reveals rank and differences.
How it differs: Unsorted bars retain an existing order. Sorting destroys chronological order.
When to use it: Identify leading products or departments and their margins.
Conditions and pitfalls: Define ties and avoid sorting a time or process sequence.

Creation instruction

Create a chart using this fictional data. A=25, B=40, C=35; Share · %. Ranked bar chart. Identify leading products or departments and their margins. Define ties and avoid sorting a time or process sequence.

Waterfall chart

Flow

Example data · Amount 100; Δ +30, −20, +10; Σ 120

What it represents: Successive increases and decreases bridge an initial value to a final total.
How it differs: Stacked bars show components; a waterfall shows cumulative changes.
When to use it: Explain a budget or profit bridge.
Conditions and pitfalls: Distinguish the start, changes and total; reconcile their arithmetic.

Creation instruction

Create a chart using this fictional data. Amount 100; Δ +30, −20, +10; Σ 120. Waterfall chart. Explain a budget or profit bridge. Distinguish the start, changes and total; reconcile their arithmetic.

Sankey diagram

Flow

Example data · A→C=40, A→D=20, B→C=10, B→D=30; Amount

What it represents: Band width represents quantities flowing between sources and destinations.
How it differs: A flowchart shows steps or relationships; a Sankey quantifies each route.
When to use it: Explore transfers or resource allocation.
Conditions and pitfalls: Use consistent units and disclose source, destination and loss balances.

Band width is proportional to flow. A sends 60, B sends 40; C receives 50 and D receives 50.

Creation instruction

Create a chart using this fictional data. A→C=40, A→D=20, B→C=10, B→D=30; Amount. Sankey diagram. Explore transfers or resource allocation. Use consistent units and disclose source, destination and loss balances.

Coverage by purpose

Choose a purpose	Included	Not yet included
Comparison	Bar chart	2
Change over time	Line chart, Area chart	2
Part to whole	100% stacked bar chart, Pie chart	2
Distribution	Histogram, Box plot	3
Relationship	Scatter plot, Bubble chart	2
Ranking	Ranked bar chart	2
Flow	Waterfall chart, Sankey diagram	2

Out of scope · Maps, relationship diagrams and specialist 3D statistical surfaces.

Sources for terms and conditions

Other visual expressions

Web Design Atlas · Hierarchy Visualizer · Circle Visualizer