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.[1] Diversamente da molte altre librerie, D3 permette un ottimo controllo e resa visiva sul risultato finale.[2] Il suo sviluppo è iniziato nel 2011,[3] e la versione 2.0.0 uscì ad agosto 2011.[4][5]
| Data-Driven Documents (D3.js) software | |
|---|---|
| Genere | Libreria software (non in lista) |
| Sviluppatore | Michael Bostock, Jeffrey Heer, Vadim Ogievetsky, and community |
| Ultima versione | 7.9.0 (12 marzo 2024) |
| Sistema operativo | Multipiattaforma |
| Linguaggio | JavaScript |
| Licenza | BSD 3-clausole (licenza libera) |
| Sito web | d3js.org |
Funzionamento principale modifica
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 modifica
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:
d3.selectAll('p') // seleziona tutti gli elementi <p>
.style('color', 'violet') // imposta la chiave: 'color' con il valore: 'violet'
.attr('class', 'squares') // imposta l'attributo 'class' con il valore 'squares'
.attr('x', 50); // imposta l'attributo 'x' con il valore 50px
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 modifica
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 modifica
L'API di D3.js è fatta da diverse migliaia di funzioni, che possono essere raggruppate nelle seguenti unità logiche:[6]
- Selezioni
- Transizioni
- Array
- Matematiche
- Colori
- Scale
- SVG
- Orari
- Layout
- Geografia
- Geometria
- Comportamenti
Librerie e strumenti simili modifica
Note modifica
- ^ For Protovis Users, in D3.js. URL consultato il 18 agosto 2012 (archiviato dall'url originale il 6 agosto 2012).
- ^ Christophe Viau, What’s behind our Business Infographics Designer? D3.js of course, in Datameer's blog, 26 giugno 2012. URL consultato il 18 agosto 2012 (archiviato dall'url originale il 23 settembre 2015).
- ^ Glenn J. Myatt e Wayne P. Johnson, 5.10 Further reading, in Making Sense of Data III: A Practical Guide to Designing Interactive Data Visualizations, Hoboken, John Wiley & Sons, settembre 2011, p. A–2, ISBN 978-0-470-53649-0. URL consultato il 23 gennaio 2013.
- ^ Release Notes, in D3.js. URL consultato il 22 agosto 2012.
- ^ d3 Releases, su github.com. URL consultato il 10 febbraio 2015.
- ^ d3, API Reference · d3/d3 Wiki · GitHub, su Github.com, 30 giugno 2016. URL consultato il 1º agosto 2016.
Altri progetti modifica
Wikimedia Commons contiene immagini o altri file su D3.js
Collegamenti esterni modifica
- Sito ufficiale, su d3js.org.
- D3.js, su packages.debian.org.
- (EN) D3.js, su GitHub.
- Repository sorgenti di D3.js, su github.com.
- (EN) D3.js, su Free Software Directory.
| Controllo di autorità | GND (DE) 1063140641 |
|---|
