Using D3 for the first time

📦 Installing D3.js

Installing D3.js is straightforward: it works like any JavaScript library using npm.

If you're not familiar with this step, I strongly recommend going through the npm lesson in Module B. Otherwise, just type this in your terminal at the root of your project:

npm install d3

That's it! D3 is now part of your project. You can verify by checking your package.json: you should see "d3" listed under dependencies.

On top of that, all the d3 functions are basically now copy-pasted inside the node_modules folder of your project!

🔌 Importing and using functions

Once the library is installed, you can import it in any component of your React application using an import statement. Once more, we already covered this in depth in the npm lesson in Module B

import * as d3 from "d3";

This gives you access to every D3 function through the d3 namespace. For example, you can compute the maximum value of an array thanks to the max function:

import * as d3 from "d3";

const data = [4, 8, 15, 16, 23, 42];

const maxValue = d3.max(data);
// 42

Or create a scale that maps data values to pixel positions — something we'll use in almost every chart:

import * as d3 from "d3";

const scale = d3.scaleLinear()
  .domain([0, 100])   // data goes from 0 to 100
  .range([0, 500]);   // pixels go from 0 to 500

scale(50);  // 250
scale(75);  // 375

Don't worry about understanding scales fully yet — there's a whole module dedicated to them! The key takeaway is: import D3, call a function, get a result. That's the pattern.

📐 Full bundle or individual modules?

The import * as d3 from "d3" syntax loads the full D3 bundle → all the core modules at once.

But D3 is modular by design, so you can also install individual modules:

// Install only the scale module
npm install d3-scale

Which means you then have to import functions from each module specifically:

// Import only what you need
import { scaleLinear } from "d3-scale";

const scale = scaleLinear()
  .domain([0, 100])
  .range([0, 500]);

Both options make sense, depending on the situation!
Here's a quick comparison:

In this course we'll mostly use the full bundle because it's simpler and lets you explore all functions without worrying about which module they come from.

🎥 Video recap