D3.js, Data-Driven Documents, è una libreria Javascript open source che semplifica la creazione di infografiche, diagrammi e chart creando e personalizzando ogni singolo elemento, animazione e comportamento. Non è una semplice libreria di grafici pronti all’uso ma un set di API, utility, algoritmi e pattern matematici che semplificano i complessi calcoli legati alla creazione di interfacce grafiche interattive. Inoltre, la particolarità della libreria è quella di creare uno stretto legame tra spazio e dati, ovvero tra DOM e il modello di dati, facilitando tutti i processi di aggiornamento e transizione grazie al pattern di selezione enter-update-exit fornito da D3.
Può essere utilizzata per manipolare qualunque elemento di una pagina HTML, tuttavia si sposa perfettamente con lo standard SVG ed è in questo contesto che D3.js emerge rispetto a tutti gli altri framework.
Il partecipante dovrà possedere una certà familiarità con l’uso di HTML, CSS ma soprattutto Javascript (variabili, manipolazione array e oggetti, cicli, funzioni) e preferibilmente aver già utilizzato in precedenza le funzionalità di selezione di CSS e/o jQuery.
Durante la giornata di corso il partecipante apprenderà le principali funzionalità fornite dalla libreria D3.js tra le quali: selezione e manipolazione DOM e SVG; binding e datadriven documents; enter-update-exit pattern; animazioni; styling; eventi mouse e touch; creazione e gestione axis di un grafico, scaling e domain; caricamento dati e molto altro. Saranno inoltre realizzati dei chart partendo dalle basi e personalizzando ogni singolo elemento della UI e sarà inoltre fornita una breve introduzione su alcuni dei più famosi layout D3 per la creazione di infografiche complesse e interattive.
Tutti gli argomenti sono affrontati dal punto di vista teorico e accompagnati da moltissimi esercizi dimostrativi che saranno sviluppati e descritti durante il corso.