La data visualization
1.
2.
3.
4.
5.
Agenda
La data visualization - Perché è importante
Tutte le forme della data visualization - Dalle infografiche alla motion infographic
Come creare un’infografica - Dal concept alla realizzazione
I migliori strumenti - Dai software ai tool online
Esercitazione
la data visualization
Perché è importante
c o s a è ?
1. RIVELA CIÒ CHE NON SI VEDE
“Visualizzare vuole dire rendere certi fenomeni e certe porzioni
della realtà visibili e comprensibili”. 

Joan Costa, Designer
2. È UN’ARTE FUNZIONALE
“Le infografiche dovrebbero essere funzionali come martelli, multistrato
come le cipolle e belle come le equazioni”.

Alberto Cairo, Insegnante di Information Graphics
3. COMPRIME UN GRAN QUANTITÀ DI INFO IN POCO SPAZIO
“E’ come una forma di compressione della conoscenza. 

Quando ci imbattiamo in una giungla di informazioni, trovare una
visualizzazione è come aver scovato una radura tra le piante.”

David McCandless, Data Journalist

c o s a p e r m e t t e a l l e a z i e n d e ?
CON OSCERE decid ere PREVEDER E CON DIV IDERE inn ovar e
Van tag gi c hiave per le aziende
3.Prevedere
i trend
di mercato.
1.Conoscere le
dinamiche 

del proprio
mercato
e le esigenze 

dei clienti.
5.
Creare nuove
idee e soluzioni
per l’azienda e i
clienti.
2.Prendere
decisioni giuste
al momento
giusto.
4.Rendere fruibili
info complesse

ai diversi settori
aziendali.
qu estio ne di “pun ti di vista”
Vendita dei vinili dal 1993
Milioni di unità
10 -
8 -
6 -
4 -
2 -
1993
Fonte: RIAA
1996 1999 2002 2005 2008 2011 2014
0 -
vinili lp + ep
1973 ‘78 ‘81 ‘84 ‘87 ‘90 ‘93 ‘96 ‘99 ‘02 ‘05 ‘08 ‘11 ‘14
qu estio ne di “pun ti di vista”
600 -
400 -
300 -
150 -
0 -
Milioni di unità
Fonte: RIAA
vinili lp + ep
vinili singoli (45)
Vendita dei vinili dal 1973
tutte le forme della data visualization
Dalle infografiche alla 

motion infographic
dataviz “complesse”
di stefanie posavec
photoviz
di Peter orntoft
infografiche interattive
di Invision
dataviz interattive
the pudding
LINK: http://multe.lastampa.it/
LINK: http://truth-and-beauty.net/projects/peakspotting
LINK: http://truth-and-beauty.net/projects/epfl-data-monolith
….
LINK: http://beta.wind-and-words.com/seasons/4/data
LINK: https://vimeo.com/128373915
LINK: https://vimeo.com/165361372
LINK: https://youtu.be/u2YhDQtncK8
Come creare un’infografica
Dal concept alla realizzazione
qu attro macr o-modelli
Declarative
Exploratory
conceptual
data-driven
Idea
Illustration
Everyday

Dataviz
Visual

Discovery
Visual confirmation
Visual exploration
Idea

generation
Fonte: Scott Berinato, Harvard Business Review
c ar atteristich e chiaveFonte: McCandless, Trad. Nico Spadoni
Fonte: Federica Fragapane, “Crime in Northern
Italy Visual Exploration”
sch ema d i p rogetto
Step p rel iminari
1 Definire target
audience
3 Definire il
medium
La definizione del
target influenza il tone
of voice dei copy e la
scelta dello stile
grafico.
Dimensioni, formato del file e
risoluzione dell’infografica
dipendono dalla
destinazione d’uso.
2 Scegliere

