Modules that never touch the page
d3.version is undefined in D3 7: check the installed version with npm ls d3 in your project.
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
scale of 2190: 150
format: 933,651
line: M0,10L20,30L40,20
max of [3, 9, 4]: 9
max of []: undefined
extent of []: [ undefined, undefined ]
mean of []: undefined
sum of []: 0
d3.version: undefined
typeof d3.default: undefined