The margin convention: a frame inside an SVG
The grey area is the margin. Axis labels will later live there.
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
Plot area: 344 x 160
Frame starts 56 px from the left and 20 px from the top of the SVG