Setup Menus in Admin Panel

School.Dataninja.it

I fondamenti della data visualization

Visualizzare i dati aiuta a comprenderli e la loro comprensione permette di produrre le migliori visualizzazioni per comunicarli.

I sensi che tutti conosciamo e che usiamo quotidianamente per avere esperienza del mondo esterno sono cinque: vista, tatto, udito, gusto, olfatto. Ma attraverso ognuno di essi non passa la stessa quantità di informazione, anzi. La specie umana è prevalentemente visiva, conosciamo il mondo raccogliendo e analizzando immagini, forme e colori, più che odori, gusti e suoni. Una grandissima parte della cultura è appresa mediante la vista, attraverso l’azione di lettura. Attraverso una codifica delle informazioni per immagini è possibile sfruttare le capacità innate che l’uomo ha sviluppato nel corso dell’evoluzione per veicolarle, facendo leva anche su una dimensione meno razionale e consapevole, suggerendo più che affermando. Il vasto campo di ricerca delle neuroscienze e della psicologia della percezione visiva può fornire molte evidenze empiriche e quadri teorici su cui basare una strategia di comunicazione, anche nel caso della progettazione di un’infografica.

Visualizzare, interpretare, comprendere

I vantaggi delle immagini sui formati puramente testuali sono sostanzialmente due:

  1. tante informazioni in relativamente poco spazio;
  2. relazioni tra le informazioni implicite, ma immediatamente percepite.

Il primo caso è ben rappresentato dal detto “un’immagine vale più di mille parole” e deriva dal fatto che il linguaggio verbale è visivamente unidimensionale, mentre con un’immagine puoi giocare con molte dimensioni: larghezza, altezza, dimensioni, colori, spessori, tratteggi, sfumature, simboli, ecc. Il secondo caso invece ti permette di veicolare un’informazione derivata (per esempio, un paese è più ricco di un altro) a partire da un dato atomico (il valore dei pil dei due paesi) senza necessariamente esplicitarla (due cerchi affiancati con aree proporzionali al pil dei due paesi, piuttosto che la frase “il paese X è più ricco del paese Y”).

Comprendere un’informazione richiede sempre un processo di interpretazione, che sia visiva o verbale. Tutti, più o meno, percepiamo la realtà allo stesso modo, ma interpretiamo queste percezioni in maniera molto differente, in base alla cultura, all’esperienza e alle peculiarità personali. Per questo l’interpretazione e quindi la successiva comprensione di un’informazione possono non coincidere con il fine comunicativo del produttore di quell’informazione stessa. Sempre per questo tu per primo devi essere ben consapevole dell’informazione che vuoi veicolare e di come potrebbe essere interpretata (o malinterpretata) dal tuo pubblico. E, tornando al punto uno, tra le tante informazioni veicolate tutte insieme, devi sapere e decidere quali priorità assegnare a ognuna di esse.

Qualsiasi scelta tu faccia, devi sempre prendere in considerazione ciò che vuoi dire e a chi vuoi dirlo. A volte puoi non sapere bene cosa dire, perché magari ancora non conosci le informazioni nascoste nei dati, altre volte tutto il tuo pubblico sei tu stesso, ma il discorso non cambia: non lasciare mai nulla al caso.

Visualizzare per esplorare

Il vantaggio dell’estrema sinteticità di una visualizzazione è molto utile in fase di esplorazione, quando hai tra le mani dei dati ma non hai ancora bene le idee chiare di cosa rappresentino, di quali informazioni possano contenere, di quanto possano essere buoni, completi, privi di errori, ecc. In altre parole quando non hai ancora un quadro interpretativo dei dati a disposizione.

In questa fase puoi ricorrere agli strumenti messi a disposizione dalla semplice statistica descrittiva: calcolare minimi, massimi e medie di serie di numeri, contare le occorrenze di parole in una serie di testi oppure quelle di elementi che ricadono in una particolare categoria, ecc. Visualizzare opportunamente queste informazioni ti permette di avere un colpo d’occhio sul tuo dataset, che potrebbe anche essere molto grande e quindi più facilmente maneggiabile se riassunto e aggregato. Costruendo una mappa da un dataset che sembra contenere dati sulle nazioni del mondo, per esempio, puoi scoprire che in realtà è completo e affidabile solo per un continente come l’Europa e quindi portarti a concentrarti solo su quest’ultima e scartare gli altri.

