scaleUtc: ticks, nice and padding
Everything here uses UTC, so the printed values are the same on every computer.
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?
Console
(nothing was printed)Expected console output
domain: [ 2025-01-01T00:00:00.000Z, 2025-12-31T00:00:00.000Z ]
18 July -> 272.0 px invert(250) -> 2025-07-02T00:00:00.000Z
year, count 10 12 ticks, first gap 744 h, labels: 2025 | February | March
year, count 5 4 ticks, first gap 2160 h, labels: 2025 | April | July
two weeks 15 ticks, first gap 24 h, labels: June | Mon 02 | Tue 03
one day 9 ticks, first gap 3 h, labels: June | 03 AM | 06 AM
every 3 months: 2025-01 2025-04 2025-07 2025-10
nice(): 2025-03-01 to 2025-11-01
nice(week): 2025-03-09 to 2025-10-12
padded 3 days: 2024-12-29 to 2026-01-03
domain from text: [ Invalid Date, Invalid Date ] -> NaN
text given to a Date domain: undefined