A blank SVG and a blurry canvas, diagnosed with numbers
None of the three blank SVGs raised an error. The numbers (size, marks, visible) tell them apart in one look. The canvas ratio is a parameter here so that you see the same sizes whatever your own screen's ratio is (1, 2 or 3).
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
no size : svg 300x150, marks 1, visible 0
typo selection empty: true | #b marks: 0
off-screen: svg 200x60, marks 2, visible 0
ratio 1: backing store 200x60 for a 200x60 box
ratio 2: backing store 400x120 for a 200x60 box
ratio 3: backing store 600x180 for a 200x60 box