A scatter plot of 365 days with hand-made axes
The code is inside an async function because this example has no import, so it is a classic script. The lone dot low at about 20 degrees is the 14 August outage.
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
x ticks: 5 10 15 20 25
y ticks: 0 1000 2000 3000 4000 5000
Dots: 365
Dots that share a pixel with another dot: 14