DC.js Tutorial
DC.js Useful Resources
Selected Reading
- DC.js - Dashboard Working Example
- DC.js - Legend
- DC.js - Data Grid
- DC.js - Data Table
- DC.js - Data Count
- DC.js - Heat Map
- DC.js - Bubble Chart
- DC.js - Scatter Plot
- DC.js - Series Chart
- DC.js - Composite Chart
- DC.js - Bar Chart
- DC.js - Line Chart
- DC.js - Pie Chart
- DC.js - coordinateGridMixin
- DC.js - marginMixin
- DC.js - colorMixin
- DC.js - capMixin
- DC.js - baseMixin
- DC.js - Mixins
- Introduction to D3.js
- Introduction to Crossfilter
- DC.js - Concepts
- DC.js - Installation
- DC.js - Introduction
- DC.js - Home
DC.js Useful Resources
Selected Reading
- Who is Who
- Computer Glossary
- HR Interview Questions
- Effective Resume Writing
- Questions and Answers
- UPSC IAS Exams Notes
DC.js - Installation
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 pbrary
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 pbrary; use the pnk 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 pbrary 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
Ecppse
SubpmeText
These IDEs provide intelpgent 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 repable to run a local webserver and view the page from the server (http://localhost:8080).
Advertisements