DC.js - Conceptos

DC.js es simple y fácil para la mayoría de los desarrolladores front-end. Permite crear gráficos básicos rápidamente, incluso sin ningún conocimiento de D3.js. Antes, comenzamos a usar DC.js para crear visualización; necesitamos familiarizarnos con los estándares web. Los siguientes estándares web se utilizan mucho en D3.js, que es la base de DC.js para representar gráficos.

  • Lenguaje de marcado de hipertexto (HTML)
  • Modelo de objetos de documento (DOM)
  • Hojas de estilo en cascada (CSS)

Entendamos cada uno de estos estándares web en detalle.

Lenguaje de marcado de hipertexto (HTML)

Como sabemos, HTML se utiliza para estructurar el contenido de la página web. Se almacena en un archivo de texto con la extensión ".html".

Un ejemplo de HTML básico típico se ve como se muestra a continuación:

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

   </body>
</html>

Modelo de objetos de documento (DOM)

Cuando un navegador carga una página HTML, se convierte en una estructura jerárquica. Cada etiqueta en HTML se convierte en un elemento / objeto en el DOM con una jerarquía padre-hijo. Hace que nuestro HTML esté más estructurado lógicamente. Una vez que se forma el DOM, resulta más fácil manipular (agregar / modificar / eliminar) los elementos de la página.

Entendamos el DOM usando el siguiente 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>

El modelo de objeto de documento del documento HTML anterior es el siguiente:

Hojas de estilo en cascada (CSS)

Mientras que HTML proporciona una estructura a la página web, los estilos CSS hacen que la página web sea más agradable de ver. CSS es un lenguaje de hoja de estilo que se utiliza para describir la presentación de un documento escrito en HTML o XML (incluidos dialectos XML como SVG o XHTML). CSS describe cómo se deben representar los elementos en una página web.

JavaScript

JavaScript es un lenguaje de secuencias de comandos del lado del cliente de tipo flexible que se ejecuta en el navegador del usuario. JavaScript interactúa con elementos html (elementos DOM) para que la interfaz de usuario web sea interactiva. JavaScript implementa los estándares ECMAScript, que incluye características principales basadas en la especificación ECMA-262, así como otras características, que no se basan en los estándares ECMAScript. El conocimiento de JavaScript es un requisito previo para DC.js.

Componentes

DC.js se basa en dos excelentes bibliotecas de JavaScript, que son:

  • Crossfilter
  • D3.js

Filtro cruzado

Crossfilter es una biblioteca de JavaScript para explorar grandes conjuntos de datos multivariados en el navegador. Se utiliza para agrupar, filtrar y agregar decenas o cientos de miles de filas de datos sin procesar muy rápidamente.

D3.js

D3.js son las siglas de Data-Driven Documents. D3.js es una biblioteca de JavaScript para manipular documentos basados ​​en datos. D3 es un marco de visualización de datos dinámico, interactivo y en línea y se utiliza en una gran cantidad de sitios web. D3.js está escrito porMike Bostock, creado como sucesor de un conjunto de herramientas de visualización anterior llamado Protovis. D3.js se utiliza en cientos de miles de sitios web.