A join that leaves NaN in the attributes
Without output this example would fail the course's NaN check: here the failure is the point. The browser prints one error per bad attribute, and the bars are in the page but have no size.
Bars are a join of an array with <rect> elements: selectAll("rect").data(rows).join("rect"), then attributes from d. Run the same function again with new data and the chart updates, grows, shrinks or empties. Nested joins build groups, and a wrong field name leaves NaN in the attributes.
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 draw(rows) for rows like { id, name, rides } that draws one <rect class="bar"> per row, keyed by id, with the width rides / 100. Say what the second call with a shorter array does.
Add a guard so that rows whose rides is not a finite number are left out, and log how many were left out.
Explain it without notes
Why can you call draw(data) many times and get one correct chart?
What does groups.select("rect") do for the data that groups.selectAll("rect") does not?
What is the difference between data() and datum()?
Preview
Console
Nothing logged yet.Expected console output
Error: <rect> attribute y: Expected length, "NaN".
Error: <rect> attribute y: Expected length, "NaN".
Error: <rect> attribute y: Expected length, "NaN".
Error: <rect> attribute height: Expected length, "NaN".
Error: <rect> attribute height: Expected length, "NaN".
Error: <rect> attribute height: Expected length, "NaN".
bars: 3
y of the first bar: NaN
datum.total: undefined