A linear scale by hand: y = m·x + b
Six values, one rule. The dots for 4,000 and 4,380 are close because the scale is honest: they are only 380 rides apart.
Every chart needs two things before it draws a single mark: a frame with room around it for axis labels (the margin convention), and a rule that turns a data value into a pixel position (a scale). You write both by hand, including the inputs that break them.
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 5 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
An SVG is 600 × 300 with margin { top: 10, right: 20, bottom: 40, left: 60 }. What are innerWidth and innerHeight, and where on the page does the plot area's top-left corner sit?
Write the x scale for twelve months (index 0 to 11) across a plot area 460 pixels wide, using makeScale. Where does July (index 6) land?
A y scale has the domain [-20, 60] and the range [160, 0]. Work out m, b and the position of 0.
Explain it without notes
What are the outer size, the margins and the plot area, and why does the plot area get a translate?
Work out m and b for a y scale from the domain [0, 4380] to the range [160, 0]. What does m being negative mean?
What happens to the scale when all values are equal, and what does the browser do when the result reaches an SVG attribute?
Why does D3's scaleLinear put a single value in the middle of the range?
Preview
Console
Nothing logged yet.Expected console output
m = -0.03653 b = 160
0 rides -> y = 160.0
1000 rides -> y = 123.5
2000 rides -> y = 86.9
3000 rides -> y = 50.4
4000 rides -> y = 13.9
4380 rides -> y = 0.0
y = 80 means 2190 rides