DC.js - Installation

In this chapter, we will learn how to setup 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 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 a 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).

Advertisements