Nice ticks on awkward ranges, and one typo that squashes a chart
The typo is invented for the demonstration (the real data has no such value). The orange dot is Sunday.
A scatter plot puts one dot per row, with two numbers deciding where it sits. To read it, the chart needs axes: tick marks at round numbers, labels and gridlines. You write the rule for choosing nice ticks yourself, and meet overlapping dots and an outlier that squashes everything else.
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 5 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Use niceTicks on the range 12 to 87 with 5 ticks. Work out the answer by hand, then check it by running the function.
Add vertical gridlines to the scatter plot at every x tick, and say how you keep the plot readable.
Draw a dashed line at 3,000 rides (a made-up target) and a small label Target. Where does the label go so that it does not cover a dot?
Explain it without notes
How does the 1-2-5 rule turn the range 0 to 4,380 and a wish for 5 ticks into the ticks 0, 1,000 … 5,000?
Why do ticks and the scale have to come from the same numbers?
What does one outlier do to an axis, and what are your options?
Why round ticks with toFixed before printing them?
Preview
Console
Nothing logged yet.Expected console output
rides, 0 to 4380 [0,1000,2000,3000,4000,5000]
temperature [5,10,15,20,25]
tiny numbers [0,0.0002,0.0004,0.0006,0.0008,0.001]
negative to positive [-20,0,20,40,60]
huge [0,200000000,400000000,600000000,800000000,1000000000]
all equal (5, 5) [4,4.5,5,5.5,6]
empty data []
normal - axis to 4000 - the six normal days spread over 40.5 px
typo - axis to 40000 - the six normal days spread over 4.1 px