Introduction to D3 js
By: Thinley Norbu
Tags: JavaScript, HTML, SVG, Js, D3js

Getting to know D3 js.

Data-driven document

This article aims to give you an overview of D3(Data-Driven Documents). It is an open-source JavaScript library that can be used to create data visualizations on the web by using HTML, CSS, and SVG.

What do we use D3 JS for:

Create different styles of visual representation for data.

Create dynamic visualization with transitions and transformation.

DOM manipulation

Interaction and animation

So without any further ado, let’s proceed towards understanding some concepts related to D3.

Installing d3 onto your existing project is pretty straightforward. Just go through this link and you’ll be good to go.

Fundamental concepts of D3

Selection : Jquery-like selection is used to select DOM elements.

: Jquery-like selection is used to select DOM elements. DOM manipulation: After having the DOM element selected, add or modify something within the DOM element.

After having the DOM element selected, add or modify something within the DOM element. Method Chaining: create a pipeline of methods that each transform an object.

create a pipeline of methods that each transform an object. Data joins: Bind data to selected elements to loop through to make the DOM manipulation easier.

Selection:

We can select the DOM element in different ways. I normally use selection in three ways.

By element:

<body> <div>Showing effect of the style method</div> </body>

For eg: If our DOM structure looks like this. We can select the div by simply calling our selection like this.

d3.select('div');

If we want to select all the divs that are present in the DOM. We can use the selectAll function of D3.

d3.selectAll('div');

By class name:

<body> <div class="select-me">Showing effect of the style method</div> </body>

We can select a DOM element by using their class name similar to Jquery syntax.

d3.selectAll('.select-me');

This will select all the DOM elements which match the class ‘select-me’.

By id:

<body> <div id="select-me">Showing effect of the style method</div> </body>

Select the DOM element by

d3.select('#select-me');

2. DOM manipulation:

We can manipulate the DOM element after they are selected. We can use the style() method to the selection to style the element like we intend to.

Similarly, we can use manipulating methods such as attr(), append() and many more to manipulate the selection.

3. Method Chaining:

As the name suggests, it lets us chain multiple methods together. For eg:

d3.select('#select-me').style("color", "red").style("width", "40px");

What does the above code suggest?

First, select a DOM element with ‘select-me’ id. Apply ‘red’ color to that selection and then apply ‘40px’ width to that selection. Pretty simple, right?

d3.select('#select-me').style("color", "red").style("width", "40px").selectAll('div');

Similarly, the above example does all the tasks explained earlier and then gives us the selection of all the div which are children of the earlier selection. From there, we can do more manipulation to the newly selected children.

4. Data joins:

Now this concept was a bit hard to understand at first for me.

Data joins allow us to bind selected elements to the data of an array. By using data joins, the visualization we create becomes more reactive to the data.

Three main methods for the data join process are

data(): This is used to bind data. It’s much like looping through a set of data. The data() function joins the specified array of data to the selected DOM elements and returns the updated selection.

<script>

var myData = ["Hello World!"];



var p = d3.select("body")

.selectAll("p")

.data(myData)

.text(function (d) {

return d;

});

</script>

In the above example, it will return “Hello world” once as myData only has one element in the array.

enter(): This is used to execute certain manipulation when there is remaining data from the bind data but there is no selection left. The d3.selection.enter() function in D3.js is used to create the missing elements and return the enter selection. For eg:

<body>

// NO div are here

</body>

<script>

var myData = ["Hello","World","!"];



var p = d3.select("div")

.data(myData)

.enter().append('div')

.text(function (d) {

return d;

});

</script>

It will result in adding three new div with text contents of the array myData.

Example of enter()

merge(): This is used to merge the DOM manipulation before and after enter() together.

u.enter().append("circle").attr("r",5)

.merge(u)//after this, any update applies to both u & enter()

.attr("cx", d => d.x)

.attr("cy", d => d.y)

exit(): D3 doesn’t naturally delete excess selections. Exit() comes in handy when you want to do some manipulation to the excess selections. Usually, I use it to remove the excess selections because that is the more expected output.

function print(data) {

var divs = d3.selectAll('div').data(data); divs.enter();

.append('div')

.merge(divs)

.text(d => {

return d;

}); // divs.exit().remove(); } print(['The','great', 'exit', 'function', 'in', 'action']); print(['Remove', 'excess', 'selection'])

By removing the divs.exit().remove(), we get a strange output that may look like this.

Yes, we expected the ‘Remove’,’ excess’, and ‘selection’ div to be printed but we are getting ‘function’, ‘in’, and ‘action’ divs which were appended by the earlier function call. We can fix this by uncommenting the divs.exit().remove() line. After that, we execute remove() on the additional selection left.

Fixed. Pheww! :D

I hope you got a basic overview of how things work in D3 with this article. Well, there are much more features provided by D3. Another interesting concept to grasp would be scales provided by D3. I will be writing about scales in my next article. Till then, I hope this article will help someone curious about D3. Happy Learning!