A day is not always 24 hours
Every line names its time zone, so this prints the same everywhere. scaleTime would print what your own clock does, so the course never logs it.
A time scale maps dates to positions and picks calendar-aware ticks (months, weeks, days, hours). The hard part is time itself: scaleTime follows the viewer's clock and scaleUtc follows UTC, and a day is not always 24 hours.
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.
Make a scale for June 2025 (UTC) over 480 pixels and print the pixel for 15 June at noon. Then print the ticks for every Monday as ISO dates.
Write dayLabel(date) that prints a daily row's date as 30 Mar in every viewer's time zone.
Explain it without notes
What is the difference between scaleTime and scaleUtc, and which fits daily.csv?
How does D3 choose between monthly and 3-monthly ticks?
Why was 30 March 2025 only 23 hours long in Ardenvale?
Preview
Console
Nothing logged yet.Expected console output
the instant: 2025-03-30T00:00:00.000Z
UTC writes it as 30 Mar
Asia/Kolkata writes it as 30 Mar
Pacific/Auckland writes it as 30 Mar
America/New_York writes it as 29 Mar
Atlantic/Azores writes it as 29 Mar
clock at 00:59Z on 30 March: 23:59 GMT-1 | at 01:00Z: 01:00 GMT+0
clock at 00:59Z on 26 October: 00:59 GMT+0 | at 01:00Z: 00:00 GMT-1
28 Mar: 24 h | 29 Mar: 24 h | 30 Mar: 23 h | 31 Mar: 24 h | 24 Oct: 24 h | 25 Oct: 24 h | 26 Oct: 25 h
scaleUtc day ticks, hours apart: 24 24 24 24 24