Zero is not missing: a station that had not opened yet
In the top chart, January to April look like a quiet station. In the bottom chart, they are marked as not applicable. The data was the same; the honest chart says more.
Build a bar chart from data with a loop: one SVG rectangle per row, with bar width and position worked out from the number of bars. Then meet the cases that break it: zero, negative and missing values, long names and sorting.
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 5 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Make the monthly bar chart show the value labels with a thousands separator (for example 117,803 instead of 118k), and say what happens to the layout on a 12-bar chart.
Write bandX(i, count, width, gapShare) that returns { x, barWidth } for bar i. Test it with (0, 12, 460, 0.2) and (11, 12, 460, 0.2).
What should the chart do for an empty array of rows? Write the check and the message.
Explain it without notes
How do you work out each bar's x position and width from the number of bars?
Why does a bar's y attribute not hold its height, and how do you draw a bar that goes below the zero line?
What is the difference between a value of 0 and a missing value, and how should each look in the chart?
Why measure the labels before choosing the left margin of a horizontal bar chart?
Preview
Console
Nothing logged yet.Expected console output
bars with height: 4 | zero-height bars (invisible): 4 | marked n/a: 0
bars with height: 4 | zero-height bars (invisible): 0 | marked n/a: 4