A chart picker with the awkward cases
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.
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.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 4 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
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?
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?
Preview
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