When it comes to visualizing data, there are quite a few libraries out there. The level of abstraction they introduce varies. Libraries like C3 and Recharts depend on the Data-Driven Documents library – D3. Learning D3 might mean dealing with more code. The experience you can get this way will benefit you though so that you can make better use of libraries that depend on D3 under the hood. It makes it worthwhile to learn the basics first.

Introduction to the Data-Driven Documents

The D3 library helps to visualize data using SVG, Canvas, and HTML. It aims to be low-level and therefore, flexible. It has a lot of DOM-managing functionalities built-in.

We install the D3 library from npm and run the application using Webpack.

If you want to know more about Webpack, check out the Webpack 4 course

The code above selects the first element that matches the  h1  selector. When we find it, we can alter it in various ways. D3 has a set of methods meant for modifying selected nodes. Above we use the  style function that aims to change the color of the h1 element.

There are more methods like attr, property, or text. If you want to experiment with them, you can go to the d3js.org website and use the global d3 object.

Aside from using the  select function, you can also use  selectAll. It might come in handy when you want to modify multiple elements at once.

In the code above, we invoke a function for every h1 element that we find wit the use of the each method. In its context, the “this” keyword points to a current element. Here we can see that the  select function also accepts a DOM node instead of a selector. Thanks to that we can call the  style function on every h1 element.

We can make the code above even better. In fact, we don’t have to call the  each method!

The  selectAll function wraps all elements in the page in a way that you can interact with them all at once.

Processing data

To create some more useful things, we need to get into the data binding, also called joining. To understand this concept, let’s look at this data processing:

In the example above, we use the  append function to create one SVG element and multiple rectangles. We put every bar to the bottom of the SVG element using  attr('y', svgHeight - value) – this is because if we want to put some element lower, we need to increase the “y” coordinate.

source: developer.mozilla.org

Thanks to the above, we manage to create an uncomplicated bar chart:

Data binding

The above is not the best way to achieve this. Let’s improve it with the use of the data binding.

Let’s break it apart, step by step.

First, you might find it surprising that we call  svg.selectAll('rect') even though there are no rectangles yet. This approach aims to utilize the declarative style of programming. You can think of calling the  selectAll function like the above as making the holes in our space that we aim to fill later. It is yet unclear how many elements we intend to put there.

The crucial part comes with the  data(values). With this, we declare the relationship between the data and the type of DOM element that we specified with  selectAll('rect').

The  enter() function creates missing elements that correspond with our data. It determines how much elements we intend to create.

The final touch is the use of the  append('rect') function that fills the DOM tree with desired elements, and now we can style them as we desire. Since we use the  selectAll function, the  attr() applies to every rectangle. When we pass a function to it, we can use the data associated with a particular rectangle like that:  attr('x', (value, index) => index * barWidth).

Thanks to all that we’ve reproduced the same outcome with the use of the data binding.

Summary

In this article, we’ve gone through the very basics of D3. This includes the fundamentals of using selectors and how to modify the nodes in the DOM tree. We’ve also created a foundation on which a bar chart can be created upon. To do this, we’ve used SVG and touched the topic of the coordinates. To render the chart properly, we’ve introduced the concept of data binding instead of using a simple for loop. All of the above a good starting point when learning the Data-Driven Documents library.