The content for this post has been contributed by Quincy Smith, who is a part of the marketing team at Springboard an online training company seeking to bridge the world’s skills gap in various domains. They make industry-focused and mentor-led courses like the Data Science Bootcamp and Cybersecurity Career Track.
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!
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](http://github.com/mbostock/d3/wiki/Partition-Layout) 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 thed3.min.jsfile 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.
The key point in developing this code comes in "chain syntax," which might be familiar to you if you’ve used JQuery. The technique of chaining in D3 is done by placing methods together using a period. In this way, outputs of the first method are passed as inputs to the next, simplifying the code.
With its data-driven focus, D3 can easily create candlestick diagrams such as this.
Step 3: Loading Your Data
The next step is loading your data sets and binding them to your DOM elements. D3 can handle different types of files, local and external. The uploading of data is similar to conventional data loading with HTML and CSS, through methods like d3.csv() for .csv files, d3.json() for .json files, etc.
Step 4: Visualizing Data
With data successfully loaded into D3, users can create the most important part of their data visualization: the visualization itself.
This can come in the form of SVGs, which allow your charts to display different shapes, from lines to circles to ellipses, and allow you to have full control to achieve the ideal visualization of your data. In essence, the manipulation of SVG values takes a very similar approach to the manipulation of DOM elements.
By taking these steps, users are easily able to create the images and shapes that help build full charts and graphs. However, this doesn’t actually form the real data visualization. Instead, the manipulation of geometry and styles through D3 is required to achieve the desired outcome. This also involves anything from the scale of the chart to its axes to the animations of the chart.
However, once you have a grasp of D3.js techniques, it can be easy as pie to make anything from moving pie charts to responsive bar charts.
The above diagram displays U.S. trade deficits over time. When first opened, the diagram moves according to the timeline, from 2001 to 2013. Clicking on any part of the timeline causes the diagram to shift accordingly, displaying the trade deficit at that specific period of time. Take a closer look here.
In a Nutshell
Overall, D3.js is an extremely powerful and versatile tool.
It contains a plethora of features that gives data scientists (experienced & new), full control over the look and feel of your chart or graph, making it among the most influential tools for anyone looking to master data visualizations.
Thanks to Quincy Smith from Springboard for contributing this post for Towards Data Science.
If you have any feedback, comments or interesting insights to share about my article or data science in general, feel free to reach out to me on my LinkedIn social media channel.
Dipanjan Sarkar – Data Scientist – Intel Corporation | LinkedIn
