← 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.