Visualizzare per scoprire e capire

A meno che tu non stia copiando un comunicato stampa, nella maggior parte dei casi vuoi estrarre informazioni da un insieme di dati che non sono immediatamente palesi. La semplice lista dei pil dei paesi europei non dice chi è più ricco, perché è necessaria un’azione di ordinamento per esplicitare questa informazione. In questo, come nella maggior parte dei casi, l’informazione latente sta nella relazione reciproca tra i dati di partenza, non nei dati stessi. Puoi trasformare questa relazione / informazione in dati derivati, per esempio assegnando a ogni paese la sua posizione nella classifica dei più ricchi (ottenuta ordinando i dati originari), rendendola così esplicita.

Elenco PIL (PPA) (in miliardi di dollari internazionali) da it.wikipedia.org/wiki/Stati_europei_per_PIL
Nazione 2014 2015 est. 2016 est. 2017 est. 2018 est.
Germania 3338,019 3450,133 3565,023 3685,826 3808,536
Russia 2629,691 2738,411 2860,194 2990,347 3126,375
Regno Unito 2497,254 2604,087 2715,969 2832,786 2959,581
Francia 2336,609 2414,391 2502,328 2598,840 2701,684
Italia 1846,941 1901,225 1961,591 2023,841 2083,907
Spagna 1424,856 1464,052 1508,689 1556,905 1607,291
Turchia 1219,193 1278,781 1348,234 1423,126 1502,155
Polonia 855,570 899,478 947,273 1000,460 1057,124
Paesi Bassi 717,146 741,672 768,961 798,719 830,574
Belgio 434,503 447,565 461,940 477,555 493,871
Svezia 414,056 432,333 451,746 471,912 492,970
Austria 373,133 386,373 400,169 414,033 428,387
Svizzera 570,350 583,032 594,751 606,765 617,687
Rep. Ceca 295,891 307,209 319,726 333,566 348,487
Romania 295,979 308,724 323,672 341,241 360,124
Norvegia 289,392 299,977 311,697 324,438 337,796
Grecia 271,308 284,169 300,298 316,980 334,141
Portogallo 251,451 259,619 268,995 279,315 290,140
Danimarca 218,338 225,923 234,041 242,737 251,936
Ungheria 205,244 212,507 220,184 228,429 237,048
Finlandia 197,816 203,550 210,536 218,265 226,557
Irlanda 195,020 203,369 212,456 222,152 232,306
Bielorussia 153,750 160,381 167,909 175,840 184,300
Slovacchia 138,277 144,879 152,798 161,465 170,622
Azerbaigian 109,559 116,639 122,988 129,491 137,347
Bulgaria 108,257 112,930 118,528 124,526 130,825
Serbia 83,714 85,918 89,301 93,365 98,088
Croazia 78,576 80,288 82,887 86,175 89,744
Lituania 70,904 74,653 78,813 83,335 88,209
Slovenia 58,509 60,110 62,160 64,519 67,028
Lussemburgo 44,186 45,805 47,592 49,624 51,706
Lettonia 41,005 43,561 46,225 49,122 52,103
Bosnia ed Erzegovina 33,251 34,923 36,903 39,147 41,527
Estonia 30,943 32,502 34,275 36,216 38,296
Georgia 29,368 31,381 33,578 35,956 38,513
Albania 27,469 28,878 30,663 32,684 34,837
Macedonia 23,652 24,899 26,340 27,937 29,645
Armenia 21,542 22,910 24,443 26,178 28,037
Cipro 21,536 22,104 22,943 23,952 24,980
Kosovo 14,810 15,757 16,859 17,970 19,154
Moldavia 13,974 14,862 15,826 16,788 17,808
Islanda 13,757 14,429 15,150 15,912 16,599
Malta 12,011 12,440 12,889 13,358 13,849
Montenegro 7,747 8,115 8,487 8,911 9,352

La tabella dell’esempio non è altro che una visualizzazione di dati, in cui la relazione esplicita è mostrata orizzontalmente: paese e pil corrispondente sono sulla stessa riga. Se modifichi la visualizzazione opportunamente, per esempio spostando le righe in alto e in basso in modo che i pil siano ordinati in maniera descrescente, espliciti una relazione implicita tra i paesi e ottieni la classifica dei paesi più ricchi. In questo modo visualizzare i dati ti permette di scoprire informazione. Tu sei l’autore della visualizzazione, tu stesso sei l’utente di questa visualizzazione.

