A band scale for 25 stations, and its edge cases
The band scale decides each row's start and height; a linear scale decides each bar's length.
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
step: 16.13 bandwidth: 12.90 first: S01 0 last: S25 387.10
no padding: step 100.0 bandwidth 100.0 starts 0.0, 100.0, 200.0
paddingInner(0.5): step 120.0 bandwidth 60.0 starts 0.0, 120.0, 240.0
padding(0.5): step 85.7 bandwidth 42.9 starts 42.9, 128.6, 214.3
outer 1, align 0: step 60.0 bandwidth 60.0 starts 0.0, 60.0, 120.0
outer 1, align 1: step 60.0 bandwidth 60.0 starts 120.0, 180.0, 240.0
unknown station: undefined
duplicates: [ 'a', 'b' ]
number 2: 100 text "2": undefined
empty domain: step 400 bandwidth 400 position undefined
TypeError: stationsOnly.unknown is not a function