The problem

Life is tough!

We've built many graphs already, and you should be able to draw almost anything on a screen by now.

However, our datasets have always looked perfect so far. A clean JavaScript object that always looked a bit like this:

const data = [
  { country: 'USA', value: 12 },
  { country: 'France', value: 9 },
  { country: 'Japan', value: 7 },
];

Sometimes life is as simple as this. But often, a whole bunch of complexity shows up. Here are the problems you can run into, with a link to the lesson that explains how to fix each one.

→ Data is not always in JSON

Data can come in many other formats: CSV, XLSX, GeoJSON, and more. Each format needs its own loader and parser.

→ Data can be messy

Real data has missing values, the wrong types, and the wrong shape. Some data wrangling is almost always necessary, and sometimes you even have to merge several files together.

→ Data can be remote

A lot of applications visualize dynamic data. You might want to track the evolution of the Bitcoin price, or query your company's database for the latest sales.

In that case, your app fetches the data from another web server and displays it once it arrives. This brings new concerns: loading states and error handling.

→ Data can be heavy

You cannot ship a huge dataset to the frontend. When that happens, you need a backend that pre-aggregates the data and serves only what the chart needs through an endpoint.

→ Stats can be hard

What if you need to run complex statistics or a machine learning model? JavaScript alone is not always the right tool. You can run R or Python directly in the browser with webR or Pyodide.