Phase 6Intermediate7 of 19 in Data Visualization

Scales and Axes

How D3 turns numbers, dates and categories into positions and colours, how it picks round tick numbers, and how to draw axes that stay honest.

Every chart so far used a small piece of arithmetic: "value ÷ biggest × space". That rule has a name, a scale, and D3 has a whole family of them. In this phase you learn what each one does inside, so you can choose the right one and predict what it returns for odd inputs: zero, negative, missing, or text.

Then you draw axes: the tick marks and labels that let a reader turn a position back into a number. At the end you rebuild the dashboard's yearly rides line with a time scale, a linear scale and real axes, in two small files you can reuse.

Phase 6 · the story

Tomás, founder

“Why does my spreadsheet chart say 0, 730, 1,460 and the dashboard say 0, 1,000, 2,000? Which one is right?”

Before the board meeting, Tomás puts two charts of the same year of rides side by side. The dashboard's line chart (Phase 3 and 4) has an axis that reads 0, 1,000, 2,000 up to 5,000. The chart he made in a spreadsheet reads 0, 730, 1,460, 2,190, because it cut the busiest day, 4,380 rides, into six equal parts.

Neither is wrong, but only one is readable at a glance. Nobody can say where 1,000 sits on the spreadsheet axis. Tomás asks the question a board member will ask: "Why those numbers?" The team's own answer is a rule copied into one chart's code (niceTicks), and the other charts have no such rule.

In this phase the team learns how D3 chooses round numbers, how it maps dates and categories, and how an axis is built from a scale. By the end, the dashboard's rides-over-time chart runs on shared scales and axes, so Tomás can say why every number is where it is.

In this phase

You will learn

Create linear, log, square-root, time, band and colour scales, and say what each returns for odd inputs
Explain how D3 picks round tick numbers, and what nice() does to a domain
Draw and update an axis with gridlines, formatted labels and a dark-mode-ready colour
Build the dashboard's rides-over-time chart with real axes

You write code in

In your Vite project lumen-dashboard/ (run npm run dev), and in the editor on this page

Files you touch

src/charts/rides-line.js
src/parts/axis.js
src/main.js

0/7 · 0%

7 topics ~3 h 16 code blocks & diagrams

Start with the first topic

6.1

Linear Scales

A linear scale is a function that turns a number from your data (the domain) into a position on the page (the range), in a straight proportion. It also knows how to go backwards, how to stop at the ends, and which round numbers to print on an axis.

25 min 4 code practice

6.2

Log, Power, Square-Root and Diverging Scales

When numbers span many sizes, when a circle must show a value by its area, or when a colour needs a meaningful middle, a straight-line scale misleads. Log, power, square-root, symlog and diverging scales bend the rule the right way, and each has inputs it cannot take.

23 min 2 code practice

6.3

Time Scales

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.

22 min 2 code practice

6.4

Band and Point Scales

A band scale gives every category its own slot, with a start position and a width, so bars sit evenly with gaps between them. A point scale gives each category one position only. Both return undefined for a category they do not know.

21 min 2 code practice

6.5

Ordinal, Quantize, Quantile and Threshold Scales

Discrete scales return one of a few fixed answers, usually colours. Ordinal scales turn categories into colours. Quantize, quantile and threshold scales turn numbers into classes, and each draws the class borders in a different place, which changes what the chart says.

20 min 2 code practice

6.6

Axes

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.

20 min 2 code practice

6.7

Build: Rides Over Time with Real Axes

The dashboard's year-of-rides line is rebuilt with a time scale, a linear scale and D3 axes, in two small reusable files. It has nice ticks, pale gridlines, month labels, an empty state, gaps for missing days and a summary for screen readers.

28 min 2 code practice

Practise this phase

Hands-on exercises: write the code, see your page live, and press Check to have it tested automatically.

Size a bar with a scale

Thursday 5 June had 3,742 rides, and the busiest day of the year had 4,380. The bar #thu should be as long as a linear scale gives for 3,742 when 0 to 4,380 rides map to 0 to 500 pixels.

Intermediate