Modules that change the page, and old code that fails quietly
A callback passed to d3.csv is read as a row converter, so nothing throws and the chart gets zero rows: the worst kind of failure.
D3 is a toolbox of small modules for turning data into pictures, not a chart library with a drawBarChart() button. Some modules only do maths and never touch the page; others change the page. Knowing which is which tells you what D3 can do for you and what you still write yourself.
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 summary(values) that returns { min, max, mean } using D3 and returns null for an empty array, so the caller must handle the empty case. Test it with [3, 9, 4] and [].
Look at this old line: d3.select("#chart").on("click", function () { console.log(d3.event.pageX); });. Say what is wrong in D3 7. (The fix comes in Topic 5.6.)
Explain it without notes
What is the difference between D3 and a chart library such as Chart.js?
Name two D3 modules that never touch the page and two that do.
Why does d3.csv(url, function (error, rows) {...}) return an empty array in D3 7 instead of throwing?
Console
(nothing was printed)Expected console output
drew: <svg width="160" height="24"><rect width="120" height="20" fill="#2a9d8f"></rect></svg>
d3.event: undefined
old callback ran 25 times (once per row); rows returned: 0
promise form: 25 rows, first: Quay