Messy data


So far we've dealt only with clean, ready-to-use datasets. But real life is not like this. In practice you'll always have to prepare your dataset before it can be given to a React chart component.

This lesson is about data wrangling. It describes the main tools at your disposal to survive this annoying but necessary step.

Members only
5 minutes read

The unglamorous 90%

Anyone who has worked with data for a while will tell you the same thing: data preparation takes most of your time. The chart you build at the end is the visible 10%. Cleaning, reshaping, and sanity-checking the data is the unglamorous 90%.

Fortunately, JavaScript and D3 ship with a strong toolkit for this kind of work. This lesson walks through the operations you will reach for over and over.

Heads up: if you already wrangle data in R or Python, this part will feel slow and a little annoying. Three things to keep in mind:

  • It is the same mindset you already have: long vs wide format, missing value (NA) handling, reshaping, joining. Only the syntax changes.
  • AI is very good at this. Describe the shape you have and the shape you want, and let it write the boring transformation for you.
  • When you can, do the heavy preparation in R or Python and start from a clean dataset in D3. That is often the best option, but it is not always possible (data fetched live in the browser arrives however the API decided), so these skills still matter.

Oh no! 😱

It seems like you haven't enrolled in the course yet!

Join many other students today and learn how to create bespoke, interactive graphs with d3.js and React!

Enrollment is currently closed. Join the waitlist to be notified when doors reopen:

Or Login