DC.js - Concepts

DC.js is simple and easy for most front-end developers. It enables building basic charts quickly, even without any knowledge of D3.js. Before, we start using DC.js to create visualization; we need to get familiar with web standards. The following web standards are heavily used in D3.js, which is the foundation of DC.js for rendering charts.

  • Hypertext Markup Language (HTML)
  • Document Object Model (DOM)
  • Cascading Style Sheets (CSS)

Let us understand each of these web standards in detail.

Hypertext Markup Language (HTML)

As we know, HTML is used to structure the content of the webpage. It is stored in a text file with the extension “.html”.

A typical basic HTML example looks like as shown below −

<!DOCTYPE html>
<html lang = "en">
   <head>
      <meta charset = "UTF-8">
      <title></title>
   </head>
   
   <body>

   </body>
</html>

Document Object Model (DOM)

When a HTML page is loaded by a browser, it is converted to a hierarchical structure. Every tag in HTML is converted to an element / object in the DOM with a parent-child hierarchy. It makes our HTML more logically structured. Once the DOM is formed, it becomes easier to manipulate (add/modify/remove) the elements on the page.

Let us understand the DOM using the following HTML document −

<!DOCTYPE html>
<html lang = "en">
   <head>
      <title>My Document</title>
   </head>

   <body>
      <div>
         <h1>Greeting</h1>
         <p>Hello World!</p>
      </div>
   </body>
</html>

The document object model of the above HTML document is as follows −

DOM

Cascading Style Sheets (CSS)

While HTML gives a structure to the webpage, CSS styles make the webpage more pleasant to look at. CSS is a style sheet language used to describe the presentation of a document written in HTML or XML (including XML dialects such as SVG or XHTML). CSS describes how elements should be rendered on a webpage.

JavaScript

JavaScript is a loosely typed client side scripting language that executes in the user's browser. JavaScript interacts with html elements (DOM elements) in order to make the web user interface interactive. JavaScript implements the ECMAScript standards, which includes core features based on ECMA-262 specification as well as other features, which are not based on ECMAScript standards. JavaScript knowledge is a prerequisite for DC.js.

Components

DC.js is based on two excellent JavaScript libraries, which are −

  • Crossfilter
  • D3.js

Crossfilter

Crossfilter is a JavaScript library for exploring large multivariate datasets in the browser. It is used for Grouping, Filtering, and Aggregating tens or hundreds of thousands of rows of raw data very quickly.

D3.js

D3.js stands for Data-Driven Documents. D3.js is a JavaScript library for manipulating documents based on data. D3 is Dynamic, Interactive, Online Data Visualizations Framework and used in large number of websites. D3.js is written by Mike Bostock, created as a successor to an earlier visualization toolkit called Protovis. D3.js is used on hundreds of thousands of websites.

Advertisements