contact us

Use the form on the right to contact us.

You can edit the text in this area, and change where the contact form on the right submits to, by entering edit mode using the modes on the bottom right.

via Seradina 11/e, 25040
Cortefranca, Brescia
Italy

+39 338 3158562

D3js

MP Blog

D3js

Mauro Piccini

Cos’è D3

D3 è una librerie javascript utilizzata principalmente per la creazione di grafici interattivi.

In realtà è un sistema per gestire il mapping tra strutture dati e oggetti DOM.

API

Alla base delle funzionalità rese disponibili da D3, c'è una gestione degli eventi di ingresso, uscita e aggiornamento dei dati associati alla struttura della pagina HTML. Questo approccio al problema permette di concentrarsi su come deve essere visualizzato il singolo dati piuttosto che sulla realizzazione dell'intero grafico.

associazione

Durante la fase di associazione viene collegato un array di oggetti dom a una struttura ad oggetti che può essere caricata ad esempio da un file json. In questa fase d3 verifica quali oggetti della struttura sono già mappati con gli oggetti dom e calcola quali eventi scatenare.

ingresso

Le procedure di ingresso vengono scatente quando un oggetto della struttura non ha associato un oggetto dom. d3 si aspetta che in questa procedura venga creato l'oggetto dom da associare.

uscita

L'uscita viene richiamata quando un oggetto dom perder l'oggetto a cui era associato. D3 si aspetta che l'oggetto dom venga cancellato.

aggiornamento

Infine l'aggiornamento avviene per tutti gli altri oggetti. In realtà non esiste una vera e proprio fase di aggiornamento e normalmente questa fase è applicata a tutti gli oggetti dom prima della fase di ingresso.

Pensare in d3

Il ribaltamento della modalità di creazione della visualizzazione è l'ostacolo più grosso all'utilizzo di D3. Anche se la curva di apprendimento non è altissima, è necessario uno sforzo iniziale per imparare a ragionare ad eventi e abbandonare le logiche di generazione di strutture tradizionali con codice procedurale.

Per affrontare un primo progetto con D3 bisogna imparare a decidere cosa deve succedere quando :

  • arriva un nuovo dato?
  • sparisce un dato?
  • cambia un dato?

Vi rimando ad un efficace tutorial per vedere come ragiona D3: http://mbostock.github.io/d3/tutorial/circle.html

Non solo svg

La cosa che mi ha stupito maggiormente è stato non trovare altre soluzioni che utilizzano D3 per generare HTML piuttosto che SVG. Credo che le sue potenzialità possano andare ben oltre la produzione di grafici. Potrebbe essere sfruttato per renderizzare tabelle o addirittura testi generati da una struttura dati.

Conclusioni

D3 è una fantastica libreria che permette di creare soluzioni con una così grande quantità di sfaccettature che è difficile trovare qualcosa che non possa fare. Oltretutto il cambio di approccio al problema è ottimo esercizio di flessibilità mentale che è sempre utile per imparare a trovare soluzioni.

Oltre

...a quanto accennato esiste un mondo nella libreria di D3. Dalla gestione di layout avanzati al supporto per zoom e interazione con mouse e tastiera. Particolarmente potente è l'uso delle transazioni per rendere la rappresentazione ancora più efficace.

Riferimenti

  • http://d3js.org
  • https://github.com/mbostock/d3