DC.js - Concepts

DC.js est simple et facile pour la plupart des développeurs front-end. Il permet de créer rapidement des graphiques de base, même sans aucune connaissance de D3.js. Avant, nous commençons à utiliser DC.js pour créer une visualisation; nous devons nous familiariser avec les standards du Web. Les normes Web suivantes sont largement utilisées dans D3.js, qui est la base de DC.js pour le rendu des graphiques.

Langage de balisage hypertexte (HTML)
Modèle d'objet de document (DOM)
Feuilles de style en cascade (CSS)

Laissez-nous comprendre chacune de ces normes Web en détail.

Langage de balisage hypertexte (HTML)

Comme nous le savons, HTML est utilisé pour structurer le contenu de la page Web. Il est stocké dans un fichier texte avec l'extension «.html».

Un exemple HTML basique typique ressemble à celui ci-dessous -

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

   </body>
</html>

Modèle d'objet de document (DOM)

Lorsqu'une page HTML est chargée par un navigateur, elle est convertie en une structure hiérarchique. Chaque balise HTML est convertie en élément / objet dans le DOM avec une hiérarchie parent-enfant. Cela rend notre HTML plus structuré de manière logique. Une fois le DOM formé, il devient plus facile de manipuler (ajouter / modifier / supprimer) les éléments de la page.

Comprenons le DOM en utilisant le document HTML suivant -

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

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

Le modèle d'objet de document du document HTML ci-dessus est le suivant -

Feuilles de style en cascade (CSS)

Alors que HTML donne une structure à la page Web, les styles CSS rendent la page Web plus agréable à regarder. CSS est un langage de feuille de style utilisé pour décrire la présentation d'un document écrit en HTML ou XML (y compris les dialectes XML tels que SVG ou XHTML). CSS décrit comment les éléments doivent être rendus sur une page Web.

JavaScript

JavaScript est un langage de script côté client au typage lâche qui s'exécute dans le navigateur de l'utilisateur. JavaScript interagit avec les éléments html (éléments DOM) afin de rendre l'interface utilisateur Web interactive. JavaScript implémente les normes ECMAScript, qui incluent des fonctionnalités de base basées sur la spécification ECMA-262 ainsi que d'autres fonctionnalités, qui ne sont pas basées sur les normes ECMAScript. La connaissance de JavaScript est une condition préalable à DC.js.

Composants

DC.js est basé sur deux excellentes bibliothèques JavaScript, qui sont -

Crossfilter
D3.js

Crossfilter

Crossfilter est une bibliothèque JavaScript permettant d'explorer de grands ensembles de données multivariés dans le navigateur. Il est utilisé pour regrouper, filtrer et agréger très rapidement des dizaines ou des centaines de milliers de lignes de données brutes.

D3.js

D3.js signifie Data-Driven Documents. D3.js est une bibliothèque JavaScript pour manipuler des documents basés sur des données. D3 est un cadre de visualisation de données en ligne dynamique, interactif et utilisé dans un grand nombre de sites Web. D3.js est écrit parMike Bostock, créé comme successeur d'une boîte à outils de visualisation antérieure appelée Protovis. D3.js est utilisé sur des centaines de milliers de sites Web.