Visualizzare per comunicare

Una volta che ti sono chiare le informazioni contenute nei dati e ciò che vuoi dire al tuo pubblico, puoi scegliere la strategia migliore per comunicargli quelle e proprio quelle. Non è necessario, e per lo più utile, usare le stesse strategie che ti hanno permesso di scoprire quelle informazioni, perché il pubblico è diverso, non sei più tu stesso. Se hai usato una tabella ordinata per scoprire i paesi più ricchi d’Europa, puoi offrire una choropleth o un cartogramma per comunicare questa informazioni al tuo pubblico. Cambiando modalità, naturalmente, cambia la percezione che se ne può avere e quindi devi considerare le possibili interpretazioni che se ne possono fare. Se per esempio le differenze di colore sono troppo piccole, la choropleth è anche corretta, ma risulta difficilmente interpretabile correttamente o semplicemente non abbastanza d’impatto rispetto all’importanza che dai tu stesso all’informazione veicolata.

Nonostante sia vero che per l’utente finale la visualizzazione serva per scoprire un’informazione che non conosce, per te è già tutto chiaro e il tuo fine è fargli scoprire proprio quell’informazione e non altre, magari meno rilevanti. Quindi le strategie scelte per comunicare ad altri devono essere diverse rispetto a quelle messe in campo per scoprire tu stesso. Magari gli strumenti possono coincidere, ma scopo e target sono diversi.

Disegnare dati e informazioni

Solitamente i dati a disposizione sono di due tipi: numeri o stringhe di testo. A parte scriverli, per esempio con la notazione araba i primi e in lingua italiana le seconde, che vuol dire visualizzarli? In fondo le immagini non sono composte da numeri e testi, ma da forme e colori (e tanto altro). È necessario infatti esplicitare un legame tra un dato e un elemento grafico in maniera che il secondo rappresenti opportunamente il primo. E che le relazioni reciproche tra vari elementi grafici rappresentino opportunamente anche quelle tra i dati a cui sono legati.

Considera per esempio un cerchio. Per definirlo univocamente hai bisogno di almeno tre parametri:

  • posizione del centro (due numeri, x e y in un grafico cartesiano);
  • lunghezza del raggio (un numero).

Ma un cerchio reale può essere caratterizzato da molti parametri ulteriori, come il colore e/o il motivo del riempimento, lo spessore, colore, tratteggio della circonferenza. Un poligono regolare ne ha anche di più, come il numero di lati e l’angolo di rotazione attorno al centro.

Considera ora i dati del pil dei paesi europei. Vuoi mostrare il valore dei pil, ma anche evidenziare la top 10 dei paesi più ricchi e quella dei paesi più poveri.

