Chapter 00Introduction

D3.js (Data Driven Documents) is an open source JavaScript library that allows you to create an incredible array of dynamic data visualizations in a document’s DOM. With the library you can create standard visualizations like line graphs, pie charts, and scatter plots, but because the library was engineered to be incredibly flexible, you can also create custom visualizations and complex visualizations like the Streamgraph shown below.

You can see hundreds of other impressive examples by browsing the D3.js GitHub Gallery.

What’s in This Book

This book is for those that are new to the D3.js library and for those that are looking for a better understanding of how to use the D3.js API. Throughout the book we assume the reader has a thorough understanding of HTML and CSS, and understands how to manipulate the DOM using JavaScript.

In the chapters that follow, we demonstrate the various objects and methods in the library’s API. When doing so, we provide links to the official D3.js API documentation, discuss how to use the objects and methods, provide code examples, and give explanations for those examples.

The code examples are provided in interactive sandboxes like the one below.

<script>
  function handler() {
      let node = document.getElementById('name')
      node.innerHTML = 'Got it!'
  }
</script>

<style>
  button {
      background-color: lightblue;
      border-radius: 10px;
  }
</style>

<div id='name'>Hello World!</div>
<button onclick='handler()'>Press me</button>

A sandbox consists of a CodeMirror editor, a menu, and a rendering area. In the example, above the editor is hidden. To make the editor visible, simply press the button in the menu. To close the editor, press the button.

Since it is impossible to illustrate every possible use of the numerous objects and methods in D3.js, the reader is encouraged to experiment with the code. When doing so, you’ll notice that if you make a change to the code in the editor, the result is not immediately reflected in the rendering area. To see the result of your changes, you must rerender the code by pressing the button in the editor’s menu. To reset the code to the original code that we provide, press the button.

If you would like to view a code example in a separate window, press the button.

Getting Started

To get started, you must download the latest version of the D3.js library from the GitHub or use the CDN link to the latest release of the library as shown below.

<script src="https://d3js.org/d3.v7.min.js"></script>