One week as a table and as bars
No library: plain JavaScript creates each SVG rectangle. Phase 5 lets D3 do this loop for you.
A chart turns numbers into shapes (lengths, positions, sizes, colours) so the eye can compare them in one look. It answers a question, and it can also hide or bend the answer if it is drawn carelessly.
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.
Change the first example so the bars are drawn from the top down in order of rides (busiest first). Hint: sort a copy of week before drawing.
Write a function barLength(value, biggest, space) that returns the bar length and returns 0 instead of NaN when biggest is 0. Test it with (2979, 3992, 340), (0, 0, 340) and (5, 10, 200).
Explain it without notes
What does it mean that a chart "turns numbers into shapes"? Give an example from this topic.
When is a table better than a chart?
Why must bars start at zero? Use the numbers from the third example.
What did the 365-day line show that the table of numbers didn't?
Preview
Console
Nothing logged yet.Expected console output
Quietest day: Mon 2979
Bars drawn: 7