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 −
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.