Elenco PIL (PPA) (in miliardi di dollari internazionali) da it.wikipedia.org/wiki/Stati_europei_per_PIL
Ordine Nazione 2014 2015 est. 2016 est. 2017 est. 2018 est.
01 Germania 3338,019 3450,133 3565,023 3685,826 3808,536
02 Russia 2629,691 2738,411 2860,194 2990,347 3126,375
03 Regno Unito 2497,254 2604,087 2715,969 2832,786 2959,581
04 Francia 2336,609 2414,391 2502,328 2598,840 2701,684
05 Italia 1846,941 1901,225 1961,591 2023,841 2083,907
06 Spagna 1424,856 1464,052 1508,689 1556,905 1607,291
07 Turchia 1219,193 1278,781 1348,234 1423,126 1502,155
08 Polonia 855,570 899,478 947,273 1000,460 1057,124
09 Paesi Bassi 717,146 741,672 768,961 798,719 830,574
10 Belgio 434,503 447,565 461,940 477,555 493,871
11 Svezia 414,056 432,333 451,746 471,912 492,970
12 Austria 373,133 386,373 400,169 414,033 428,387
13 Svizzera 570,350 583,032 594,751 606,765 617,687
14 Rep. Ceca 295,891 307,209 319,726 333,566 348,487
15 Romania 295,979 308,724 323,672 341,241 360,124
16 Norvegia 289,392 299,977 311,697 324,438 337,796
17 Grecia 271,308 284,169 300,298 316,980 334,141
18 Portogallo 251,451 259,619 268,995 279,315 290,140
19 Danimarca 218,338 225,923 234,041 242,737 251,936
20 Ungheria 205,244 212,507 220,184 228,429 237,048
21 Finlandia 197,816 203,550 210,536 218,265 226,557
22 Irlanda 195,020 203,369 212,456 222,152 232,306
23 Bielorussia 153,750 160,381 167,909 175,840 184,300
24 Slovacchia 138,277 144,879 152,798 161,465 170,622
25 Azerbaigian 109,559 116,639 122,988 129,491 137,347
26 Bulgaria 108,257 112,930 118,528 124,526 130,825
27 Serbia 83,714 85,918 89,301 93,365 98,088
28 Croazia 78,576 80,288 82,887 86,175 89,744
29 Lituania 70,904 74,653 78,813 83,335 88,209
30 Slovenia 58,509 60,110 62,160 64,519 67,028
31 Lussemburgo 44,186 45,805 47,592 49,624 51,706
32 Lettonia 41,005 43,561 46,225 49,122 52,103
33 Bosnia ed Erzegovina 33,251 34,923 36,903 39,147 41,527
34 Estonia 30,943 32,502 34,275 36,216 38,296
35 Georgia 29,368 31,381 33,578 35,956 38,513
36 Albania 27,469 28,878 30,663 32,684 34,837
37 Macedonia 23,652 24,899 26,340 27,937 29,645
38 Armenia 21,542 22,910 24,443 26,178 28,037
39 Cipro 21,536 22,104 22,943 23,952 24,980
40 Kosovo 14,810 15,757 16,859 17,970 19,154
41 Moldavia 13,974 14,862 15,826 16,788 17,808
42 Islanda 13,757 14,429 15,150 15,912 16,599
43 Malta 12,011 12,440 12,889 13,358 13,849
44 Montenegro 7,747 8,115 8,487 8,911 9,352

Una tabella opportunamente ordinata e colorata è una soluzione corretta, ma poco efficace, perché occupa molto spazio, privilegia i dieci più ricchi (che sono in alto) e non quelli più poveri (che sono in basso e magari visibili solo dopo uno scroll), non permette di apprezzare le differenze tra i paesi.

Prova ora a pensare a una rappresentazione alternativa, meno esplicita: un cerchio per ogni paese. La superficie di ogni cerchio è proporzionale al pil del rispettivo paese. I cerchi sono uno dentro l’altro, dal più piccolo in basso in primo piano al più grande che contiene tutti. Il bordo dei cerchi più grandi è verde, quello dei paesi più poveri è rosso, per gli altri è nero. Accanto a ogni cerchio, a sinistra ci sono i nomi dei paesi, a destra il valore esatto del pil.

Visualizzazioni dinamiche e interattive

La visualizzazione qui sopra è sostanzialmente statica, ma prevede un minimo di interazione da parte dell’utente. Visualizzare tutti i nomi dei paesi europei e tutti i pil avrebbe prodotto infatti un’immagine molto confusa, con testi sovrapposti tra loro, mentre è molto più efficace mostrare le informazioni puntuali solo quando l’utente effettivamente le desidera. In questo caso quando seleziona uno dei paesi passandoci sopra il puntatore del mouse.

Le grandi differenze tra un’infografica statica pensata per la stampa su carta e la visualizzazione interattiva sono sostanzialmente due, la dinamicità e l’interattività. Nel primo caso il supporto è attivo, lo schermo di un computer, quindi può mostrare immagini in movimento. Nel secondo caso lo stesso supporto accetta ed elabora anche gli input dell’utente, direttamente attraverso uno schermo touch o indirettamente mediante mouse e tastiera, per cui può modificare l’immagine sulla base delle sue azioni in tempo reale.

Le animazioni possono rendere più piacevole e comprensibile la fruizione della visualizzazione da parte dell’utente e facilitarne una corretta interpretazione. Ma rispondere efficacemente alle azioni dell’utente sulla visualizzazione apre un mondo di possibilità e permette per esempio di andare oltre i limiti delle due dimensioni di un supporto piatto, scegliendo di volta in volta cosa mostrare e cosa nascondere, a cosa dare priorità e cosa lasciare sullo sfondo, sempre disponibile però a un approfondimento.

In questo corso ne vedrai e costruirai diverse usando il browser stesso e una libreria Javascript progettata appositamente per lavorare con documenti data-driven: d3js. Prima di tutto, però, devi mettere a disposizione della tua visualizzazione i dati su cui si baserà.

Letture: 495