Log and symlog on 720 hours of rides
The filter on Number.isFinite keeps NaN out of the page: without it the 42 zero hours would print 42 Expected length errors.
When numbers span many sizes, when a circle must show a value by its area, or when a colour needs a meaningful middle, a straight-line scale misleads. Log, power, square-root, symlog and diverging scales bend the rule the right way, and each has inputs it cannot take.
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 function that turns a station's ride total into a circle radius, for a largest radius of 30 pixels, and prove that the busiest station's area is 5.59 times the quietest's.
Bike odometers range from 194 to 8,902 km. Create a log scale for 0 to 300 pixels and print the pixel of 194, 1,000 and 8,902. What does scaleLog().domain([0, 8902]) give for 1,000?
Explain it without notes
Why does a circle chart need scaleSqrt for the radius?
Why can a log scale not start at 0, and what are your options for data that has zeros?
What does the middle number of a diverging domain mean, and how can you choose it?
Preview
Console
Nothing logged yet.Expected console output
hours: 720 zero-ride hours: 42 busiest hour: 599
0 linear 0.0 log NaN symlog 0.0
1 linear 0.5 log 0.0 symlog 32.5
10 linear 5.0 log 100.0 symlog 112.4
100 linear 50.0 log 200.0 symlog 216.4
599 linear 299.5 log 277.7 symlog 299.9
log ticks: 1 10 100 1000 (ticks() gives 28 )
log domain [0, 600] -> NaN all-negative domain [-10, -1] -> 156.9 [-10, 10] -> NaN
linear dots: 720 skipped: 0
log (the 0s cannot be drawn) dots: 678 skipped: 42
symlog dots: 720 skipped: 0