The NaN hunt: which datum, from which raw row?
The two bars are simply missing: the picture shows three bars and no warning on the page. Only the console and the hunt tell you. d3.max skips NaN, which is why the scale still looks sane.
Charts fail in four ways: they show NaN, they show nothing, they look blurry, or they look fine and are wrong. You learn one method (reproduce, shrink, observe, guess, change one thing) and apply it to each failure with real error messages.
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.
Write a function findBadMarks(svg) that returns the elements whose attributes contain NaN, undefined or Infinity, and log each element's datum. Test it on the first example.
A colleague says "my line chart shows nothing". Write the five questions you would ask or checks you would run, in order.
Write setupCanvas(canvas, w, h) that uses window.devicePixelRatio and returns a context where you draw in CSS pixels.
Explain it without notes
A bar chart is missing two of five bars. How do you find out why?
An SVG chart is blank and the console is empty. What do you check, in what order?
Text on a canvas chart is blurry on a phone but sharp on your laptop. Why?
How can a chart be wrong without any error?
Preview
Console
Nothing logged yet.Expected console output
Error: <rect> attribute height: Expected length, "NaN".
Error: <rect> attribute height: Expected length, "NaN".
rects with NaN: 2 of 5
bad datum: {"day":"Wed","rides":"NaN"} | raw row: {"day":"Wed","rides":"n/a"}
bad datum: {"day":"Thu","rides":"NaN"} | raw row: {"day":"Thu","ride":"3742"}
max of rides: 3992