Data wrangling


Raw data rarely matches what your chart expects. Learn to reshape, group, and aggregate it with d3.group, d3.rollup, and the array methods you already know.

Members only
5 minutes read

Outline (draft)

  • The mismatch: APIs and CSVs hand you raw rows. Charts want nested groups, totals, sorted lists. Wrangling is the bridge.
  • Recap of array methods students already know: map, filter, reduce, sort. The 80% case.
  • d3.group: array β†’ Map keyed by an accessor. Useful for one-line "give me a series per category".
  • d3.rollup: same as group but with a reducer step. Compute totals, averages, counts per group in a single call.
  • d3.cross and d3.cumsum: short mention for stacked or combinatorial layouts.
  • Where to wrangle: once with useMemo, not on every render. Show what happens without it.
  • Pitfall: mutating the original array. Always return new structures.

Oh no! 😱

This lesson isn’t available just yet.

Take a look at the status badges next to each lesson in the sidebar to see when it’s coming out.

Thanks for your patience! πŸ™