# D3.js

D3.js (o solo D3 per Data-Driven Documents) è una libreria JavaScript per creare visualizzazioni dinamiche ed interattive partendo da dati organizzati, visibili attraverso un comune browser. Per fare ciò si serve largamente degli standard web: SVG, HTML5, e CSS. È il successore del precedente framework Protovis. Diversamente da molte altre librerie, D3 permette un ottimo controllo e resa visiva sul risultato finale. Il suo sviluppo è iniziato nel 2011, e la versione 2.0.0 uscì ad agosto 2011.

## Funzionamento principale

La libreria JavaScript D3, incorporata in una pagina web HTML, utilizza funzioni JavaScript prefatte per selezionare elementi del DOM, creare elementi SVG, aggiungergli uno stile grafico, oppure transizioni, effetti di movimento e/o tooltip. Questi oggetti possono essere largamente personalizzati utilizzando lo standard web dei "fogli di stile a cascata", chiamati in inglese CSS. In questo modo grandi collezioni di dati possono essere facilmente convertiti in oggetti SVG usando semplici funzioni di D3 e così generare ricche rappresentazioni grafiche di numeri, testi, mappe e diagrammi. I dati utilizzati possono essere in diversi formati, il più comune è il JSON, valori separati da virgola CSV o geoJSON, ma, se necessario, si possono scrivere funzioni JavaScript apposta per leggere dati in altri formati.

### Selezioni

Il concetto centrale del design di D3 è permettere al programmatore di usare dei selettori, come per i CSS, per scegliere i nodi all'interno del DOM Document Object Model e quindi usare operatori per manipolarli, similmente alla libreria jQuery. Per esempio, usando D3, uno può selezionare tutti gli elementi <p>…</p> della pagina HTML e quindi cambiare il loro colore, per esempio, in fucsia:
La selezione può essere basata su tag (come nell'esempio qui sopra), elementi, classi, identificatori, attributi o punti della gerarchia. Una volta che gli elementi sono selezionati possiamo applicare operazioni su di essi. Questo comprende leggere ed impostare attributi, mostrare testi, formattare (come nell'esempio precedente). Gli elementi possono anche essere aggiunti e rimossi. Questo processo di modifica, creazione ed eliminazione di elementi HTML, può essere eseguito in base ai set di dati forniti, che è il concetto di base di D3.js.

### Aggiunta di nodi utilizzando dati

Una volta che un set di dati viene associato a un documento, l'utilizzo di D3.js generalmente segue un modello secondo il quale per ogni elemento dell'insieme di dati associato vengono invocate una funzione esplicita .enter, una funzione implicita "update" e una esplicita .exit. Tutti i metodi concatenati dopo il comando .enter verranno chiamati per ciascun elemento dell'insieme di dati per i quali non sia già presente un nodo DOM nella selezione (il selectAll mostrato precedentemente). Allo stesso modo, la funzione di aggiornamento implicita viene chiamata su tutti i nodi selezionati esistenti per i quali esiste un elemento corrispondente nell'insieme di dati, e viene chiamata la .exit su tutti i nodi selezionati esistenti che non abbiano un elemento nel set di dati a loro collegato. La documentazione D3.js fornisce diversi esempi di come funziona questo meccanismo.

## Struttura delle API

L'API di D3.js è fatta da diverse migliaia di funzioni, che possono essere raggruppate nelle seguenti unità logiche:
* Selezioni
* Transizioni
* Array
* Matematiche
* Colori
* Scale
* SVG
* Orari
* Layout
* Geografia
* Geometria
* Comportamenti

## Librerie e strumenti simili

* Datacopia
* SAS
* Tableau
* R
* Processing
* Matplotlib
* gnuplot
* Zoomdata