D3.js - Installazione

In questo capitolo impareremo come configurare l'ambiente di sviluppo D3.js. Prima di iniziare, abbiamo bisogno dei seguenti componenti:

  • Libreria D3.js
  • Editor
  • programma di navigazione in rete
  • server web

Esaminiamo i passaggi uno per uno in dettaglio.

Libreria D3.js

Dobbiamo includere la libreria D3.js nella tua pagina web HTML per poter utilizzare D3.js per creare la visualizzazione dei dati. Possiamo farlo nei seguenti due modi:

  • Includi la libreria D3.js dalla cartella del tuo progetto.
  • Include la libreria D3.js da CDN (Content Delivery Network).

Scarica la libreria D3.js

D3.js è una libreria open source e il codice sorgente della libreria è disponibile gratuitamente sul web all'indirizzo https://d3js.org/sito web. Visitare il sito Web D3.js e scaricare l'ultima versione di D3.js (d3.zip). Al momento, l'ultima versione è 4.6.0.

Al termine del download, decomprimere il file e cercare d3.min.js. Questa è la versione ridotta del codice sorgente di D3.js. Copia il file d3.min.js e incollalo nella cartella principale del tuo progetto o in qualsiasi altra cartella, dove desideri conservare tutti i file della libreria. Includi il file d3.min.js nella tua pagina HTML come mostrato di seguito.

Example - Consideriamo il seguente esempio.

<!DOCTYPE html>
<html lang = "en">
   <head>
      <script src = "/path/to/d3.min.js"></script>
   </head>

   <body>
      <script>
         // write your d3 code here.. 
      </script>
   </body>
</html>

D3.js è un codice JavaScript, quindi dovremmo scrivere tutto il nostro codice D3 all'interno del tag "script". Potrebbe essere necessario manipolare gli elementi DOM esistenti, quindi è consigliabile scrivere il codice D3 appena prima della fine del tag "body".

Include la libreria D3 da CDN

Possiamo utilizzare la libreria D3.js collegandola direttamente alla nostra pagina HTML dal Content Delivery Network (CDN). CDN è una rete di server in cui i file sono ospitati e vengono consegnati a un utente in base alla sua posizione geografica. Se utilizziamo il CDN, non è necessario scaricare il codice sorgente.

Includere la libreria D3.js utilizzando l'URL CDN https://d3js.org/d3.v4.min.js nella nostra pagina come mostrato di seguito.

Example - Consideriamo il seguente esempio.

<!DOCTYPE html>
<html lang = "en">
   <head>
      <script src = "https://d3js.org/d3.v4.min.js"></script>
   </head>

   <body>
      <script>
         // write your d3 code here.. 
      </script>
   </body>
</html>

Editor D3.js

Avremo bisogno di un editor per iniziare a scrivere il tuo codice. Ci sono alcuni ottimi IDE (Integrated Development Environment) con supporto per JavaScript come -

  • Codice di Visual Studio
  • WebStorm
  • Eclipse
  • Testo sublime

Questi IDE forniscono il completamento del codice intelligente e supportano alcuni dei moderni framework JavaScript. Se non hai un IDE elegante, puoi sempre utilizzare un editor di base come Blocco note, VI, ecc.

Programma di navigazione in rete

D3.js funziona su tutti i browser tranne IE8 e versioni precedenti.

Server web

La maggior parte dei browser serve file HTML locali direttamente dal file system locale. Tuttavia, ci sono alcune limitazioni quando si tratta di caricare file di dati esterni. Negli ultimi capitoli di questo tutorial, caricheremo dati da file esterni comeCSV e JSON. Pertanto, sarà più facile per noi se configuriamo il server web fin dall'inizio.

Puoi utilizzare qualsiasi server web con cui sei a tuo agio, ad esempio IIS, Apache, ecc.

Visualizzazione della tua pagina

Nella maggior parte dei casi, possiamo semplicemente aprire il tuo file HTML in un browser web per visualizzarlo. Tuttavia, quando si caricano origini dati esterne, è più affidabile eseguire un server Web locale e visualizzare la pagina dal server(http://localhost:8080).