I’d like to share today a subject I particularly find interesting : Data visualization. Ok that’s a word we meet everywhere at the moment but that really matters in a software project management tool as the Tuleap one. In this article I will talk about the interest of visualizations, the different key points from my point of view, some difficulties with technologies and responsiveness you could encounter and some solutions I propose.

Why it matters

Before starting, a few words why bother about visualization. Data visualization displays data in a pictorial or graphical format. It allows decision makers and all project members to have information in one shot without reading a lot of text. With visualisation you get an helicopter view, communicates complex ideas simply, identify critical points and draw a rapid conclusion.

Technologies for Data Visualization

On the web you can find a lot of libraries to do so. D3.js is the most popular JavaScript library to create charts and graphs using web standards (HTML, CSS, SVG). D3.js binds your data to the Document Object Model (DOM) elements. Therefore it allows you to draw, select, manipulate data in the DOM and apply transformations through the use of D3.js data-driven transformations and transitions.

D3.js provides utils to control basic elements rather than proposing ready-to-use reports. With this feature, you can generate an HTML table from an array of data, as well as create an interactive SVG timeline graph with the same data. To create custom charts I recommend using D3.js; other libraries offer pre-build graphics but they are more restrictives.

Usual difficulties

The main difficulties I found was to understand D3.js features. The first thing to know is the DOM elements selection. For example, we want to build circles in svg with an associate text. If I don’t have any data to bind I can just select existing DOM elements with “selectAll()” and append what I want.

selectAll(selector): selects elements defined by the CSS selector existing in the DOM.

D3 code:

// Append circles

d3.selectAll(“.my_g”)

.append(“circle”)

.attr(“r”, “15px”); // Append associate text

d3.selectAll(“.my_g”)

.append(“text”)

.attr(“dx”, “20”)

.text(“Node”);

Result:

<body>

<svg>

<g class=”my_g” transform=”translate(80,80)” > </g>

<g class=”my_g” transform=”translate(180,80)” > </g>

</svg>

</body>

Preview:

Now If I want to bind data to the DOM to create circle, I can use “selectAll()”, “data()” and “enter()” functions.

data([data[, key]]): returns the selection (done by “selectAll()”) updated, bound to specified data using the key function by selection type (enter, exit). If a key function isn’t specified data and elements will be bind by index (e.g. the first element will be bound with the first data).

enter(): returns data nodes that don’t have DOM elements associated by the .data() function

D3 code:

// Append circles

d3.selectAll(“.my_g”)

.append(“circle”)

.attr(“r”, “15px”); // Append associate text

d3.selectAll(“.my_g”)

.append(“text”)

.attr(“dx”, “20”)

.text(“Node”);

Result:

<body>

<svg>

<g class=”my_g” transform=”translate(80,80)”></g>

<g class=”my_g” transform=”translate(180,80)”></g>

</svg>

</body>

Preview:

If “selectAll()” function returns existing elements, the “data()” function without key function will be bound automatically. In the above example there isn’t existing elements in DOM, so we don’t need to specify a key function. If it was the case, we would have to define the key function as follows: “.data(data, function(d) { return d; })”.

The issue of responsiveness

One of the most important point into data visualization is to have data readable everywhere. Nowadays, we have several types of devices, small screens for phones to bigger screens for tablets or computers. Creating data-driven visualizations and infographics that run on multiple devices responsively is a tough challenge. The minimum we can do is to adapt the visualization layout to the screen size and manage the amount of information displayed.

I’m going to present you two examples with their responsive difficulties :

one graph on Tuleap Kanban reports: a cumulative flow chart. Tuleap Kanban is an agile plugin to manage tasks, visualizing the flow steps by steps and limiting the flow for each step.

another graph for Tuleap platform administrators: a pie chart for users statistics .

Cumulative flow graph in Tuleap Kanban

The cumulative flow graph in Tuleap Kanban reports is designed to adapt to screens by changing its size. No need to scroll to see all data : see Image 1, 2 and 3.