training-header_d3

D3.js: creare chart e infografiche interattive

LIVELLO:

PRINCIPIANTE

DURATA:

8 ore

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.

OVERVIEW:

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.

ESTRATTO DAL CORSO:

OBIETTIVI FORMATIVI:

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.

Tutti gli argomenti sono affrontati dal punto di vista teorico e accompagnati da moltissimi esercizi dimostrativi che saranno sviluppati e descritti durante il corso.

CONOSCENZE IN USCITA:

Il partecipante sarà in grado di utilizzare gli strumenti fondamentali di D3.js per lo sviluppo di chart, componenti interattivi e infografiche SVG e HTML personalizzando ogni aspetto.

MATERIALE DIDATTICO:

Ad ogni partecipante sarà consegnato il codice sorgente di tutti gli esercizi affrontati durante il corso.

IL PROGRAMMA:

Introduzione a D3

  • Strumenti di sviluppo
  • Download
  • Potenzialità
  • Esempi di utilizzo

Selezioni in D3

  • Selezioni singole e multiple
  • Trasformare oggetti tramite selezioni
  • Gestire sottoselezioni
  • Chaining e creazione elementi

Il pattern enter-update-exit:

  • Associare i dati alla selezione (join)
  • Le selezioni enter-update-exit
  • Manipolazione DOM e SVG
  • Gestire animazioni
  • D3.js array helpers e utilities

Scale, Domain, Range

  • Introduzione ai concetti di scale, domain e range
  • Linear, Log, Pow e Time Scales
  • Gestire la distribuzione di elementi sulla base delle dimensioni dello schermo

Introduzione allo standard SVG e utilizzo in D3.js

  • SVG: Scalable Vector Graphics
  • Utilizzare forme geometriche: circle, rect, line, path, ellissi
  • Sistema di coordinate
  • Text
  • Raggruppare elementi SVG in gruppi
  • Styling SVG
  • Creare elementi SVG in D3
  • Selezionare e modificare elementi SVG in D3

Axes

Il primo passo per creare un chart è la gestione dinamica degli assi.

  • Creazione, disegno e skinning degli assi di un grafico
  • Personalizzare ticks
  • Personalizzare la griglia

Interpolators

  • Line
  • Area
  • Arc
  • String and colors interpolators

Sviluppare un intero chart da zero:

  • Creare ogni singolo elemento grafico e gestire i comportamenti di un chart.
  • creare data-driven charts
  • animazioni in ingresso e in uscita degli elementi
  • Personalizzazioni grafiche

Panoramica sui layout D3
Utilizzare i layout di D3 per creare infografiche originali e interattive.
Verranno illustrati solo alcuni dei layout D3 più utilizzati ma i concetti saranno facilmente applicabili a moltissimi altri layout.

TECNOLOGIE e LIBRERIE UTILIZZATE DURANTE IL CORSO:

HTML5, SVG, Javascript, D3.js