← Back to Module 02

Scale Function Playground

See how a linear scale maps domain values to pixel range values in real time.

Domain (data values)

Range (pixel values)

(bottom)
(top)
500 → linearScale() → 190
Domain position
200 800
Range position (pixels)
350 (bottom) 30 (top)
Try it: Change the domain to [0, 100] and the range to [0, 800] for a simple 1:8 mapping. Then swap the range to [800, 0] to see inverted y-axis behavior — notice how increasing domain values produce decreasing pixel values, exactly what you need for canvas charts.

Time Scale Concept

A time scale works the same way, but the domain contains Date objects instead of plain numbers. Internally, dates are millisecond timestamps, so the math is identical:

Jan 16, 2026 → timeScale() → 400 px
Jan 1 Jan 8 Jan 15 Jan 22 Jan 31
Connection to D3: Our hand-built linearScale() is exactly what d3.scaleLinear().domain([min, max]).range([low, high]) does. And our time scale concept maps directly to d3.scaleTime(). Understanding the math here means D3 scales will feel intuitive when you reach Module 09.