A linear scale: domain in, pixels out
The domain comes from the data (d3.max), the range from your layout. Phase 5's join draws one dot per day.
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
busiest day: 4380 rides -> 500 pixels
0 rides -> 0
439 rides -> 50.1
3,742 rides -> 427.2
5,000 rides -> 570.8 (outside the domain: the line keeps going)
invert(250) -> 2190 rides
clamped: 5,000 -> 500 and -300 -> 0
y(0) = 300 y(4380) = 0 y(2190) = 150
by hand, 3,742 -> 427.2
dots drawn: 14