PHASE 2Beginner ~26 min· topic 3 of 6

Topic 2.3

Choose the Chart from the Question

In one line

Start from the question, not from the chart type. Each kind of question (compare, change over time, part of a whole, distribution, relationship, ranking, where, flow) has a chart that answers it fastest, and sometimes the best answer is a table or one big number.

Think of it like this

A toolbox. Before you reach for a tool you ask what the job is: tighten a screw, cut a plank, measure a gap. Nobody picks the hammer first and then looks for a nail. Charts are tools in the same way. "Which chart looks good?" is the wrong first question; "what do I want the reader to see?" is the right one.

Words you'll meet

New words in this topic, in plain English. Come back here whenever one feels fuzzy.

ranking: An ordering of items from most to least on one measure, such as stations from emptiest to fullest.
distribution: How values spread out: where most of them lie and how far the extremes reach.
histogram: Bars that count how many values fall in each range (bin), such as trips of 0–5, 5–10, 10–15 minutes.
scatter plot: One dot per item, placed by two numbers (x and y), to see if they move together.
part of a whole: A set of parts that add up to a total, such as each district's share of all rides.
KPI: A key number shown big with a label, such as "Rides today: 3,992".
correlation: A measure from -1 to 1 of how closely two numbers move together. It does not prove one causes the other.

Step by step

01Start with Priya's pie

The chart on the wall shows how the 25 stations' bikes are split: each slice is one station's share of all 315 bikes standing at stations at 08:15 on 18 June 2025 (from status.json). That is a legitimate question ("where is the stock?"), but it is not Priya's.

Even for that question you cannot read it: 25 colours, neighbouring slices that look the same, and no way to find one station.

02Same numbers as bars

Bars put each station on its own row and make length carry the number: rides, bikes, anything. You can now find Windmill and compare any two stations by the gap between their bar ends. The order is still by station number, which has no meaning for Priya.

03Fix the measure: how full, not how many

"Running out" depends on size. Clock Tower has 6 bikes in 30 docks, only 20% full. Quay has 12 bikes in 12 docks, 100% full. Chapel (10 bikes in 24 docks, 42% full) and Campus (10 in 12, 83% full) hold the same 10 bikes, so their raw bars are equal even though one is nearly empty. The right measure is bikes divided by docks.

04Sort so the answer is at the top

Sorting by the measure the question asks about turns the chart into a ranking: the emptiest stations come first, so Priya reads from the top and stops when the bars get long. Ties (Rope Walk and West Gate are both 35%) keep their original order.

05Highlight the answer, mute the rest

The five emptiest stations get the accent colour and a label with the real numbers ("6 of 30"). Everything else is a quiet grey. The chart now has one message, and the title can say it: "Five stations are below 40% full". Topic 2.4 explains why one highlighted colour works.

Try it yourself

1
Change a case in the picker
In the first example, change parts: 2 to parts: 5 in the "ebike vs pedal" case. The answer changes from one stacked bar to sorted bars of shares, because five parts cannot be compared by angle. Then add negative: true to see what a negative part does.
2
Ask about too many items
In the first example, add this case to cases: { q: "Rides by station, 40 of them", goal: "ranking", items: 40 }. The Console prints Rides by station, 40 of them -> sorted bars, top 10 + table. Past 25 items the picker stops offering one chart of everything, because the labels and bars can no longer be read at once.

Code & diagrams

Try it: interactive

Pick the chart from the question

Choose a question, then try the follow-up choices (how many items, whether there are negatives or gaps). Watch the answer change and see the chart it builds from Lumen data.

A chart picker with the awkward cases New tab

Four of these rows are not charts at all: a table, a sentence, a big number and an empty-state message. Choosing not to draw is part of the skill.

Preview

Press Run to see the page.

Console

Nothing logged yet.

Expected console output

Which stations have the most rides? -> sorted horizontal bars
Which of 5 stations has the most rides? -> sorted horizontal bars
How did daily rides move in 2025? -> line
Rides on 2 June vs 3 June -> two numbers in a sentence
Share of rides per district -> sorted bars of shares
Share of ebike rides vs pedal -> one stacked bar (or a pie)
How long are trips? -> histogram
Do warm days have more rides? -> scatter plot
What was the exact total on 18 July? -> table
How many rides today? -> big number
Stations opened this month -> empty-state message
Net change by district (some negative) -> bars

One data set, three questions, three charts New tab

A correlation near 1 says the dots follow a line. It does not say warm weather causes rides: summer also has longer days and more tourists.

Preview

Press Run to see the page.

Console

Nothing logged yet.

Expected console output

busiest weekday on average: Fri 2771
busiest day of the year: 2025-07-18 4380
temperature vs rides, correlation: 0.84

Break it on purpose

Errors are the best teachers. Make each change, read the error, guess what went wrong, then reveal the answer.

Break #1

Draw a line between unordered stations

