DC.js - Conceitos

DC.js é simples e fácil para a maioria dos desenvolvedores front-end. Ele permite construir gráficos básicos rapidamente, mesmo sem nenhum conhecimento de D3.js. Antes, começamos a usar DC.js para criar visualização; precisamos nos familiarizar com os padrões da web. Os seguintes padrões da web são muito usados em D3.js, que é a base do DC.js para renderizar gráficos.

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

Vamos entender cada um desses padrões da web em detalhes.

Hypertext Markup Language (HTML)

Como sabemos, o HTML é usado para estruturar o conteúdo da página da web. Ele é armazenado em um arquivo de texto com a extensão “.html”.

Um exemplo típico de HTML básico se parece com o mostrado abaixo -

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

   </body>
</html>

Document Object Model (DOM)

Quando uma página HTML é carregada por um navegador, ela é convertida em uma estrutura hierárquica. Cada tag em HTML é convertida em um elemento / objeto no DOM com uma hierarquia pai-filho. Isso torna nosso HTML mais estruturado logicamente. Depois que o DOM é formado, torna-se mais fácil manipular (adicionar / modificar / remover) os elementos da página.

Deixe-nos entender o DOM usando o seguinte documento HTML -

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

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

O modelo de objeto de documento do documento HTML acima é o seguinte -

Cascading Style Sheets (CSS)

Enquanto o HTML fornece uma estrutura para a página da web, os estilos CSS tornam a página da web mais agradável de se olhar. CSS é uma linguagem de folha de estilo usada para descrever a apresentação de um documento escrito em HTML ou XML (incluindo dialetos XML como SVG ou XHTML). CSS descreve como os elementos devem ser renderizados em uma página da web.

JavaScript

JavaScript é uma linguagem de script do lado do cliente com tipagem flexível que é executada no navegador do usuário. JavaScript interage com elementos html (elementos DOM) para tornar a interface do usuário da web interativa. JavaScript implementa os padrões ECMAScript, que incluem recursos básicos baseados na especificação ECMA-262, bem como outros recursos, que não são baseados nos padrões ECMAScript. Conhecimento de JavaScript é um pré-requisito para DC.js.

Componentes

DC.js é baseado em duas excelentes bibliotecas JavaScript, que são -

Crossfilter
D3.js

Crossfilter

Crossfilter é uma biblioteca JavaScript para explorar grandes conjuntos de dados multivariados no navegador. É usado para agrupar, filtrar e agregar dezenas ou centenas de milhares de linhas de dados brutos muito rapidamente.

D3.js

D3.js significa Documentos Orientados por Dados. D3.js é uma biblioteca JavaScript para manipular documentos com base em dados. D3 é um framework de visualização de dados online dinâmico, interativo e usado em um grande número de sites. D3.js é escrito porMike Bostock, criado como um sucessor de um kit de ferramentas de visualização anterior chamado Protovis. O D3.js é usado em centenas de milhares de sites.