Last updated at Mon, 06 Nov 2017 17:21:36 GMT

Data Visualization is the method of consolidating data into one collective, illustrative graphic. Traditionally, data visualization has been used for quantitative work, but ways to represent qualitative work have been shown to be equally powerful. The main goal of data visualization, is to communicate information clearly and effectively through graphical means. That doesn’t mean that it needs to look boring to be functional or extremely sophisticated to look beautiful. In order to achieve a balance, both aesthetics and functionality need to go hand in hand. At Logentries, we realize the importance of data visualization and how it can help to communicate information to users of the system.

In my previous post “How to combine D3 with Angular JS” I focused mostly on writing code which combines both D3 and AngularJs, and not so much on the actual D3 part, which is responsible for creating graphs. In this post I will demonstrate how D3 can help to build effective graphical representations of data, and I will give a few tips to use when building them.

A bar chart is one of the most effective graphs for communicating information to a user.One axis of the chart shows the specific categories being compared and the other axis represents a discrete value. Even though a bar chart is a very simple graph, it can be very powerful in communicating the information, but sometimes developers tend to forget their basic characteristics when creating them. In today’s world where everything which is developed for websites needs to be made responsive. Graphs are used to represent dynamic data and the graph will need to adapt to how this data can change over time.

For example, based on the browser window the graph will need to be scaled. Not only the bars themselves will need to be resized but also other components of the graph such as scales, labels, titles and bars will all need to be resized.

Sometimes, better visualization of the data can actually be done by taking some of the components out, e.g. if the labels on the bottom axis are starting to overlap, rather than rotating them, we could take them out completely and put them in a tooltip. By doing so, we are still preserving information in a tooltip and we are not cluttering the graph with too much information.

This was all theory, so now lets look at how can we build a graph like that in D3. Personally, when I am writing code in D3 I like to put all separate parts of the code in appropriate methods. This can be very helpful when you come back to the code in the future, or when someone else needs to work on the code.


Some components of the code can be made global, so all of the methods can access it easily; like the main SVG element which we are appending the graph to. Looking at the picture above, we have six methods, each one responsible for a different component of the graph. We will have a closer look at the resize method.

When resizing the graph, we need to set the current width and height to the new width and height. Then we need to remove titles and create them again with new dimensions. The main SVG element will also need to be resized with a new width and height. For the purpose of this example, if the width is less than 600 pixels I remove the x-axis, so that the labels will not overlap, but we also have to remember that if the resizing happens again, and the width is greater than 600, we need to make the axis visible again. We could cleverer about this and calculate if at least one label is greater in size than the width of one column then this means the label will overlap and we would remove the axis.

function resize(newHeight, newWidth) {
	_setHeight(newHeight);
	_setWidth(newWidth);

	svgPrincipalBox.selectAll('text.title').remove();
	svgPrincipalBox.selectAll('text.title-scale').remove();
	_setTitles();

	svgPrincipalBox
		.attr("width", width)
		.attr("height", height);

	widthDraw = width - (margin.left + spaceAxisY + margin.right);
	widthColumn = widthDraw / numColumns;
	heightDraw = height - (margin.top + margin.bottom);

	svg.attr("width", widthColumn)
		.attr("x", function(d, idx) {
			return ((idx) * widthColumn + spaceAxisY + margin.left);
		});

	if (width < 600) {
		svgPrincipalBox.selectAll("g.xaxis").style("display", "none");
	} else {
		svgPrincipalBox.selectAll("g.xaxis").style("display", "initial");
	}

	render();
}

The code below shows how can we handle label overlapping more effectively. We can perform three actions with labels:

  1. If there is enough space for all of the labels, display them all
  2. If there is not enough space for at least one label, check if there is space for rotating the labels
  3. If both options fail, then we can completely hide labels
function checkLabelSpace(){
	svg.selectAll("g.xaxis").selectAll("g.tick").selectAll("text").style("display", "initial");
	var countOfWiderText = 0,
	countOfTallerText = 0;

	svg.selectAll("g.xaxis").selectAll("g.tick").selectAll("text")
		.each(function () {
			if(this.clientWidth > _setScales().xScale.rangeBand()){
				countOfWiderText++;
			}
			if(this.clientWidth > drawMargin){
				countOfTallerText++;
			}
		});
	if(countOfTallerText > 0 && countOfWiderText ===0){
		svg.selectAll("g.xaxis").selectAll("g.tick").selectAll("text")
			.attr("transform", "rotate(0)")
			.attr("transform", "translate("+(10)+","+(margin.top)+")");
	}
	else if(countOfWiderText === 0){
		svg.selectAll("g.xaxis").selectAll("g.tick").selectAll("text")
			attr("transform", "rotate(-65)")
	} else {
		svg.selectAll("g.xaxis").selectAll("g.tick").selectAll("text").style("display", "none");
	}
}

I hope this post has shown the value of D3 in doing this manipulation during resizing of different elements and that there are other steps we can take to be clever in designing and developing graphs.