Il documento esplora il concetto di information design, enfatizzando l'importanza di utilizzare simboli, immagini e grafica per semplificare e rendere accessibili informazioni complesse. Attraverso esempi pratici, il testo dimostra come le rappresentazioni grafiche possano comunicare in modo più efficace rispetto ai dati grezzi, aiutando nell'analisi e nella pianificazione di strategie. Vengono inoltre forniti suggerimenti su come progettare rappresentazioni visive efficaci, tenendo conto della natura del pubblico e del messaggio da trasmettere.

1. Information Design
Visualizzazione d’Informazioni
Quantitative
Social Media Lab
Università IULM
Duccio Schiavon 11/Mag/2009

2. Cos’è l’Information Design?
Nell’Information design vengono
utilizzati simboli, immagini, colori, e
parole per comunicare idee, illustrare
informazioni o esprimere visualmente
relazioni

3. io utilizzo
immagini
simboli
colori
parole
con l’obiettivo di
comunicare idee
Illustrare informazioni
esprimere relazioni
detto in altro modo

4. http://xkcd.com/
Esempio di come utilizzare immagini e parole per comunicare
idee

5. http://awesome.goodmagazine.com/transparency/web/0904/trans0409ourfavoritedrugs.html
Esempio di come utilizzare immagini, parole, simboli e
colori per comunicare idee

6. Con l’Information Design noi
raccontiamo una storia
La storia viene raccontata visivamente
per cui la sua rappresentazione dev’essere
chiara
trasformare informazioni complesse in materiale semplice da comprendere
gradevole
catturare l’attenzione dell’osservatore
convincente
l’osservazione dei meri dati grezzi spesso non aiuta a chiarire la reale natura
del fenomeno d’interesse. La rappresentazione deve riuscire a spiegare ciò
che difficilmente riescono a fare le statistiche da sole

7. Esempio di come una rappresentazione grafica funzioni meglio di una
tabella di dati grezzi
Prevalenza virus HIV
La mappa illustra la distribuzione di tutte le persone di età compresa tra i 15 i 49 anni affetti da HIV.
http://www.dailymail.co.uk/news/article-439315/How-world-really-shapes-up.html

8. Esempio di come una rappresentazione grafica funzioni meglio di una
tabella di dati grezzi
La mappa dell’open source
L’OSI (Open Source Index) misura il livello di attività open source in 75 paesi
http://www.redhat.com/about/where-is-open-source/activity/

9. Esempio di come una rappresentazione grafica funzioni meglio di una
tabella di dati grezzi
Interpretazione immediata impossibile
I punteggi OSI sono organizzati per tipologia d’ambiente
(Governativo/Istituzionale, Industriale, Privato).
La tabulazione non aiuta, in quanto il caratteristico formato
stile CSV non consente neppure di confrontare i
punteggi dello stesso settore lungo i differenti paesi

10. Esempio di come una rappresentazione grafica sia certamente più
gradevole di una serie di numeri
Acqua, aria, terra
Sinistra: Tutta l’acqua al mondo (1,4087 miliardi di chilometri cubici) inclusa l’acqua del mare, dei ghiacciai, dei laghi, dei fiumi, delle nuvole, ecc.
Destra: Tutta l’aria contenuta nell’atmosfera (5140.000 miliardi di tonnellate) racchiusa in una sfera al livello del mare.
http://blog.phiffer.org/post/27344630/left-all-the-water-in-the-world-1-4087-billion

11. Esempio di come una rappresentazione grafica sia certamente più chiara
se associata ai numeri
“Siediti dove
rischi di meno”
Tassi di sopravvivenza
associati alle diverse
poltrone di un aereo,
calcolati sulla base
dell’analisi degli
incidenti aerei
commerciali
avvenuti negli USA
dal 1971
http://www.popularmechanics.com/science/air_space/4219452.html

12. Per descrivere un fenomeno
- ai propri superiori
- ai propri clienti
- al pubblico
- ai media
- ad istituti pubblici
- ai media
A cosa serve l’Information Design?

13. Per analizzare i propri dati
- scoprire tendenze nascoste
- evidenziare evoluzioni nel sistema
d’interesse
A cosa serve l’Information Design?

14. Per operazioni di pianificazione
- analizzare relazioni
- illustrare reti (sociali)
- individuare dove le ns azioni possono avere
un impatto maggiore
- prevedere tendenze future
A cosa serve l’Information Design?

