ticks, nice and tickFormat: why 0, 500, 1000
Both axes use the same scale, so every tick is at the right place. Only the numbers chosen differ.
A linear scale is a function that turns a number from your data (the domain) into a position on the page (the range), in a straight proportion. It also knows how to go backwards, how to stop at the ends, and which round numbers to print on an axis.
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 a y scale for a chart 300 pixels tall with a 40 pixel margin at the top and bottom, for rides from 0 to 4,380. What are y(0), y(4380) and y(2979)?
With x = d3.scaleLinear().domain([0, 4380]).range([0, 500]), which number of rides is at pixel 100? Which pixel does 3,000 rides get? Write the code that checks it.
Explain it without notes
What are the domain and the range of a scale? Give both for the rides bar chart.
Why does a y scale use range([height, 0])?
Why does d3.ticks(0, 4380, 10) return steps of 500, and what would it return for a count of 5?
Preview
Console
Nothing logged yet.Expected console output
ticks(0, 4380, 2) step 2000 -> 3 ticks
ticks(0, 4380, 5) step 1000 -> 5 ticks
ticks(0, 4380, 10) step 500 -> 9 ticks
ticks(0, 4380, 20) step 200 -> 22 ticks
count 0: [] one value: [ 5 ] reversed: [ 4000, 3000, 2000, 1000, 0 ]
nice(10): [ 0, 4500 ] nice(5): [ 0, 5000 ] nice(3): [ 0, 6000 ]
0.0 0.2 0.4 0.6 0.8 1.0 | 0% 20% 40% 60% 80% 100%
0 1,000 2,000 3,000 4,000 | 4k
0.1 * 3 = 0.30000000000000004 d3.ticks(0, 1, 10)[3] = 0.3
six equal parts: 0, 730, 1460, 2190, 2920, 3650, 4380
D3 ticks: 0, 500, 1000, 1500, 2000, 2500, 3000, 3500, 4000