DC.js - Concetti

DC.js è semplice e facile per la maggior parte degli sviluppatori front-end. Consente la creazione rapida di grafici di base, anche senza alcuna conoscenza di D3.js. In precedenza, iniziamo a utilizzare DC.js per creare la visualizzazione; dobbiamo acquisire familiarità con gli standard web. I seguenti standard web sono ampiamente utilizzati in D3.js, che è la base di DC.js per il rendering dei grafici.

  • Hypertext Markup Language (HTML)
  • Document Object Model (DOM)
  • Fogli di stile CSS (Cascading Style Sheets)

Cerchiamo di comprendere in dettaglio ciascuno di questi standard web.

Hypertext Markup Language (HTML)

Come sappiamo, l'HTML viene utilizzato per strutturare il contenuto della pagina web. Viene memorizzato in un file di testo con estensione ".html".

Un tipico esempio HTML di base ha l'aspetto mostrato di seguito:

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

   </body>
</html>

Document Object Model (DOM)

Quando una pagina HTML viene caricata da un browser, viene convertita in una struttura gerarchica. Ogni tag in HTML viene convertito in un elemento / oggetto nel DOM con una gerarchia padre-figlio. Rende il nostro HTML strutturato in modo più logico. Una volta formato il DOM, diventa più facile manipolare (aggiungere / modificare / rimuovere) gli elementi sulla pagina.

Facci capire il DOM utilizzando il seguente 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>

Il modello a oggetti del documento del documento HTML di cui sopra è il seguente:

Fogli di stile CSS (Cascading Style Sheets)

Mentre l'HTML fornisce una struttura alla pagina web, gli stili CSS rendono la pagina web più piacevole da guardare. CSS è un linguaggio per fogli di stile utilizzato per descrivere la presentazione di un documento scritto in HTML o XML (inclusi dialetti XML come SVG o XHTML). CSS descrive come gli elementi dovrebbero essere visualizzati su una pagina web.

JavaScript

JavaScript è un linguaggio di scripting lato client a bassa tipizzazione che viene eseguito nel browser dell'utente. JavaScript interagisce con elementi html (elementi DOM) per rendere interattiva l'interfaccia utente web. JavaScript implementa gli standard ECMAScript, che include funzionalità di base basate sulla specifica ECMA-262 e altre funzionalità, che non sono basate sugli standard ECMAScript. La conoscenza di JavaScript è un prerequisito per DC.js.

Componenti

DC.js si basa su due eccellenti librerie JavaScript, che sono:

  • Crossfilter
  • D3.js

Crossfilter

Crossfilter è una libreria JavaScript per esplorare grandi set di dati multivariati nel browser. Viene utilizzato per raggruppare, filtrare e aggregare decine o centinaia di migliaia di righe di dati grezzi molto rapidamente.

D3.js

D3.js è l'acronimo di Data-Driven Documents. D3.js è una libreria JavaScript per la manipolazione di documenti basati sui dati. D3 è un framework di visualizzazione dei dati dinamico, interattivo e online e viene utilizzato in un gran numero di siti Web. D3.js è scritto daMike Bostock, creato come successore di un precedente toolkit di visualizzazione chiamato Protovis. D3.js è utilizzato su centinaia di migliaia di siti web.