15. Per rendere visibile l’informazione
- evidenziare relazioni di causa-effetto
- illustrare le conseguenze di particolari
scelte
- confrontare e contrapporre
A cosa serve l’Information Design?

16. Per semplificare e chiarire
- illustrare l’analisi di un’idea astratta
- mostrare il flusso di un processo o di
sistema in cambiamento
- rendere le proprie conclusioni visibili e facili
da esplorare
- mostrare la struttura e mettere ordine in
dati apparentemente caotici
A cosa serve l’Information Design?

17. 1) Per illustrare un fenomeno
2) Per analizzare dati
3) Per operazioni di pianificazione
4) Per rendere visibile l’informazione
5) Per chiarire e semplificare
per grandi punti

18. Esempio di come illustrare un fenomeno
Il successo delle trilogie
Il successo al cinema di ognuno
dei singoli episodi delle più
celebri trilogie cinematografiche.
http://danmeth.com/post/774716
20/my-trilogy-meter-1-in-a-
series-of-pop-cultural

19. Esempio di come illustrare un fenomeno
Crisi finanziaria
La crisi vita dal punto di vista dei mutui, del mercato immobiliare e dei fallimenti bancari.
http://awesome.goodmagazine.com/transparency/usersubmissions/financialcrisis/aler/index.html

20. Esempio di come analizzare dati
R: Una risposta a tutti i quesiti analitici
R è un software di analisi statistica open source. Offre un bagaglio di strumenti per la visualizzazione
grafica di ogni tipo di risultato numerico
http://www.r-project.org/

21. Esempio di pianificazione
Albero Decisionale
Gli Alberi Decisionali sono un
ottimo strumento per
coniugare chiarezza
espositiva e potenza analitica
http://www.nytimes.com/

22. Esempio di come chiarire un concetto a partire da un insieme
di dati direttamente difficili da interpretare
Quanti galloni di benzina per passeggero occorrono per coprire una
distanza di 350 miglia?
http://www.good.is/

23. Pianificare una rappresentazione dell’informazione
Quale tipo di dati è più adatto ad essere
rappresentato sotto forma di grafico,
diagramma o mappa?
Le Mappe sono utili per l’illustrazione di fenomeni spaziali. I Grafici vengono più spesso utilizzati per
illustrare l’evoluzione di trend e quantità nel tempo. I Diagrammi (di flusso e non) possono essere
meglio impiegati per illustrare processi o relazioni.
Come riconoscere quale tipo d’informazione
rappresentare e quale ignorare?
Gli aspetti chiave da chiarire sono:
• Quale storia desidero raccontare?
• A chi mi voglio rivolgere?
• Come desidero catturare l’attenzione dei destinatari del mio messaggio?

24. Pianificare una rappresentazione dell’informazione
Qual è l’effetto che si desidera produrre nel
destinatario?
Rispondere a questa domanda aiuterà a stabilire di quale natura sia la
propria audience, e cosa si desidera che susciti in essa il proprio lavoro
di design
Si consideri il contenuto della storia così come il tono e la forma del messaggio. Come verrà letto il
nostro messaggio? La nostra audience dimostra di avere un interesse a priori per il soggetto
rappresentato oppure il nostro obiettivo è quello di raggiungere nuovi destinatari?
Si pianifichi la rappresentazione sulla base delle preferenze del
destinatario, e non per se stessi

25. Lavorare sui dati
Quale informazione devo raccogliere?
Quali tipi di dati ho a disposizione?
I dati sono utilizzabili per scopi di rappresentazione?
Ma soprattutto, i dati sono adatti per rappresentare il messaggio che desidero
rivolgere ai miei destinatari?

26. “Media” e “Mezzo”
Su quale supporto, media, o mezzo verrà pubblicata la nostra rappresentazione?
Come verrà pubblicata e distribuita?
I Media differiscono notevolmente tra loro in termini di visibilità e di costi.
Quale media è più adatto per la nostra campagna. Quale audience per i
nostri grafici?
La velocità è un elemento chiave. I destinatari saranno in grado di fermarsi a leggere i grafici? O si limiteranno a dedicar loro
solo pochi secondi? Un “mezzo” più rapido potrebbe richiedere un approccio molto più d’impatto e semplice. Un “mezzo”
più lento potrebbe consentire l’impiego di una maggiore densità informativa
La nostra rappresentazione è destinata a durare nel
tempo?

