Introduction to D3

D3.js (Data-Driven Documents) is a powerful JavaScript library for creating interactive data visualizations in the browser.

For the longest time, I have been wanting to write a complete guide on D3.js. Not just another online course or dry tutorial, but something practical,a guide where you can interact with the examples, edit them on the fly, and see exactly what happens.

This course, Practical D3.js, is my way of finally doing that. In the chapters and lessons that follow, we’ll look at what D3.js is, how to use it, and how to build real visualizations with it, step by step.

The Story of D3

I first stumbled on D3 in 2018 when I wanted to display some population data on a bar chart. I spent weeks learning D3 just to display a simple bar chart, not realizing at the time that was overkill. You see, D3.js itself is not a charting library; it’s not a library made specifically for creating charts. This is even mentioned in the official documentation:

“D3 is not a charting library. It is a lower-level library for building data-driven documents. It doesn’t have a concept of charts.” — Mike Bostock, Creator of D3.js

If all you want to do is just display some data on charts like bar, pie charts then d3.js is way overkill, you should just use a library that was specifically made for that.

So why should I use D3?

You should use D3 when you want full control over how your visualization looks and behaves. If you want more than just static charts — like animations, custom layouts, user interactions, or visuals no one has done before — D3 lets you build exactly what you want.

It doesn’t hold your hand or give you templates. Instead, it gives you the building blocks to make your vision real.

So who is this course for?

This course assumes you know what Javascript is and this is not the first time you’re hearing about it, you know some basics and you can verify that this is the correct way declare a variable and create a loop in Javascript

If that sounds familiar, you’re ready for this.

How to use this course

As I mentioned earlier, this course is mostly practical. Every example comes with an interactive playground (with full source code), so you can play with the code and see what changes.

Most visualizations also include controls — sliders, buttons, color pickers — so you can see how changing values affects what’s drawn.

<div class="canvas">
    <svg width="100%" height="100%" viewBox="0 0 500 500">
        <rect id="my-square" x="200" y="200" width="100" height="100" fill="#ff0066" rx="8" />
    </svg>
</div>

.canvas {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--gray-2);
}

svg {
  width: 100%;
  height: 100%;
  max-width: 500px;
  max-height: 500px;
  filter: drop-shadow(0 4px 6px rgba(0,0,0,0.1));
}

#my-square {
  cursor: pointer;
}

// Select the square element
const square = d3.select("#my-square");

// Listen for control changes from the playground
window.addEventListener("playgroundControlChange", (e) => {
  const { controlId, value } = e.detail;

  if (controlId === "size") {
    // Center the square as it changes size
    const newSize = parseFloat(value);
    const newPos = 250 - newSize / 2;

    square
      .transition()
      .duration(200)
      .attr("width", newSize)
      .attr("height", newSize)
      .attr("x", newPos)
      .attr("y", newPos);
  }

  if (controlId === "color") {
    square.transition().duration(300).attr("fill", value);
  }
});

Each chapter contains multiple lessons, and every lesson has a quiz so you can test what you learned. At the end of each chapter, you’ll get a review quiz too.

Lessons are designed to build on each other, but they’re also self-contained. For example, if you already know how to set up D3.js, you can skip that part and jump ahead.

From the menu at the top right, you can see which chapters and lessons you’ve completed or skipped.

We’ll start simple and then gradually move toward more advanced topics — always making sure you understand not just what to do, but why it works.