Going from Raw Data to Graphical Dashboard

In this blog, I want to share my little experience with D3.js and DC.js.

Let's start with D3.js.

D3.js – Data-Driven Documents
D3.js is a JavaScript library for producing dynamic, interactive data visualizations in web browsers. It makes use of the widely implemented SVG, HTML5 and CSS standards.
DC.js – Dimensional Charting JavaScript Library
DC.js is a JavaScript charting library with native cross-filter support allowing highly efficient exploration on large multi-dimensional datasets. It leverages d3 to render charts in CSS friendly SVG formats.

Now let's explore DC.js features

DC.js is one of the best visualization frameworks and it can be used to generate simple as well as complex visualizations. Some of the salient features are listed below:

• Extremely flexible
• Easy to use
• Fast rendering of the charts
• Open source JavaScript library
• Support large multi-dimensional datasets

• DC.js library
• Editor
• Web browser
• Web server

DC.js library

DC is an open source library, you can find from the link https://github.com/dc-js/dc.js/releases. Download the library packages from here and attach it to your code.

DC.js editor

• Visual Studio code
• WebStorm
• Eclipse
• Sublime text

Web Browser

DC.js works on all browsers except IE8 and lower.

Web Server

Most of the browsers serve local HTML files directly from the local file system. But when we use the external CSV and JSON files to load the data, it is mandatory to use the web server.

Our use cases

We are using DC.js to develop a graphical dashboard to view business data for better understanding. Through this DC.js charts, one can see the entire business perspective and possibilities in a single page. This will be more helpful to take some important business decision.

In our use case, we have developed a Graphical Dashboard for a healthcare company. The company needs to organize their medical data in terms of products, clients, manufacturing units where a lot more factors are involved. Earlier the data used to be stored in CSV, TSV or spreadsheet format. They needed to analyze these data to make some improvement in their business tactics and understand their business growth. Analyzing CSV data manually was not an easy task.

For such big company with a huge amount of data, CSV files are nearly impossible to analyze and make some decision on it. So here comes the picture of DC.js. It is a powerful JavaScript framework that helps to analyze and present this type of data in a graphical format. Their requirement was met with using DC.js.

Moreover, most of the businesses today need this technology. Because all the raw data are in the above-mentioned formats like CSV, TSV or spreadsheet format and it is hard to get an overview of these data with this same format.

Onclick() event:
One of the major issues I have faced is onclick() event. Refer the link https://dc-js.github.io/dc.js/examples/ for some basic examples of using DC.js and some simple example of each chart type for DC.js.

Here, I have described the onclick() event with the example pieces of codes for understanding purposes.

Onclick() event is used to perform some user interaction with the dashboards. If the user wants to select the particular bar, this Onclick event comes into action. When a dashboard contains multiple charts based on any type of data, the user can customize the dashboard based using the same data. In this scenario, the filtering functionality comes into action. The user can filter the charts based on the Onclick event. So, this is the important part while developing a customer based dashboard.

We can perform this onclick() event manually in D3.js. Because D3.js is fully manual functionality. We can perform this functionality in DC.js also. But it is hard to find the reference for this type of use case online. So, let’s consider a piece of code from the above bar chart example.
chart

.width(768)
.height(380)
.x(d3.scaleBand())
.xUnits(dc.units.ordinal)
.brushOn(false)
.xAxisLabel('Fruit')
.yAxisLabel('Quantity Sold')
.dimension(fruitDimension)
.barPadding(0.1)
.outerPadding(0.05)
.group(sumGroup);
chart.render();

So, this is the basic operation which is defining the properties of the bar chart. If we need to implement onclick() event in this, we have to add one more property within onclick().

.selectAll(rect.bar)
.on(‘click’, function (d){
console.log(‘clicked on the bar with datum’, d);
}

Here ‘selectAll(rect.bar)’ is used to identify the particular bar which the user selects. Here ‘click’ is the event name and the parameter ‘d’ contains the value of the bar.

This click event function varies according to the chart.

For pie chart, it is like,

.selectAll(g.pie-slice)
.on(‘click.my-click-event’, function (d){
console.log(‘clicked on the bar with datum’, d);
}

And for row chart,

.selectAll(g.row)
.on(‘g.row rect’, function (d){
console.log(‘clicked on the bar with datum’, d);
}

You can find the complete reference of this particular part from here https://github.com/dc-js/dc.js/wiki/Chart-selectors

Conclusion

DC.js is the new framework. So, there are few tutorials and references available for the development process more than the official documents. But I can say, those references are more than enough to develop an interactive graphical dashboard with different required functionalities. There are some other chart frameworks available, but DC.js is the only one which is ruling this domain because of its unique features.