Menu

Le coordinate dell'information design

Visualizzazione sul Sei nazioni

Aprile 8, 2013 - Data Visualization, Infografiche
Visualizzazione sul Sei nazioni

Quando ci stavamo interrogando su quale sarebbe stata la seconda visualizzazione interattiva che avremmo realizzato per cartesiani.it, io e Nicola ci siamo imbattuti in questa classifica del Sei nazioni 2013, che il sito de “Il sole 24 ore” chiamava grafico. Siamo rimasti sorpresi perchè solitamente la testata milanese è molto attenta alla presentazione del dato, sia nelle sue uscite online che in quelle offline: da qui la nostra volontà di produrre qualcosa di più visivamente impattante, considerando anche il rilevante piazzamento ottenuto dalla nazionale italiana.

L’infografica interattiva che abbiamo realizzato ha 4 componenti principali:

  1. Dati
  2. Grafici
  3. Stile
  4. Interazione

1. Dati
Per il reperimento dei dati ci siamo appoggiati alla classifica sopra citata e al fornitissimo sito di statistiche sportive Statbunker, sezione Six nations.

2. Grafici
Per rappresentare i grafici abbiamo utilizzato la libreria javascript Chart.js, che riceve in input i dati sotto forma di array javascript e produce in output dei grafici in formato canvas (lineare, istogramma, radar, polar area, ciambella e torta sono i tipi disponibili). Il risultato finale è buono, condito anche da una gradevole animazione al loading. Forse manca la renderizzazione dei valori inseriti all’hover sui grafici (li abbiamo aggiunti noi con script jQuery), ma data l’alta qualità della libreria siamo sicuri che gli autori provvederanno presto a colmare questa lacuna.

grafici

3. Stile
Il font che abbiamo utilizzato è Exo, un font-face gratuito di Google; per i colori ci siamo ispirati a una palette trovata su COLOURlovers; per le icone abbiamo attinto da thenounproject.com e da immagini trovate in rete.

4. Interazione
Nella classifica generale abbiamo usato uno script jQuery per animare i palloni da rugby al click su vota.

classifica
Infine per il piccolo paralasse della graduatoria Top scorer abbiamo usato il plugin jQuery zLayers.

scorer

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *