D3.js – Data Visualization Goodness Part 1

I started using D3.js over two years ago now. At the time it didn’t really seem all that interesting but it actually captivated me by depicting how statistics and charts don’t have to be static but actually dynamic and visually pleasing.

D3.js is a library that allows you to do just that.

Please note if your looking for libraries with more 3d based capabilities please check out

Three.js

 If you wanted a quick summary of what it helps you do.  Well, it allows you to customize your own graphs and make switches between data sets dynamically using animations or transitions.

Dynamically changing graphs will allow the user to see the data changing without having to refresh the page (A cornerstone of nearly all JS libraries at this stage) . The developer can use these data visualization techniques  to highlight a particular section of information.

The syntax of D3.js is very similar to JQuery however arbitrary sets of nodes called selections can be used to rewrite loops. The adaptability of these selections mean that D3.js can iterate through JSON arrays for further manipulation of that data for forming its graphs.

Scott Murray’s D3 tutorials are used to give a steady introduction to D3.js. These tutorials allowed a basic grasp on all D3 concepts and serve as a more than adequate insight on how some of the fundamentals of d3 could be applied to a project.

Similar to JQuery to select an element from the DOM we use a .select accessor rather than the $ sign. From here we then create a paragraph element and append it to our initial selection

 d3.select("body").append("p").text("New paragraph!");

This will select the body element from the DOM. From here we then create a paragraph element and append it to our initial selection. 

Each dot in-between each d3 selection represents D3’s chain syntax. The dot just concatenates each selection or property to the next.

D3 allows iteration through arrays and data sets with ease. It will accept any form of data in an array and allows for multiple types of external data. 

Out of the many different external data types JSON is the preferable type to meet the aims of a typical application.

 var dataset = [ 5 , 10 ]
var rect = svg . selectAll (" rect ")
.data ( dataset )
.enter ()
.append (" rect ")

The svg.selectAll(”rect”) selects all rectangle objects on the screen. At this point the rectangles do not exist; instead the selection is of rectangle placeholder elements.

This is a key fundamental of D3 that confuses initial learners. The array dataset is then placed inside the d3 .data() function in order to apply the dataset to the rectangle selection.

However while the data is now specified no rectangles have been created yet. The .enter() selection takes our data set specified in the .data() function and passes to the placeholder rectangle elements that were created upon the initial selection.

This tutorial enables the user to come to terms with D3 syntax in an accessible and simplified way.
From a dataset depicted like so each index can be accessed individually.

 var data = [ {"population":"20000","b":"4.14"}, {" population ":"30000","b":"1.38"}, {" population ":"40000","b":"1.43"}, {" population ":"50000","b":"3.34"}] 

For example:

  data[0].population 

This would access the first index value of population returning 20000. Using this information it is clear how adaptable this would when implementing JSON into a graph.

 .data(data,function(d,i) { return data[i].population})