un topic
Se vogliamo creare una
infografica originale,
soprattutto in ambito data-
journalism, dobbiamo avere
una tesi e argomentazioni
supportate dai dati.
Step p rel iminari
5 Trovare dati/
informazioni utili
6 Processare
i dati
Alcune fonti dei dati:
- ricerche, sondaggi, articoli stampa,
ricerche accademiche, …
- Portali Open data
- Google Trends per i dati digital
- sondaggi personali con Google
Forms
Excel, Numbers o Google
spreadsheet sono gli
strumenti più usati per
elaborare i dati.
Se disponete di dati su pdf,
potete usare tool come Tabula
o Free Ocr per portare tutto
sui fogli di calcolo.
4 Definire gli
obiettivi
Alcuni possibili obiettivi:
- rivelare trend e pattern
- presentare in modo semplice
info complesse
- confrontare due concetti/
prodotti
- trasformare una storia in
una timeline
Step p rel iminari
7 Trovare una
storia nei dati
Intervistare i dati:
- cambiamenti nel tempo
- differenze o analogie
tra gli item
- aggregazione degli item
- relazione tra una o più
variabili
Step p rel iminari
8 Scegliere una tipologia
di infografica
Mixed Informational Timeline How to Process Comparison
8 Scegliere una tipologia
di infografica
Location Photo-graphic Gerarchica Single Chart Numbers Anatomical
Step p rel iminari
9 Creare un
wireframe
Cosa includere nei
wireframe:
- definire le aree principali
- inserire introduzione,
titoli e sottotitoli
- sketch dei grafici
- sketch delle illustrazioni
o delle icone
Fonte: SeeMei Chow
real izzazio n e grafica
A Scegliere

uno stile visivo
B Scegliere uno
schema colori
C Scegliere una
combinazione di font
Suggerimenti:
- massimo 3 colori
- usare il colore o l’assenza di colori
per evidenziare il messaggio
Tool online utili:
- Adobe Color CC
- Coolors
Una metafora visiva o uno
stile grafico aiuta a rendere
più appealing il vostro
progetto e ad armonizzare
tutti gli elementi della
composizione.
L’uso dei font è elemento
essenziale per il look & feel del
progetto.
Tool online utili:
- Canva Font Combinations
- Typewolf
real izzazio n e grafica
D Usare elementi di design
in modo funzionale
E Mettere insieme tutti
gli elementi
Alcuni elementi per rendere bella
e funzionale la vostra infografica:
- immagini in background
- elementi divisori per le diverse
sezioni
- forme geometriche
- numeri in grafica
Aspetti da considerare:
- creare un punto focale
- creare gerarchia visuale
- bilanciare la posizione degli
elementi
- creare un design
complessivo coerente
- usare lo spazio “bianco” in
modo efficace
F Pubblicare

il lavoro
Se avete realizzato un progetto
personale, non vi resta che
pubblicare il vostro lavoro su
siti come:
- Visual.ly
- Reddit Infographics
- Slideshare
i migliori strumenti
Dai software ai tool online 

per la data visualization
software p er il design
illustrator after effec tsphoto sho p sketc h
too l o n lin e free 1/2
too l o n lin e free 2/2
ac c ou nt twitter da seguire
@albertocairo @giorgialupi @mccandelish @moritz_stefaner
Alberto
Cairo
Giorgia
lupi
David
McC andless
MOr itz
stefan er
siti d i r iferimento
https://datavizcatalogue.com http://www.thefunctionalart.com http://blog.visme.co https://
www.informationisbea
utifulawards.com
e s e r c i t a z i o n e
s i e t e p r o n t i ?
po ssibil i ob iettiv i dell’infografi ca
1) Un’azienda che si occupa di installazione di colonnine di ricarica decide
di entrare nel mercato italiano. Es. Quale è il contesto di riferimento e quali
sono le regioni in cui iniziare un primo test di mercato?
2) Un’azienda di mobili intende installare punti di ricarica per veicoli
elettrici nei propri punti vendita. Es. Cosa fanno i competitor?
3) Un’azienda intende rinnovare il proprio parco auto con dei veicoli
elettrici. Es. Quale modello scegliere?
4) Un’azienda automobilista intende lanciare un nuovo modello di auto
elettrica nel mercato europeo/italiano. Es. In quale Paese lanciare l’auto?
L’Italia è un mercato promettente?
5) Un’azienda di car sharing intende aprire una nuova rete in Italia. Es.
cosa dicono sui social gli italiani? La rete dei punti di ricarica è capillare?

