D3.js – Data Visualization Goodness Part 1

Frontend dev from Dublin passionate about all things Angular and JavaScript

WRITTEN BY GARETH DUNNE @JSDIARIES

D3.js– Data Driven Documents

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

or

WebGL

 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 first learning resource that I used for D3.js was Scott Murray’s series of chunk sized tutorials to pull you in gradually into the foundations of the library .

I found them quite useful and gave me an insightful when I started to learn D3.js. It is a very good simple analysis and breakdown of the fundamentals.

They focus on creating charts such as scatterplots, bar charts, scales and axes’s and also teaching how to transition between datasets in these graphs. The tutorial is broken down into understandable segments so that each section is very manageable for someone to learn.

And if you found them useful then I’d also recommended getting his book if you wanted to show him support.

Learning D3.js Data Structures and Syntax

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

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.

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.

For example:

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.

To iterate through our data array and return every population value we must use return it using D3.’s . data() function.

This is due to d3 auto incrementing the value of i without the user having to specify it themselves. Although this is very common using for each loops in Razor, PHP etc its good to remind those we are just getting to terms with D3.js and aren’t coming from any other programming backgrounds.

This is a very basic overview of D3.js and what value it can provide to those wanting to create zestful, dynamic and most of all non-monotonous depictions of statistics. Unlike other Data Visualization libraries D3.js is not laborious or a chore to configure. And while it isn’t exactly new it still provides a powerful niche for data visualization. I’ll be sure to cover it more in depth in another post very soon.