D3.js: differenze tra le versioni

Versione delle 15:24, 5 lug 2018

Versione attuale delle 00:31, 9 lug 2024

(7 versioni intermedie di 7 utenti non mostrate)

Riga 9:

|SistemaOperativo = multipiattaforma

|Stato sviluppo = Attivo

|Genere = Librerialibreria softwarejavascript

|Lingua =

}}

{{Citazione|Documenti creati dai dati|nome|Data-Driven Documents|lingua=en}}

'''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: [[Scalable Vector Graphics|SVG]], [[HTML5]], e [[Cascading Style Sheets|CSS]]. È il successore del precedente framework [[Protovis]].<ref>{{cita pubblicazione |url=httphttps://mbostock.github.com/d3/tutorial/protovis.html |titolo=For Protovis Users |pubblicazione=D3.js |accesso=18 agosto 2012 |urlarchivio=https://web.archive.org/web/20120806072124/http://mbostock.github.com/d3/tutorial/protovis.html |urlmorto=sì }}</ref> Diversamente da molte altre librerie, D3 permette un ottimo controllo e resa visiva sul risultato finale.<ref name="Viau_2012/06">{{cita pubblicazione |url=http://www.datameer.com/blog/author/cviau |titolo=What’s behind our Business Infographics Designer? D3.js of course |cognome=Viau |nome=Christophe |pubblicazione=[[Datameer]]'s blog |data=26 giugno 2012 |accesso=18 agosto 2012 |urlmorto=sì |urlarchivio=https://web.archive.org/web/20150923212800/http://www.datameer.com/blog/author/cviau |dataarchivio=23 settembre 2015 }}</ref>

Il suo sviluppo è iniziato nel 2011,<ref>{{cita pubblicazione|url=http://books.google.com/books?id=nTpjoNgJQOMC |titolo=Making Sense of Data III: A Practical Guide to Designing Interactive Data Visualizations |nome1=Glenn J. |cognome1=Myatt |nome2=Wayne P. |cognome2=Johnson |urlcapitolo=http://books.google.com/books?id=nTpjoNgJQOMC&pg=SL1-PA2 |capitolo=5.10 Further reading |paginap=A–2 |editore=[[John Wiley & Sons]] |città=Hoboken|data=settembre 2011 |ISBN=978-0-470-53649-0|accesso=23 gennaio 2013 }}</ref> e la versione 2.0.0 uscì ad agosto 2011.<ref>{{cita pubblicazione|url=https://github.com/mbostock/d3/wiki/Release-Notes |titolo=Release Notes |pubblicazione=D3.js |accesso=22 agosto 2012 }}</ref><ref>{{cita web|titolo=d3 Releases|url=https://github.com/mbostock/d3/releases|accesso=10 febbraio 2015}}</ref>

== 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 possopossono essere largamente personalizzati utilizzando lo standard web dei "fogli di stile a cascata", chiamati in inglese [[Cascading Style Sheets|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 [[Comma-separated values|CSV]] o [[geoJSON]], ma, se necessario, disi 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 {{harvnb|Bostock|Ogievetsky|Heer|2011}}, chap. 3). Per esempio, usando D3, uno può selezionare tutti gli elementi {{tag|p}} della pagina HTML e quindi cambiare il loro colore, per esempio, in fucsia:

<sourcesyntaxhighlight lang="javascript">

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

</syntaxhighlight>

</source>

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 ===

Line 77 ⟶ 76:

{{Controllo di autorità}}

{{Portale|informatica|software libero}}