The scale on awkward data: empty, one value, all equal, negative
The last line is the point: the unguarded scale returns NaN, and the browser refuses to draw the bar and prints its real error.
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
normal domain 1193 4380 | m = -0.050203953561342954 | first value -> 160
negative domain -20 60 | m = -2 | first value -> 160
one value domain 3000 3000 | m = -Infinity | first value -> NaN
all equal domain 2000 2000 | m = -Infinity | first value -> NaN
empty domain Infinity -Infinity | m = 0 | first value -> (no values)
safe, one value 3000 -> 80
Error: <rect> attribute height: Expected length, "NaN".