DC

Pdc.js is a javascript charting library with native crossfilter support, allowing highly efficient exploration o n large multi-dimensional datasets (inspired by crossfilter's demo). It leverages d3 to render charts in CSS-friendly SVG format. Charts rendered using dc.js are data driven and reactive and therefore provide instant feedback to user interaction.

Advantages of DC:

  • Great data visualization.
  • Performs graphical filtering.
  • Fast creation of charts and dashboards.
  • Creation of highly interactive dashboards.



Disadvantages of DC:

  • Some functions in the D3.js is not supported in the older browsers.
  • It has data-source limitations.
  • Concealing original data is not easy with D3.js.
  • The biggest disadvantage is it has a very steep learning curve.

In this chapter, we will learn how to set up the DC.js development environment. Before we start, we need the following components −


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

Let us go through the steps one by one in detail.


DC.js Installation

DC installation is very easy to set up. Follow the below steps to install DC on your machine.

Download DC.js Library

DC is an open-source library; use the link https://github.com/dc-js/dc.js/releases to download the file.

Download the latest version of the DC file. (As of now, the latest version is 2.0.2.). After the download is completed, unzip the DC folder and paste it to your project's root folder or any other folder, where you want to keep all your library files.

The sample HTML page is as shown below.

                            
                               !DOCTYPE html
                                html lang = "en"
                                head
                                    script src = "js/d3.js" /script
                                    script src = "js/crossfilter.js" /script
                                    script src = "js/dc.js" /script
                                /head
                                body
                                script
                                    // write your dc code here..
                                /script
                                /body
                                /html

DC is a JavaScript code, so we have to write all the DC codes within the “script” tag. We may need to manipulate the existing DOM elements, hence it is advisable to write the DC code just before the end of the “body” tag.

DC.js Editor

We will need an editor to start writing the code. There are some great IDEs (Integrated Development Environment) with support for JavaScript such as −


  • Visual Studio Code
  • WebStorm
  • Eclipse
  • SublimeText

These IDEs provide intelligent code completion as well as support some of the modern JavaScript frameworks. If we do not have any fancy IDE, we can always use a basic editor such as Notepad, VI, etc.

Web Browser

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

Web Server

Most browsers serve local HTML files directly from the local file system. However, there are certain restrictions when it comes to loading external data files. In the subsequent chapters of this tutorial, we will be loading data from external files such as CSV and JSON. Therefore, it will be easier for us, if we set up the web server right from the beginning.

We can use any web server, which we are comfortable with. For example – IIS, Apache, etc.

Viewing Your Page

In most cases, we can just open the HTML file in a web browser to view it. However, when loading external data sources, it is more reliable to run a local webserver and view the page from the server (http://localhost:8080).

DC.js is a charting library for exploring large multi-dimensional datasets. It relies on the D3.js engine to render charts in a CSS-friendly SVG format. It allows complex data visualization to be rendered and has a designed dashboard having Bar Charts, Scatter Plots, Heat Maps, etc. DC.js is built to work with Crossfilter for data manipulation. DC.js enables a single (large) dataset to be visualized with many interconnected charts with an advanced auto-filtering option.

Why Do We Need DC.js?

In general, data visualization is quite a complex process and carrying it out on the client side requires extra skill. DC.js enables us to create almost any kind of complex data visualization using a simpler programming model. It is an open source, extremely easy to pick up JavaScript library, which allows us to implement neat custom visualizations in a very short time.

DC.js charts are data driven and very reactive. In addition, it delivers instant feedback to user interaction using the Crossfilter Library.