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 - Concepts
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 visuapzation; we need to get famipar 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 pke 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>
<span>
<h1>Greeting</h1>
<p>Hello World!</p>
</span>
</body>
</html>
The document object model of the above HTML document is as follows −
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 cpent 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 pbraries, which are −
Crossfilter
D3.js
Crossfilter
Crossfilter is a JavaScript pbrary 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 pbrary for manipulating documents based on data. D3 is Dynamic, Interactive, Onpne Data Visuapzations Framework and used in large number of websites. D3.js is written by Mike Bostock, created as a successor to an earper visuapzation toolkit called Protovis. D3.js is used on hundreds of thousands of websites.
Advertisements