Update an axis, and recolour it
transition().end() resolves when the animation finishes, so the printed ticks are the final ones, not a mid-animation guess.
An axis is the ruler of a chart: a line, tick marks and labels built from a scale. d3.axisBottom(scale) draws it in one call, and a handful of settings control the tick count, the labels, gridlines, colours and updates.
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 left axis for rides (0 to 4,380) with 5 ticks, labels like 1,000, gridlines 460 pixels long, and no domain line.
Write setAxis(g, axis, domain) that updates a bottom axis to a new domain with a 300 ms transition, and returns a promise that resolves when it is done.
Explain it without notes
What does d3.axisBottom(x) add to the page?
How do you draw gridlines with an axis?
How do you recolour an axis for dark mode?
Preview
Console
Nothing logged yet.Expected console output
year: 4 ticks: 2025 April July October
summer: 3 ticks: June July August
narrow: 3 ticks, last tick at translate(205.55494505494505,0)
stroke: currentColor text fill: currentColor group colour: rgb(29, 43, 54)
after style(color): group colour: rgb(230, 237, 243) the attributes are still: currentColor