D3.js is a JavaScript library for manipulating documents based on data. It helps you bring data to life using HTML, SVG, and CSS. D3's emphasis on web standards gives you the full capabilities of modern browsers without tying yourself to a proprietary framework, combining powerful visualization components and a data-driven approach to Document Object Model (DOM) manipulation.
D3 allows you to bind arbitrary data to a DOM, and then apply data-driven transformations to the document. For example, you can use D3 to generate an HTML table from an array of numbers. Or, use the same data to create an interactive SVG bar chart with smooth transitions and interaction.
D3 is not a monolithic framework that seeks to provide every conceivable feature. Instead, it solves the crux of the problem: efficient manipulation of documents based on data. This avoids proprietary representation and affords extraordinary flexibility, exposing the full capabilities of web standards such as HTML, SVG, and CSS. With minimal overhead, D3 is extremely fast, supporting large datasets and dynamic behaviours for interaction and animation.
For example, if we were to set the heights of some hypothetical bars in an HTML document with vanilla JavaScript, it'd look something like this:
var nums = [80, 53, 125, 200, 28, 97];
var bars = document.getElementsByTagName("rect");
for (var i = 0; i < bars.length; i++) {
var bar = bars.item(i);
bar.setAttribute("height", nums[i]);
}
With D3, it's
d3.selectAll('rect')
.attr('height', function(d, i) {return nums[i];});
D3 embraces declarative programming, and we can see that here: we're able to set the height of all elements in the collection using .attr, rather than having to set them individually using a for loop. Declarative code abstracts away implementation details, making complicated transformations easier to reason about. The library can be downloaded from here or can be linked directly to the latest version. HTML projects can be linked to the library by writing the following command
<script src="http://d3.v3.min.js" charset="utf-8"></script>
The D3 library does not work only with webpage development, it can be used, for example, with Python. In this context, several D3 packages are available, such as, MPLD3, Bokeh and Plotly.
The MPLD3 package is extremely easy to use: you can simply take any script generating a Matplotlib plot, run it through one of MPLD3's convenience routines, and embed the result in a web page. For those who are already using the Matplolib the additional code necessary to save a simple and interactive html plot is the following:
mpld3.save_html(fig_name,"filename")
Bokeh is a Python interactive visualization library that targets modern web browsers for presentation. Its goal is to provide elegant, concise construction of novel graphics in the style of D3.js, and to extend this capability with high-performance interactivity over very large or streaming datasets. This library will be used in the tutorial section.
Tutorial
In this tutorial, we will generate a exemplary scatter-plot for introducing the d3.js-package Bokeh in Python. You can download the tutorial instructions here.
For doing the tutorial, you need to download and import the appliance for a virtual machine (ubuntu). After starting, you can login with:
username: acm2
password: acm2
To launch the Jupyter Notebook (Python) containing the trainings-material (available here), you just have to open a terminal and type in following command:
A tab in the browser will open automatically. If you navigate to the 'D3_Tutorial' folder in the home directory, you will find a Tutorial.ipynb file to start with. A click on it will open a new tab in the browser.
The tutorial is devided in subsections. Each section can be run separately. The first cell contains all used packages that are used. The next cell contains some arbitrary generated data for generating later a scatter-plot followed by a cell where we need to define the tools, we want to provide in our plot. Now we generate a simple scatter-plot without using any tools.