Grouped bars with nested bands, and a point scale
Each month is a <g> moved to its outer band; the inner band places its two bars.
A band scale gives every category its own slot, with a start position and a width, so bars sit evenly with gaps between them. A point scale gives each category one position only. Both return undefined for a category they do not know.
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.
Make a band scale for the six districts over 300 pixels with 10 percent padding. Print the bandwidth and the start of "Hillcrest" (the fifth).
Write a function that takes the ids you want to show and returns a band scale, but keeps the bar width at 20 pixels however many ids there are, by changing the range height.
Explain it without notes
What do step() and bandwidth() return, and how do they differ?
What does paddingOuter do that paddingInner does not?
How do you draw grouped bars?
Preview
Console
Nothing logged yet.Expected console output
July: { ebike: 39251, pedal: 78552 } total ebike share: 33.3%
month band: 34.6 inner bar: 16.0 Jul pedal x: 300.2 ebike x: 317.0
point: 0 100 300 step 100 bandwidth 0
point padding(0.5): 37.5 one category: 150
bars drawn: 24