In a scratch example, draw a polyline through the 2025 ride totals of the 25 stations in alphabetical order of name: [38288, 41167, 53853, 52086, 22802, 35486, 29273, 36375, 35963, 58090, 55536, 30312, 37662, 42188, 16446, 41460, 38737, 58584, 49968, 37094, 18611, 36120, 17505, 39559, 10486] (Bridge, Campus, Chapel, Clock Tower, Ferry, … West Gate, Windmill), with x = 10 + 22 × index and y = 130 − total ÷ 60000 × 120.

terminal

$ Preview

── what you'll see ──

A jagged line of 25 points that climbs and falls 24 times (11 steps up, 13 down) and ends lower than it started: after Quay's peak of 58,584 it zig-zags down to Windmill's 10,486. No error is printed. The eye reads "up, up, down, then falling away" as a trend, but moving from Clock Tower (52,086) to Ferry (22,802) is only a step along the alphabet, not along time.

Myth vs fact

Myth

There is one best chart for every dataset.

Fact

The best chart depends on the question. The same 365 days answer "what was the busiest weekday?" with bars, "how did the year go?" with a line, and "does weather matter?" with a scatter plot.

Myth

A pie chart is fine as long as the slices are labelled.

Fact

Labels do not fix the reading problem: angle is hard to compare, and 25 labels collide. Use a pie, if at all, for 2 to 4 parts of one whole.

Pro corner

Extra depth for experienced readers. New to this? Skip it for now and come back later.

▸
The Financial Times' Visual Vocabulary, Data to Viz and Datawrapper's chart guides all organise charts by the relationship in the data (comparison, change, part-to-whole, distribution, correlation, spatial, flow). Use them as a lookup once you know your question, and notice that they agree more than they differ.
▸
A line chart is more than "time on x": it is a claim that the values in between are meaningful and that the order is natural. Monthly totals of a counted quantity are usually fine as a line, but daily counts of a rare event (3 incidents on 4 days of the year) read better as bars or dots.

Remember this

1
The problem this solves: Priya asked which stations run out of bikes, and the team drew a pie of 25 slices. A pie shows how a whole splits into parts. Priya's question is a comparison and a ranking, so a pie answers a question nobody asked. Choosing from the question prevents that.
2
Ask one question per chart. Write the question as a sentence before you draw: "Which stations are emptiest right now?" That sentence also gives the chart its title and tells you what to sort by and what to highlight. If a chart tries to answer three questions, split it into three charts. One chart, one message.
3
The question to chart table. Compare amounts across categories: bars (sorted). Change over time: a line, or bars for a few periods. Part of a whole: one stacked bar or a pie only for 2 to 4 parts that add up to 100%. Distribution (how values spread): a histogram. Relationship between two numbers: a scatter plot. Ranking: sorted bars or a dot plot. Where: a map. Flow (from A to B): a flow diagram or matrix. These are the most useful starting points; Phases 3 to 7 and 13 build each one.
4
When a table is better. If the reader needs exact values, or to look up one item among many, a table wins (Topic 0.2). A single number is better as a big number (a "KPI") with a label than as a chart with one bar. And if a chart would have two points, a sentence ("rides rose from 2,979 to 3,992") is often clearer. Charts earn their space by showing a pattern.
5
Know where each chart breaks. Pies need positive parts that add to a whole; a negative or missing part has no slice. Lines need an order along x (time); a line between unordered categories (stations) invents a trend that is not there. Bars need a zero baseline (Recall from Topic 2.2: length from a common baseline is the channel the eye reads best after position). 25 categories overwhelm colour and labels, so sort and show the top few, or use a table. Always decide what an empty dataset and a one-item dataset look like (a message, not a blank box).
6
Real teams have several readers. Priya wants rankings now, Tomás wants the yearly shape, Meera needs every chart to have its numbers as text too. So a dashboard is a set of charts, each answering one question, plus a plan that says which is which. You will write that plan in this phase's build.

Explain it without notes

Priya asks which stations run out of bikes. Which chart do you draw, how do you sort it, and what measure do you use?

When is a table or a single number better than a chart?

Why is a line chart wrong for the 25 stations' ride totals?

Practice

Write bikesNeeded(station) that returns how many bikes a station needs to reach 50% full, and 0 if it is already above 50%. Use it for { name: "Clock Tower", bikes: 6, docks: 30 } and { name: "Quay", bikes: 12, docks: 12 }.

Rides on 2 June and 3 June are 2,979 and 3,992. Which element do you draw, and what shows before the data loads?

Trade-offs

↔
A mixed dashboard (bars, line, scatter) answers more questions but asks the reader to switch reading modes. A few consistent charts, each with one message, are easier to scan.
↔
Showing exact numbers on the chart (labels) helps lookup but adds clutter. Label the few values that matter and keep the rest in a table or tooltip.

Done when you can

I write the question as a sentence before choosing a chart.
I can name the chart for comparison, change, part of a whole, distribution, relationship and ranking.
I know when to show a table, a big number or an empty-state message instead of a chart.
I can say where a pie, a line and a bar chart each break.
I choose the sort order on purpose, and use a ratio (how full) when size differs.