27. Suggerimenti per la propria rappresentazione
• Preferire sempre la soluzione più semplice
• Rappresentare preferibilmente confronti, contrasti e differenze
• Il titolo è chiaro?
• Utilizzare le legende lì dove possibile
• Citare sempre le fonti. Per la rappresentazione di dati questo è un aspetto fondamentale
• Limitare per quanto possibile l’utilizzo di numeri: Essi stessi sono una rappresentazione. Utilizzarli significa utilizzare una rappresentazione dentro la rappresentazione

28. Suggerimenti per la propria rappresentazione
• Minimizzare il numero di passaggi richiesti per l’interpretazione della rappresentazione
• Dare importanza al contesto

29. La nuova rivoluzione dell’Information Design su
monitor:
L’interazione e l’animazione
Migliore Visualizzazione/Animazione del 2009
(secondo il mio personale giudizio)…:
Jonathan Jarvis (http://crisisofcredit.com/)

30. Processing
http://processing.org/

31. Processing
Processing è uno strumento open source distribuito sotto GNU Public License
(GPL)
Processing consiste di:
• Un Ambiente di Sviluppo (Processing Development Environment, PDE).
Questo software può essere eseguito con il semplice doppio clic sull’icona di
Processing. PDE è un Ambiente Integrato di Sviluppo (IDE) composto da un
insieme minimale di funzionalità.
• Raccolta di funzioni (anche note come comandi o metodi) che compongono il
“core” dell’interfaccia di programmazione (API), così come delle molte librerie
progettate per l’integrazione di funzioni più avanzate e specifiche (OpenGL,
lettura file XML, salvataggio in formato PDF, ecc.)
• Una sintassi identica a Java ma con piccole modifiche
• Una comunità attiva online, ospitata in http://processing.org

32. Introduzione all’utilizzo
Sketch con Processing
“hello world”
“hello mouse”
Esportare e distribuire
il tuo lavoro
Creare immagini del tuo
lavoro
Caricamento e
visualizzazione dei dati
Librerie

33. Sistema di Coordinate e Forme
(spazio delle coordinate)

34. Sistema di Coordinate e Forme
(Forme semplici)
Definizione di un punto

35. Sistema di Coordinate e Forme
(Forme semplici)
Definizione di una linea

36. Sistema di Coordinate e Forme
(Forme semplici)
Definizione di un quadrato con definizione coord. angolo
in alto a sinistra e misure di lunghezza e larghezza

37. Sistema di Coordinate e Forme
(Forme semplici)
Definizione di un quadrato in modalità rectMode(CENTER)
(coord. centro, lunghezza e altezza)

38. Sistema di Coordinate e Forme
(Forme semplici)
Definizione di un quadrato in modalità rectMode(CORNERS)
(coord. 4 angoli)

39. Sistema di Coordinate e Forme
(Forme semplici)
Definizione di un’ellisse e diverse modalità della funzione
ellipseMode()

40. Pur trattandosi di un
vero e proprio
linguaggio di
programmazione, la
logica è semplice ed
accessibile a tutti
Esempi applicativi

41. http://www.openprocessing.org/
http://www.vimeo.com/tag:processing.org
http://www.processingblogs.org/
Visualizing Data
By Ben Fry
Learning Processing
By Daniel Shiffman
Alcune risorse utili per Processing

42. ggplot

43. • Installazione di ggplot2 in R
• http://had.co.nz/ggplot2
• documentati 99 oggetti ggplot con oltre 500 esempi
• i realizzatori del pacchetto sono disponibili per
feedback e contributi
• il manuale dedicato è uno dei più completi mai
scritti per un pacchetto di R

44. • Oltre 54.000 diamanti archiviati in
http://www.diamondse.info
• Carati, colore, chiarezza, taglio
• Profondità, larghezza, altezza
• Prezzo
Diamanti

45. • Offre tutte le funzionalità di ggplot con in più una
sintassi semplificata
Caratteristiche aggiuntive
• I dati vengono scalati automaticamente
• E’ possibile produrre qualsiasi tipo di grafico
• Sfondi e margini
qplot

46. qplot(diamonds$carat, diamonds$price)
qplot(carat, price, data = diamonds)
qplot(carat, price, data = diamonds,colour=clarity)
qplot(carat, price, data = diamonds,geom=c("point",
"smooth"), method=lm)
qplot(carat, data = diamonds,geom="histogram")
qplot(carat, data = diamonds,geom="histogram",
binwidth = 100)
qplot

47. • Dati
• Oggetto geometrico (geom)
• Trasformazione statistica (stat)
• Scale
• Sistema di coordinate
• (+ Aggiustamento posizionamento, sfondo)
Componenti

48. • Geom: bar o histogram
• Stat: bin
• Scala: lineare
• Sistema di coordinate
Cartesiano
Istogramma
qplot(carat,data = diamonds,geom="bar")

49. • Geom: bar o histogram
• Stat: bin
• Scala: lineare
• Sistema di coordinate
Cartesiano
Scatterplot
qplot(speed, dist, data = cars,geom="point")

50. La precedente è una semplificazione
Si può ricorrere ad una logica molto più raffinata, detta “a
strati” attraverso il ricorso alla funzione ggplot
Strato (layer): data + mapping + geom + stat +
position
Funzione ggplot
(definizione del grafico per strati)

51. Definizione del grafico
ggplot(data, mapping) +
layer(
stat = "",
geom = "",
position = "",
geom_parms = list(),
stat_params = list(),
)

52. Strati
• Solitamente non verrà scritto l’intera
specificazione, ma si useranno delle
abbreviazioni:
- geom_smooth()
- stat_summary()
- …
• Ogni geom ha la sua statistica predefinita,
ogni statistica ha un geom predefinito (anche
se questo può essere sovrascritto)

53. Esempi
d <- ggplot(diamonds,aes(x=carat, y=price))
d + geom_point()
d + geom_point(aes(colour = carat))
ggplot(diamonds,aes(x=price, y=carat)) +
geom_point(aes(colour = carat))

54. Data + Mapping
(Dati + Mappatura)
• Dati e mappature solitamente definiscono le
caratteristiche principali del grafico:
• ggplot(data, mapping = aes(x=x,y=y)
• La funzione aes descrive il tipo di relazione

55. Geom
(geometrie)
• Geom definisce la “forma” base degli
elementi nel grafico
• Punti, linee, poligoni, barre, testo
• Statistiche: istogrammi, lisciamenti, densità
• Possibilità composite: boxplot, range valori

56. Stat
(statistiche)
• Non ancora utilizzate esplicitamente, anche
se sottostanno a molti strati qui creati; alcune
geometrie (geom) implicano infatti un loro
utilizzo “nascosto”:
- geom_histogram = stat_bin + geom_bar
- geom_smooth = stat_smooth + geom_ribbon
- geom_density = stat_density + geom_ribbon

57. Esempi
p <- ggplot(diamonds, aes(x=price))
p + geom_histogram()
p + stat_bin(geom="area")
p + stat_bin(geom="point")
p + stat_bin(geom="line")
p + geom_histogram(aes(fill = clarity))

58. Risorse
http://had.co.nz/ggplot/
http://had.co.nz/ggplot2/book/
http://addictedtor.free.fr/graphiques/
Risorse

59. http://www.gapminder.org/
Gapminder

60. • Animazione ed Interattività
avanzate alla portata di tutti
• Capacità di spiegare un
fenomeno composto da:
- Componente temporale
- Analisi bivariata
- Appartenenza di gruppo
• Potenzialità infinite della
tecnologia Adobe Flash

61. Risorse su web
Critica grafica
http://junkcharts.typepad.com/
Intrattenimento
http://www.good.is/
Come rappresentare flussi di dati
in modo convincente e affascinante
http://flowingdata.com/
Il paradiso della visualizzazione “tutta”
http://infosthetics.com/
Iniziativa tutta italiana di divulgazione ed elaborazione di materiale, progetti e studi
nell’ambito del Master Degree in Communication Design at the Politecnico di
Milano (http://www.densitydesign.org/)

62. Eminenze
Edward Tufte
“Il Leonardo da Vinci dei dati”
http://www.edwardtufte.com/tufte/
Ben Fry
Ovvero Mr Processing
http://benfry.com/
Steve Duenes
Direttore Grafico presso il New York Times
http://www.nytimes.com/

63. Strumenti
R
http://www.r-project.org/
Microsoft Excel
Processing
http://processing.org/
HTML + CSS + Javascript
Flash/Action Script
http://www.adobe.com/flashplatform/

64. Piattaforme di Condivisione Visualizzazioni e Dati
ManyEyes
http://manyeyes.alphaworks.ibm.com/manyeyes/
Swivel
http://www.swivel.com/
Zoho Sheet
http://sheet.zoho.com/
Google Docs
docs.google.com/

65. Grazie mille a tutti