D3.js – Creare chart e infografiche interattive

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.

Prerequisiti

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.

Obiettivi formativi

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.

Programma

• Introduzione a D3
• Selezioni in D3
• Il pattern enter-update-exit:
• Scale, Domain, Range
• Introduzione allo standard SVG e utilizzo in D3.js
• Axes Interpolators
• Sviluppare un intero chart da zero:
• Panoramica sui layout D3