What an axis builds, and long labels
d3.create("svg:g") makes a detached <g>, so the example can count an axis's ticks without drawing it. The 0.5 in the tick positions is the axis's half-pixel offset for sharp lines.
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
children: path.domain g.tick g.tick g.tick g.tick g.tick
domain path d: M0.5,6V0.5H400.5V6
first two ticks: translate(0.5,0) '0' | translate(91.82420091324201,0) '1,000'
tick line y2: 6 label y: 9 label dy: 0.71em
colours: currentColor currentColor on the group: 10 sans-serif middle
ticks(5): 5 ticks(10): 9 tickValues([0, 1000, 4380]): 3 tickValues([]): 0
domain [0, 0] -> [ '0.000000' ]
band axis ticks centred in their band: translate(50,0) translate(150,0) translate(250,0)
rotated labels: 6 wrapped lines: 12