Exploring D3’s modules

Functions, methods, and properties of the D3 library are organized into modules. There are over 40 modules (Figure 1.10). When you import the d3.js library, you automatically load the 29 modules that make up the default bundle.

Figure 1.10 – Modules in D3.js v7 showing dependencies and inclusion in the default bundle

Modules that are not part of the default bundle need to be imported separately.

You don’t always need the full d3.js bundle. Any SVG can be created by importing just the d3-selection module separately. In the following code, for example, version 3 of this module is used to provide methods such as d3.append() and d3.select():

<script type="module">
    import * as d3 from "https://cdn.skypack.dev/d3-selection@3";
    d3.select("body").append("svg").append("circle")
      .attr("r",20).attr("x",50).attr("y",50);
</script>

Using separate modules, however, is not trivial. Omitting a required module, loading them in the wrong order, assigning prefixes incorrectly, or using incompatible versions can cause hard-to-find errors.

Most examples in this book import the entire d3.js bundle. This avoids configuration errors that may distract us from our primary goal, which is to learn how to use the D3 library efficiently. When modules that are not part of the default bundle are required, we will show you exactly how to import them correctly. See the Imports/ folder (in this chapter’s repository) for different ways to include the D3 library in a web application.

It’s still important to have a general overview of the modules provided by the D3 library, since the official documentation is organized per module. Most chapters in this book are also dedicated to specific modules. In the repository’s Appendix/ folder you will find a quick reference of D3’s modules in the Modules/ subfolder.