Introduction to D3.js

Get a brief introduction to D3.js and its features.

We'll cover the following

D3.js

Let’s formally introduce D3.js (Data-Driven Document) to see its beauty and power compared to other visualization tools.

  • It is a lightweight javaScript library used to make interactive data visualization in web browsers using HTML, SVG, and CSS visualizations.
  • It was released after the previous Protovis framework in 2011.
  • It is highly effective in working with large datasets.

There have been attempts in the past to bring data visualization to web browsers. The most famous examples were the Prefuse, Flare, and Protovis toolkits, which all are considered direct predecessors of D3.js.

The D3.js library uses pre-built functions to select elements, create SVG objects, style them, and add transitions, dynamic effects, or tooltips to them.

D3.js logo
D3.js logo

Core concepts

In this course, we will explore the following core concepts of D3.

  • Manipulating DOM elements
  • Drawing different geometrical shapes using SVGs
  • Visualizing charts and maps
  • Visualizing networks and hierarchical data
  • Adding interactivity to visualization

These concepts will be discussed in detail in the upcoming chapters.

Including D3 in webpages

We have two methods to include D3 in webpages. Either of them can be used to utilize D3.js functionality.

In the first method, we need to add the script tag inside the head tag in our HTML file and point the src of the script tag to the link of the D3.js library.

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

In the second method, you can download the JavaScript library from the D3.js website and place it in your current working directory. You can load the D3.js library as follows.

<head>
    <script src="d3.js" ></script>
</head>

Example

Now let’s see D3.js in action to see the beauty and power of it.

D3 in action
Don’t worry about the above code. After completing this course, you will be able to draw the same chart and more.