Canvas è l'elemento naturale (in HTML5) per aggregare informazioni utilizzando rappresentazioni grafiche, perciò in questo capitolo realizzeremo una Infografica dinamica.
L'infografica nasce per fornire una chiave di lettura concisa e visivamente intrigante di un insieme di dati raggruppati o disposti secondo regole razionali. Anche se il termine in se può suonare alieno, siamo circondati da continue manifestazioni di questo fenomeno: le previsioni meteo, il diagramma del tracciato della metropolitana, le mappe di orientamento dei centri commerciali e grafiche che riassumono le preferenze alle elezioni sono tutti validi esempi di applicazioni di infografica.
Incrociare questa tecnica con il Canvas è decisamente interessante: possiamo infatti aggiungere dinamicità alle nostre creazioni, rendendole reattive all'interazione da parte di un utente o all'arrivo di nuovi dati.
Ma come possiamo coniugare un obiettivo come questo con delle API ostiche e complicate come quelle del Canvas? La risposta sta nell'utilizzo di apposite librerie studiate per facilitare lo sviluppo di questo genere di applicazioni.
Processing.js
Ci concentreremo su Processing.js, porting in Javascript dell'omonimo linguaggio 'Processing', a sua volta dialetto di Java. Processing nasce nel 2001 per mano di Casey Reas e Benjamin Fry, entrambi appartenenti ad un gruppo di ricerca del MIT, con l'obiettivo di diffondere un linguaggio semplice da utilizzare che sappia però offrire allo sviluppatore complete potenzialità visuali.
Queste caratteristiche lo rendono fin da subito una scelta interessante per tutti quei progetti che mescolano componenti di sviluppo a forti aspetti di design e di interazione; di solito affidati a persone dallo spiccato background grafico che possono quindi beneficiare della semplicità offerta da queste API
(l'intero linguaggio presenta circa 70 funzioni).
Nel 2008 Jhon Resig rilascia un primo porting di questo linguaggio su tecnologia Javascript: un vero e proprio parser capace di tradurre codice Processing in istruzioni Javascript da eseguire all'interno di un Canvas indicato. Negli anni seguenti, e fino ad oggi, lo sviluppo di Processing.js non si è mai fermato dando luogo a 13 release (siamo alla 1.3) e coinvolgendo una ricca community di sviluppatori.
È facile quindi intuire le naturale predisposizione per questo linguaggio allo sviluppo di infografiche: la rete offre diversi progetti realizzati in tal senso, ai quali si aggiungerà quanto realizzeremo nel corso di queste lezioni.
Il progetto: Twitter Stream
Costruiamo una applicazione che mostri in tempo reale ed in modo interessante i vari tweet in merito ad un argomento di nostra scelta aggregati in base alla nazionalità provenienza. Il progetto completo saprà riassumere queste informazioni in una infografica interattiva come quella dell'immagine successiva:
Figura 1. Twitter Stream
(clic per ingrandire)
Ciascun mattoncino rappresenta un tweet e tutti i tweet sono incolonnati a seconda della lingua di appartenenza. Questo esempio ci darà modo di esplorare i seguenti temi:
- Creazione di un progetto con Processing.js
- Setup delle funzioni principali e dello scheletro dell'applicazione
- Integrazione tra Processing.js e Javascript per lo scambio dei dati
- Implementazione di effetti come la gravità e la gestione delle collisioni
- Manipolazione del colore
- Utilizzo di componenti testuali
- Interazione con l'utente
Ognuno di questi punti ci darà spazio per trattare sia del linguaggio che delle difficoltà di
implementazione tipiche di un progetto come questo. L'esempio completo è disponibile a questo indirizzo.