Wrong but looks fine: time zones, a cut baseline, unsorted data
The time-zone line is the same on every computer because both zones are named. A new Date(...) formatted with the computer's own zone would differ between a laptop in Ardenvale and one in another country (Topic 4.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?
Console
(nothing was printed)Expected console output
UTC day: 2025-01-15 | Ardenvale (Atlantic/Azores) day: 2025-01-14
d3.utcFormat day: 2025-01-15 (always the UTC day, on every computer)
baseline 0: Tue looks 1.3x Mon, data says 1.3x
baseline 2900: Tue looks 13.8x Mon, data says 1.3x
sorted by date: false | nearest to 1 June finds index 0 (should be 1)