Dashboard interattive in javascript con d3js

 
D3 è ormai la libreria javascript di riferimento per sviluppare applicazioni web di visualizzazione dati nel browser e sempre più progetti vengono sviluppati a partire da essa.
 
Obiettivi

Durante il corso impareremo a impostare una visualizzazione interattiva e ad analizzare, capire e riutilizzare gli innumerevoli esempi open-source disponibili, anche ispezionando il loro funzionamento mediante gli strumenti standard dei browser moderni (il firebug di Firefox e/o i developer tools di Chrome). Vedremo poi come maneggiare dataset complessi per costruire una vera e propria dashboard interattiva.

 
Prerequisiti

È richiesta una minima conoscenza pregressa di HTML e CSS e di programmazione in javascript, ma ci sarà occasione di chiarire o approfondire alcuni aspetti dei linguaggi. Per quanto gli argomenti in sé possano essere affrontati in maniera molto tecnica e approfondita, non è questo il taglio del corso, che invece sarà alla portata anche di chi non ha forti basi in programmazione, ma che abbia almeno visto una volta il sorgente di una pagina web.

 
Strumenti

Per ogni argomento affrontato sarà fornito un esempio funzionante su jsFiddle e/o github con cui giocare autonomamente. Per farlo è necessario un laptop (pc o mac, windows, linux o macos) con tastiera fisica. Smartphone e tablet possono essere sufficienti per vedere e interagire con gli esempi, meno per modificarli.

 
Programma

Di seguito il programma di massima e i temi affrontati, naturalmente il tutto è passibile di modifica in base agli interessi dei partecipanti.

 
Prima parte: grafica vettoriale e d3js

Da HTML a SVG (simple vector graphics), manipolare le pagine con javascript e controllarne l'aspetto con CSS.

• Il setup di base: HTML, selettori CSS e DOM (dipendente dal grado di preparazione della sala)
• La grafica vettoriale: SVG e fogli di stile
• Visualizzare dati e scegliere la visualizzazione più adatta: interpretare numeri come dimensioni, distanze, spessori, colori, ecc.
• Accoppiare i dati agli elementi grafici: selezione, join e scale.
• Creare e distruggere elementi grafici in base ai dati: metodi enter(), append(), exit(), remove().
• Dati dinamici: transizioni e interpolazione.
• Esempi con cui giocare: barre, linee, torte, treemap, grafi.
   

Seconda parte: dashboard interattive

Andare al di là di un singolo grafico e costruire vere e proprie dashboard interattive a partire da strutture complesse di dati richiede un passo in più e librerie più specializzate, come crossfilter e dc.js.

• Dataset complessi: la libreria crossfilter.js.
• Ridurre la complessità: map reduce, dimensioni e gruppi.
• Esplorare i dati: filtri.
• Costruire una dashboard in pochi minuti: la libreria dc.js
   

Contatti

Alessio: jenkin@dataninja.it

--> Alessio e Cristina, powered by Dataninja School <--