Edge cases: what a scale returns for odd input
The last two lines are the course's NaN guard doing its job: the example prints the browser's two SVG errors on purpose, so the page shows no dots.
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
0 -> 0
2190 -> 250
"2190" -> 250
null -> undefined
undefined -> undefined
NaN -> undefined
"n/a" -> undefined
Infinity -> NaN
-1 -> -0.1141552511415525
domain [0, 0]: 250 250 250
domain [0, NaN]: NaN
unknown(0): 0
Error: <circle> attribute cx: Expected length, "undefined".
Error: <circle> attribute cx: Expected length, "NaN".