Interactive Data Visualization with D3.js
By: Dipanjan, Dj
Tags: JavaScript, Data Visualization, Data Science, Visualization, Towards Data Science

Interactive visualizations can add an impressive oomph to plain and boring datasets. The main characteristic of interactive data is in its use as an application on its own. It allows users to select specific data points to visualize the story in the way they choose. One of the most powerful ways to accomplish this is through JavaScript, or more specifically, the D3.js framework.

Developed by Mike Bostock, D3 (data-driven documents) is an open-source JavaScript library that makes use of SVG, HTML, and CSS to create powerful visual representations of data that bring it to life. Let’s look at an example of an interesting and interactive visualization powered by D3.js!

Tech Company IPOs vs. Company Value

In the above example, mousing over specific points of data launches a pop-up that expresses more information on that particular piece of data. The graph itself can be further animated, creating an exciting view of user data. See it in action here.

Key Features of D3.js

It Uses Pre-Existing Conventions: D3.js makes use of web standards such as the aforementioned SVG, HTML, and CSS. On its own, this particular feature may not appear to be remarkable. However, this allows for easy implementation of the script across platforms without the need for other technology or plugins other than a browser. It also allows data visualizations to be applied uniformly with other scripts and JS frameworks, like Angular.js, Ember.js, or React.js. In other words, it can be smoothly put into place within your website without disturbing the rest of the code. The best part: D3 is lightweight. It works with any web standard, so it’s fast, regardless of the size of your data set. It’s Data-Driven: D3 is driven purely by data, by inputting static data or fetching data from remote servers. This can be done in myriad formats, from arrays and objects to CSV, JSON, and XML, among others. Through this specialized tool, different types of charts can easily be created. The heavy use of data-driven elements in D3 also powers up your data, allowing for dynamic generation of different elements and styles of charts, whether it be a table, graph, or any other type of grouping of elements. It’s Dynamic: With its flexibility, D3 can be an extremely powerful tool, as it provides utmost dynamic properties to almost all of its functions. The data you input into the script can then easily form the type of style and attribute that is required in the visualization of that particular set of data.

Clicking anywhere on this coffee flavour wheel causes it to zoom with one fluid, dynamic motion. Check it out here.

If you really want to dive into the technical details, this is an example of using a d3.layout.partition layout to generate a zoomable sunburst tree derived from hierarchical data. A sunburst tree is a special radial space-filling visualization which is similar to an icicle tree.

All in all, D3 allows users to create basically any type of visualization, purely based on data, rather than from personal understanding of the data. Whether it be a table or a pie chart, a graph or a bar chart, D3 avoids human error by streamlining the process of data visualization, while giving users every opportunity to make tweaks and control visualization features.

Not only that, D3 provides ample allowances for interaction and animation through functions like duration() , delay() , and ease() that allow users to animate data, much like adding videos to your website — except that in the case of D3, it’s streamlined and implemented directly into your site. These animations are also fast and responsive to user interactions, making them even more appealing.

How to Get Started?

D3.js can be quite simple to implement, so long as you have some basic knowledge in JavaScript already. Here’s a simplified, step-by-step guide to start off your journey with interactive data.

Step 1: Setting up

The very first step of D3 is to set up the D3 library, which functions as a repository of information and instructions for the D3 code to draw from. It forms the very base of your data visualization, so it’s important to get this step out of the way.

There are two ways to do this:

Introduce the D3 library to your project folder: Since D3 is open-source, the source code is available to download on the D3 website. All you have to do is unzip the downloaded folder, look for d3.min.js , and copy it directly to your project’s root folder. Then, include the d3.min.js file in your HTML page using <script src =…> . With this, your HTML webpage can now access code in the D3 library within the <script> tag and DOM elements can be easily manipulated. Introduce the D3 library from a content delivery network (CDN): CDN is a network of different servers hosting files that are delivered to users according to their geographic location. With CDN, you don’t even need the source code (like you do using the first method). Just include the CDN URL using <script src=…>

Step 2: DOM Elements

With the open-source code library in place, it’s time to set up of the web page itself, in terms of styles and manipulating other DOM elements. It’s important to get the reference of DOM elements down, using d3.select (css-selector) or d3.selectAll (css-selector). Afterward, well-known HTML and CSS conventions apply, and these elements can be implemented accordingly.

The DOM elements can also be manipulated by a list of methods such as text(“content”) or remove() . These are very similar to existing conventions, and are therefore easy to use from a coding perspective. You can add animations and other features in a similar fashion, using different scripts that can be found in the API reference on the official website.