D3 JS : Introduction

D3 or Data Driven Documents is a javascript library that allows manipulation of DOM. Its much like jQuery and mostly use for interactive data visualization. In this post we will see some of the basics of d3. You can use any text editor you like, I would be using brackets. Lets start, index.html


<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script>
var data=[10,30,50,34,65,87,65,23,45,14];
console.log(d3.max(data));//87
console.log(d3.min(data));//10
console.log(d3.extent(data)); //[10,87] array of min and max
</script>
</body>

Above we added the d3 file via CDN. Later we did some basic array methods provided us by d3. what if our data is an array of objects


var data=[{
monthYear:'Sept 2015',
count:'34'
},{
monthYear:'Oct 2015',
count:'43'
},{
monthYear:'Nov 2015',
count:'54'
},{
monthYear:'Dec 2015',
count:'96'
},{
monthYear:'Jan 2016',
count:'21'
},];


var objectMaxCount=d3.max(data,function(d){
return d.count;
});
console.log(objectMaxCount);

Notice the method names are same but it takes a second parameter as a function where you tell d3 which property of the object is to be taken to compute the result.

Consider the following html


<!DOCTYPE html>
<html>
<head>
<title>D3 Demo</title>
</head>
<body>
<h3>D3 Demo</h3>
<div id="content"></div>

</body>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script>
var myDiv=d3.select("#content");
var myUl=myDiv.append("ul");
</script>
</html>

d3Selection1

As you can see we selected the div tag and appended an ul element to it. If you are familiar with jquery, this syntax ust be very familiar to you. Now lets add few li elemets having some data.


var myDiv=d3.select("#content");
var myUl=myDiv.append("ul");
var myData=["Item 1","Item 2","Item 3"];
myUl.selectAll("li").data(myData).enter().append("li").text(function(d){
return d});

d3Selection2

Lets see each function call one at a time:

  • myUl.selectAll(“li”) : First we selected all the li elements under ul. Since none exist yet, this returns an empty selection. Think of this empty selection as representing the li that will soon exist.
  • .data(myData) : Counts and parses our data values. There are 3 values in our data set, so everything past this point is executed 3 times, once for each value.
  • .enter() : To create new, data-bound elements, you must use enter(). This method looks at the DOM, and then at the data being handed to it. If there are more data values than corresponding DOM elements, then enter() creates a new placeholder element on which you may work your magic. It then hands off a reference to this new placeholder to the next step in the chain.
  • .append(“li”) : Takes the placeholder selection created by enter() and inserts a li element into the DOM. Then it hands off a reference to the element it just created to the next step in the chain.
  • .text(function(d){return d}) : Takes the reference to the newly created li and inserts a text value.

Lets change the dataset and run the same code again in continuation.


var myDiv=d3.select("#content");
var myUl=myDiv.append("ul");
var myData=["Item 1","Item 2","Item 3"];
myUl.selectAll("li").data(myData).enter().append("li").text(function(d){
return d});
myData=["Item A","Item B","Item C","Item D"];
myUl.selectAll("li").data(myData).enter().append("li").text(function(d){
return d});

d3Selection3

As you can see the 4th data item is added at the unordered list, but the first three items didnt changed. This is because enter() was called only one time to add the 4th item in the data array. Lets check the properties of the first li tab

d3selection4

As you can we the __data__ property is showing ‘Item A’  but why didnt it displayed in DOM. Again enter() is an iterator that only goes through new items of data associated with a selected element. It isnt doing anything to the visible DOM for the first three items.
So How does we set all the text in the nodes.


myUl.selectAll("li").text(function(d){ return d});

d3selection5

Now what if we want to remove an item. We can use the exit() function.


myData=["Item 1","Item 2","Item 3"];
var updateItems= myUl.selectAll("li").data(myData);
updateItems.exit().remove();

The exit() iterator does the opposite of enter(). It iterators through where and li element exist but there is no corresponding data for it. So it will return elements that has no data . This gives us a chance to remove it.
Now to update the text again


updateItems.text(function(d){ return d});

As a good practice, text should be updated outside the enter iterator.

%d bloggers like this: