Site icon NIPCT

Introduction to Data Visualizations with D3.js

In this chapter, we introduce the field of data visualization. We will see why we need data visualizations and how we can use the Web to distribute them to achieve our communication goals.

We understand why D3.js is the de facto standard for data visualizations in the browser. We review the origins of the library, why it is so powerful and web focused. Also, we learn about the latest updates to the library.

Finally, we understand why ES2015 is the new standard for JavaScript. We review some of the new features and the benefits they bring, as well as how we leverage them when writing D3.js code.

Navigating a Data-Based World 

We live in a world full of data. Big data has been a buzzword in the last years, and companies and governments are making use of data to influence their decisions.

Data visualization is about the creation and exploration of visual representations of data. With data visualizations – or dataviz – we communicate information clearly and efficiently. We do it by using charts, plots, and graphics.

We need to create data visualizations to help people interpret data “at a glance.” When presented with a table of values, people need to “read” it before getting to any conclusion. On the other hand, data visualizations let users “see” the data right away, recognizing trends and comparing values.

The World Wide Web – or the Web – is everywhere. It is the most extensive information distribution channel ever created. JavaScript is also omnipresent. Browsers and servers run it, and you can find it in millions of devices. It is the most important programming language in the world.

When we need to create a data visualization to distribute to the whole world, we have many data visualization tools available. Which ones should we use? The answer is D3.js and ES2015. In the rest of this chapter, we discover why.

Why D3.js? 

D3 stands for data-driven documents. It is a low-level JavaScript library that provides the building blocks to create interactive visualizations. The goal of D3.js is to enable web developers to build custom visualizations in the browser. All this with the smallest amount of effort and without giving up control over the final result.

Since its creation in 2011, D3.js (https://d3js.org/) has become the de facto standard for building complex data visualizations on the Web. In the next sections, we will see the benefits of this library and why you can’t go wrong choosing D3.js.

Total Control of Your Visualizations 

There are many ways in which we can represent data depending on the goal of the dataviz. A compelling data visualization can be

D3.js allows developers to create all of them – with no exceptions. The library grants you with almost limitless control over the look and behavior of your visualizations. For that, D3.js exposes a vast API (http://bit.ly/pro-d3-api) that includes, among other functions

D3.js is so thorough and complete that developers don’t need any other support library to build complex dataviz.

Arrow Functions

Arrow functions are a new way of defining functions. They remove the “function” word and the need of binding the value of “this”. These functions also allow implicit returns, making the code simpler (Listing 1-3).

Listing 1-3. Simpler code with ES2015 arrow functions
// Before
someArray.map(function(value) {
return value + 1;
});
// With ES2015
someArray.map((value) => value + 1);

The use of arrow functions is very common these days. However, sometimes the “this” binding can be problematic when applied to some D3.js code. In most of regular JavaScript code, “this” either represents the current object or references a user interface event the user triggered. In D3.js though, “this” could also represent the current element in a D3.js selection. Proper variable naming and careful use of “this” are hence recommended to avoid this kind of issues.

Spread Operator 

The spread operator, for objects and arrays, makes it easy to create, update, and combine these data structures. Let’s see how in Listing 1-5.
Listing 1-5. Simple array and object combinations with the spread operator
// Before
var lightArray = [ ‘radiant’, ‘vivid’ ];
var newLightArray = lightArray.concat([ ‘shiny’ ]);
var baseLightObject = {
a: ‘radiant’,
b: ‘vivid’
};
var extraObject = { b: ‘silvery’ };
var merged = _.extend({}, baseLightObject, extraObject);
// using underscore.js or lodash
var merged = $.extend({}, baseLightObject, extraObject);
// using jquery
// With ES2015
let newLightArray = [ …lightArray, ‘shiny’ ];
let merged = { …baseLightObject, …extraObject };

The JavaScript community uses this feature widely when creating immutable data structures. This practice helps reduce bugs produced by accidental state mutations.

Exit mobile version