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.

Importing and using functions

Once the library is installed, you can import it in any component of your React application using this import statement:

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:

import * as d3 from "d3";

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

const max = 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 and import individual modules:

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

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

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

Here's a quick comparison:

Both approaches are perfectly valid. In this course we'll mostly use the full bundle (import * as d3 from "d3") because it's simpler and lets you explore all functions without worrying about which module they come from.