Nested joins: four stations by twelve months
S22 has rows for January to April with 0 rides: the bars are there with height 0, so nothing is missing, and the 12 rects per station are 12 data rows.
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
groups: 4 - bars: 48
a group's datum: S01 with 12 rows
a bar's datum: { station: 'S01', month: 'Jan', rides: 2994 }
S22 Jan-Apr heights: 0,0,0,0 (zero, not missing)
S22 May height: 8.485