Data Visualization with D3.js for Tuleap graphs

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. The aim is to display 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 visual objects 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.

    
<body>
  <svg>
    <g class=”my_g” transform=”translate(80,80)”  >    </g>
    <g class=”my_g” transform=”translate(180,80)”   > </g>
  </svg>
</body>
    
  
    
// 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”);
    
  

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
    
<body>
  <svg>
  </svg>
</body>
    
  
    
// Data to bind with the DOM
var data = [
  {x:80, y:80, r:15, name:“Node 1”},
  {x:180, y:80, r:15, name:“Node 2”}
];

// Create  elements on the DOM with data
var my_g = d3.selectAll(“.my_g”) // Returns []
  .data(data)
  .enter() // Returns “Node 1” and “Node 2”
    .append(“g”)
    .attr(“class”, “my_g”)
    .attr(“transform” , function(d) { return “translate(“ + d.x + “,” + d.y + “)”; }); // d corresponding to each data object

// Append circles on each  elements
my_g.append(“circle”)
  .attr(“r”, function(d) { return d.r; });

// Append text on each  elements
my_g.append(“text”)
  .attr(“dx”, “20px”).data(data, function(d) { return d; })
  .text(function(d) { return d.name; });
    
  

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.


In this graph, the difficulty was to keep axis readable without information overlaying : see Image 4. The solution was to reduce the number of tick labels along the x-axis and y-axis for each custom breakpoints : see Image 5.

d3.js visualizations

Pie chart in Tuleap SiteAdmin

The difficulty for this chart was the same as the flow chart. Therefore we can see all the graph : see Image 6, 7 and 8.


In this chart the difficulty was to keep labels around the pie chart readable without information overlaying : see Image 9. The solution was to hide the label when the corresponding slice size (width or height) isn’t large enough to show it. It is only shown when the user passes the mouseover the legend or over the slice : see Image 10.


Why I love D3.js

Visualizations are a good way to draw essential points. Several technologies are available. In my opinion, D3.js is currently the best library to create your visual representation. Many others libraries are based on it as C3.js. It can be suitable if you don’t need to use specific features of D3.js or don't want to customize your visualization.

In this article I give you some elements to solve the issue of responsiveness. According to the chosen graphics, the way to render it responsively may be more difficult. If it becomes impossible, the question you need to ask yourself is : “Did I chose the best visualization to represent my data ?”. The choice of the visualization is an other mainly point you have to reflect and discuss before starting your development.

See Tuleap graphs in live:

Join Online meetings Watch demo videos

Share this post

Leave a comment

To prevent automated submissions please leave this field empty.

Plain text

  • No HTML tags allowed.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.
By using this site, you agree that we may store and access cookies on your device. Get more information. Ok that's fine