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.[2] Diversamente da molte altre librerie, D3 permette un ottimo controllo e resa visiva sul risultato finale.[3] Il suo sviluppo è iniziato nel 2011,[4] e la versione 2.0.0 uscì ad agosto 2011.[5]
| Data-Driven Documents (D3.js) software | |
|---|---|
 | |
| Genere | Libreria software (non in lista) |
| Sviluppatore | Michael Bostock, Jeffrey Heer, Vadim Ogievetsky, and community |
| Ultima versione | 3.5.5 (2015 febbraio 10[1]) |
| Sistema operativo | Multipiattaforma |
| Linguaggio | JavaScript |
| Licenza | BSD (licenza libera) |
| Sito web | d3js.org/ |
«Data-Driven Documents»
«Documenti creati dai dati»
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 posso 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, di 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 (see Bostock, Ogievetsky e Heer, chap. 3). 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 apllicare 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.
Librerie e strumenti simili
Note
- ^ d3 Releases, su github.com. URL consultato il 10 febbraio 2015.
- ^ For Protovis Users, in D3.js. URL consultato il 18 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.
- ^ 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.