La data visualization

  • 1.
  • 2.
    1. 2. 3. 4. 5. Agenda La data visualization- Perché è importante Tutte le forme della data visualization - Dalle infografiche alla motion infographic Come creare un’infografica - Dal concept alla realizzazione I migliori strumenti - Dai software ai tool online Esercitazione
  • 3.
  • 4.
    c o sa è ? 1. RIVELA CIÒ CHE NON SI VEDE “Visualizzare vuole dire rendere certi fenomeni e certe porzioni della realtà visibili e comprensibili”. 
 Joan Costa, Designer 2. È UN’ARTE FUNZIONALE “Le infografiche dovrebbero essere funzionali come martelli, multistrato come le cipolle e belle come le equazioni”.
 Alberto Cairo, Insegnante di Information Graphics 3. COMPRIME UN GRAN QUANTITÀ DI INFO IN POCO SPAZIO “E’ come una forma di compressione della conoscenza. 
 Quando ci imbattiamo in una giungla di informazioni, trovare una visualizzazione è come aver scovato una radura tra le piante.”
 David McCandless, Data Journalist

  • 5.
    c o sa p e r m e t t e a l l e a z i e n d e ?
  • 6.
    CON OSCERE decidere PREVEDER E CON DIV IDERE inn ovar e
  • 7.
    Van tag gic hiave per le aziende 3.Prevedere i trend di mercato. 1.Conoscere le dinamiche 
 del proprio mercato e le esigenze 
 dei clienti. 5. Creare nuove idee e soluzioni per l’azienda e i clienti. 2.Prendere decisioni giuste al momento giusto. 4.Rendere fruibili info complesse
 ai diversi settori aziendali.
  • 8.
    qu estio nedi “pun ti di vista” Vendita dei vinili dal 1993 Milioni di unità 10 - 8 - 6 - 4 - 2 - 1993 Fonte: RIAA 1996 1999 2002 2005 2008 2011 2014 0 - vinili lp + ep
  • 9.
    1973 ‘78 ‘81‘84 ‘87 ‘90 ‘93 ‘96 ‘99 ‘02 ‘05 ‘08 ‘11 ‘14 qu estio ne di “pun ti di vista” 600 - 400 - 300 - 150 - 0 - Milioni di unità Fonte: RIAA vinili lp + ep vinili singoli (45) Vendita dei vinili dal 1973
  • 10.
    tutte le formedella data visualization Dalle infografiche alla 
 motion infographic
  • 11.
  • 12.
  • 13.
  • 14.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
    Come creare un’infografica Dalconcept alla realizzazione
  • 24.
    qu attro macro-modelli Declarative Exploratory conceptual data-driven Idea Illustration Everyday
 Dataviz Visual
 Discovery Visual confirmation Visual exploration Idea
 generation Fonte: Scott Berinato, Harvard Business Review
  • 25.
    c ar atteristiche chiaveFonte: McCandless, Trad. Nico Spadoni
  • 26.
    Fonte: Federica Fragapane,“Crime in Northern Italy Visual Exploration” sch ema d i p rogetto
  • 27.
    Step p reliminari 1 Definire target audience 3 Definire il medium La definizione del target influenza il tone of voice dei copy e la scelta dello stile grafico. Dimensioni, formato del file e risoluzione dell’infografica dipendono dalla destinazione d’uso. 2 Scegliere
 un topic Se vogliamo creare una infografica originale, soprattutto in ambito data- journalism, dobbiamo avere una tesi e argomentazioni supportate dai dati.
  • 28.
    Step p reliminari 5 Trovare dati/ informazioni utili 6 Processare i dati Alcune fonti dei dati: - ricerche, sondaggi, articoli stampa, ricerche accademiche, … - Portali Open data - Google Trends per i dati digital - sondaggi personali con Google Forms Excel, Numbers o Google spreadsheet sono gli strumenti più usati per elaborare i dati. Se disponete di dati su pdf, potete usare tool come Tabula o Free Ocr per portare tutto sui fogli di calcolo. 4 Definire gli obiettivi Alcuni possibili obiettivi: - rivelare trend e pattern - presentare in modo semplice info complesse - confrontare due concetti/ prodotti - trasformare una storia in una timeline
  • 29.
    Step p reliminari 7 Trovare una storia nei dati Intervistare i dati: - cambiamenti nel tempo - differenze o analogie tra gli item - aggregazione degli item - relazione tra una o più variabili
  • 30.
    Step p reliminari
  • 31.
    8 Scegliere unatipologia di infografica Mixed Informational Timeline How to Process Comparison
  • 32.
    8 Scegliere unatipologia di infografica Location Photo-graphic Gerarchica Single Chart Numbers Anatomical
  • 33.
    Step p reliminari 9 Creare un wireframe Cosa includere nei wireframe: - definire le aree principali - inserire introduzione, titoli e sottotitoli - sketch dei grafici - sketch delle illustrazioni o delle icone Fonte: SeeMei Chow
  • 34.
    real izzazio ne grafica A Scegliere
 uno stile visivo B Scegliere uno schema colori C Scegliere una combinazione di font Suggerimenti: - massimo 3 colori - usare il colore o l’assenza di colori per evidenziare il messaggio Tool online utili: - Adobe Color CC - Coolors Una metafora visiva o uno stile grafico aiuta a rendere più appealing il vostro progetto e ad armonizzare tutti gli elementi della composizione. L’uso dei font è elemento essenziale per il look & feel del progetto. Tool online utili: - Canva Font Combinations - Typewolf
  • 35.
    real izzazio ne grafica D Usare elementi di design in modo funzionale E Mettere insieme tutti gli elementi Alcuni elementi per rendere bella e funzionale la vostra infografica: - immagini in background - elementi divisori per le diverse sezioni - forme geometriche - numeri in grafica Aspetti da considerare: - creare un punto focale - creare gerarchia visuale - bilanciare la posizione degli elementi - creare un design complessivo coerente - usare lo spazio “bianco” in modo efficace F Pubblicare
 il lavoro Se avete realizzato un progetto personale, non vi resta che pubblicare il vostro lavoro su siti come: - Visual.ly - Reddit Infographics - Slideshare
  • 36.
    i migliori strumenti Daisoftware ai tool online 
 per la data visualization
  • 37.
    software p eril design illustrator after effec tsphoto sho p sketc h
  • 38.
    too l on lin e free 1/2
  • 39.
    too l on lin e free 2/2
  • 40.
    ac c ount twitter da seguire @albertocairo @giorgialupi @mccandelish @moritz_stefaner Alberto Cairo Giorgia lupi David McC andless MOr itz stefan er
  • 41.
    siti d ir iferimento https://datavizcatalogue.com http://www.thefunctionalart.com http://blog.visme.co https:// www.informationisbea utifulawards.com
  • 42.
    e s er c i t a z i o n e s i e t e p r o n t i ?
  • 43.
    po ssibil iob iettiv i dell’infografi ca 1) Un’azienda che si occupa di installazione di colonnine di ricarica decide di entrare nel mercato italiano. Es. Quale è il contesto di riferimento e quali sono le regioni in cui iniziare un primo test di mercato? 2) Un’azienda di mobili intende installare punti di ricarica per veicoli elettrici nei propri punti vendita. Es. Cosa fanno i competitor? 3) Un’azienda intende rinnovare il proprio parco auto con dei veicoli elettrici. Es. Quale modello scegliere? 4) Un’azienda automobilista intende lanciare un nuovo modello di auto elettrica nel mercato europeo/italiano. Es. In quale Paese lanciare l’auto? L’Italia è un mercato promettente? 5) Un’azienda di car sharing intende aprire una nuova rete in Italia. Es. cosa dicono sui social gli italiani? La rete dei punti di ricarica è capillare?