13 KiB

Raw Permalink Blame History

Creare Visualizzazioni Significative


Visualizzazioni Significative - Sketchnote di @nitya

"Se torturi i dati abbastanza a lungo, confesseranno qualsiasi cosa" -- Ronald Coase

Una delle competenze fondamentali di un data scientist è la capacità di creare una visualizzazione dei dati significativa che aiuti a rispondere alle domande che si potrebbero avere. Prima di visualizzare i dati, è necessario assicurarsi che siano stati puliti e preparati, come fatto nelle lezioni precedenti. Dopo di ciò, si può iniziare a decidere come presentare al meglio i dati.

In questa lezione, esaminerai:

Come scegliere il tipo di grafico giusto
Come evitare grafici ingannevoli
Come lavorare con i colori
Come stilizzare i grafici per migliorarne la leggibilità
Come creare soluzioni di grafici animati o in 3D
Come costruire una visualizzazione creativa

Quiz Pre-Lezione

Scegliere il tipo di grafico giusto

Nelle lezioni precedenti, hai sperimentato la creazione di vari tipi di visualizzazioni dei dati utilizzando Matplotlib e Seaborn. In generale, puoi selezionare il tipo di grafico giusto per la domanda che stai ponendo utilizzando questa tabella:

Necessità:	Dovresti usare:
Mostrare tendenze nel tempo	Linea
Confrontare categorie	Barre, Torta
Confrontare totali	Torta, Barre impilate
Mostrare relazioni	Dispersione, Linea, Facet, Linea doppia
Mostrare distribuzioni	Dispersione, Istogramma, Box
Mostrare proporzioni	Torta, Donut, Waffle

✅ A seconda della composizione dei tuoi dati, potrebbe essere necessario convertirli da testo a numerico per supportare un determinato tipo di grafico.

Evitare inganni

Anche se un data scientist sceglie con attenzione il grafico giusto per i dati, ci sono molti modi in cui i dati possono essere visualizzati per dimostrare un punto, spesso a scapito della veridicità dei dati stessi. Esistono molti esempi di grafici e infografiche ingannevoli!

🎥 Clicca sull'immagine sopra per una conferenza sui grafici ingannevoli

Questo grafico inverte l'asse X per mostrare l'opposto della verità, basandosi sulla data:

Questo grafico è ancora più ingannevole, poiché l'occhio è attirato verso destra per concludere che, nel tempo, i casi di COVID siano diminuiti nelle varie contee. In realtà, se si osservano attentamente le date, si scopre che sono state riorganizzate per creare questa falsa tendenza al ribasso.

Questo esempio noto utilizza il colore E un asse Y invertito per ingannare: invece di concludere che le morti per armi da fuoco siano aumentate dopo l'approvazione di una legislazione favorevole alle armi, l'occhio è ingannato a pensare che sia vero il contrario:

Questo grafico strano mostra come le proporzioni possano essere manipolate, con effetti esilaranti:

Confrontare l'incomparabile è un altro trucco discutibile. Esiste un sito web meraviglioso dedicato alle 'correlazioni spurie' che mostra 'fatti' correlando cose come il tasso di divorzi nel Maine e il consumo di margarina. Un gruppo su Reddit raccoglie anche usi discutibili dei dati.

È importante capire quanto facilmente l'occhio possa essere ingannato da grafici ingannevoli. Anche se l'intenzione del data scientist è buona, la scelta di un tipo di grafico sbagliato, come un grafico a torta con troppe categorie, può risultare ingannevole.

Colore

Come visto nel grafico sulla 'violenza con armi da fuoco in Florida', il colore può aggiungere un ulteriore livello di significato ai grafici, specialmente quelli non progettati utilizzando librerie come ggplot2 e RColorBrewer, che offrono palette di colori validate. Se stai creando un grafico manualmente, studia un po' la teoria del colore.

✅ Quando progetti grafici, tieni presente che l'accessibilità è un aspetto importante della visualizzazione. Alcuni utenti potrebbero essere daltonici - il tuo grafico è leggibile per utenti con disabilità visive?

Fai attenzione quando scegli i colori per il tuo grafico, poiché il colore può trasmettere significati che potresti non intendere. Le 'signore rosa' nel grafico sull'altezza sopra trasmettono un significato distintamente 'femminile' che aggiunge alla stranezza del grafico stesso.

Sebbene il significato del colore possa variare in diverse parti del mondo e tendere a cambiare in base alla tonalità, generalmente i significati dei colori includono:

Colore	Significato
rosso	potere
blu	fiducia, lealtà
giallo	felicità, cautela
verde	ecologia, fortuna, invidia
viola	felicità
arancione	vivacità

Se ti viene chiesto di creare un grafico con colori personalizzati, assicurati che i tuoi grafici siano accessibili e che il colore scelto coincida con il significato che vuoi trasmettere.

Stilizzare i grafici per la leggibilità

I grafici non sono significativi se non sono leggibili! Prenditi un momento per considerare lo stile della larghezza e altezza del grafico per adattarlo bene ai tuoi dati. Se una variabile (come tutti i 50 stati) deve essere visualizzata, mostrala verticalmente sull'asse Y se possibile, per evitare un grafico con scorrimento orizzontale.

Etichetta gli assi, fornisci una legenda se necessario e offri tooltip per una migliore comprensione dei dati.

Se i tuoi dati sono testuali e verbosi sull'asse X, puoi angolare il testo per migliorarne la leggibilità. plot3D offre la possibilità di creare grafici in 3D, se i tuoi dati lo supportano. Con esso è possibile produrre visualizzazioni sofisticate.

Animazione e visualizzazione di grafici in 3D

Alcune delle migliori visualizzazioni dei dati oggi sono animate. Shirley Wu ha creato visualizzazioni straordinarie con D3, come 'film flowers', dove ogni fiore rappresenta una visualizzazione di un film. Un altro esempio per il Guardian è 'bussed out', un'esperienza interattiva che combina visualizzazioni con Greensock e D3, oltre a un formato di articolo scrollytelling per mostrare come NYC gestisce il problema dei senzatetto bussando le persone fuori dalla città.

"Bussed Out: How America Moves its Homeless" dal Guardian. Visualizzazioni di Nadieh Bremer & Shirley Wu

Sebbene questa lezione non sia sufficiente per approfondire l'insegnamento di queste potenti librerie di visualizzazione, prova a utilizzare D3 in un'app Vue.js per visualizzare il libro "Le relazioni pericolose" come una rete sociale animata.

"Les Liaisons Dangereuses" è un romanzo epistolare, ovvero un romanzo presentato come una serie di lettere. Scritto nel 1782 da Choderlos de Laclos, racconta le manovre sociali spietate e moralmente corrotte di due protagonisti in duello dell'aristocrazia francese del tardo XVIII secolo, il Visconte di Valmont e la Marchesa di Merteuil. Entrambi incontrano la loro fine, ma non senza infliggere un grande danno sociale. Il romanzo si sviluppa come una serie di lettere scritte a varie persone nei loro circoli, tramando vendette o semplicemente per creare problemi. Crea una visualizzazione di queste lettere per scoprire i principali protagonisti della narrazione, visivamente.

Completerai un'app web che visualizzerà una vista animata di questa rete sociale. Utilizza una libreria progettata per creare una visualizzazione di una rete utilizzando Vue.js e D3. Quando l'app è in esecuzione, puoi spostare i nodi sullo schermo per riorganizzare i dati.

Progetto: Creare un grafico per mostrare una rete usando D3.js

Questa cartella della lezione include una cartella solution dove puoi trovare il progetto completato, per riferimento.

Segui le istruzioni nel file README.md nella cartella radice dello starter. Assicurati di avere NPM e Node.js in esecuzione sulla tua macchina prima di installare le dipendenze del progetto.
Apri la cartella starter/src. Troverai una cartella assets dove è presente un file .json con tutte le lettere del romanzo, numerate, con annotazioni 'to' e 'from'.
Completa il codice in components/Nodes.vue per abilitare la visualizzazione. Cerca il metodo chiamato createLinks() e aggiungi il seguente ciclo nidificato.

Cicla attraverso l'oggetto .json per catturare i dati 'to' e 'from' delle lettere e costruire l'oggetto links affinché la libreria di visualizzazione possa utilizzarlo:

//loop through letters
      let f = 0;
      let t = 0;
      for (var i = 0; i < letters.length; i++) {
          for (var j = 0; j < characters.length; j++) {
              
            if (characters[j] == letters[i].from) {
              f = j;
            }
            if (characters[j] == letters[i].to) {
              t = j;
            }
        }
        this.links.push({ sid: f, tid: t });
      }

Esegui la tua app dal terminale (npm run serve) e goditi la visualizzazione!

🚀 Sfida

Fai un giro su internet per scoprire visualizzazioni ingannevoli. Come l'autore inganna l'utente, e ciò è intenzionale? Prova a correggere le visualizzazioni per mostrare come dovrebbero apparire.

Quiz Post-Lezione

Revisione & Studio Autonomo

Ecco alcuni articoli da leggere sulle visualizzazioni dei dati ingannevoli:

https://gizmodo.com/how-to-lie-with-data-visualization-1563576606

http://ixd.prattsi.org/2017/12/visual-lies-usability-in-deceptive-data-visualizations/

Dai un'occhiata a queste interessanti visualizzazioni di beni e artefatti storici:

https://handbook.pubpub.org/

Leggi questo articolo su come l'animazione può migliorare le visualizzazioni:

https://medium.com/@EvanSinar/use-animation-to-supercharge-data-visualization-cd905a882ad4

Compito

Costruisci la tua visualizzazione personalizzata

Disclaimer:
Questo documento è stato tradotto utilizzando il servizio di traduzione automatica Co-op Translator. Sebbene ci impegniamo per garantire l'accuratezza, si prega di notare che le traduzioni automatiche potrebbero contenere errori o imprecisioni. Il documento originale nella sua lingua nativa dovrebbe essere considerato la fonte autorevole. Per informazioni critiche, si consiglia una traduzione professionale eseguita da un traduttore umano. Non siamo responsabili per eventuali fraintendimenti o interpretazioni errate derivanti dall'uso di questa traduzione.

13 KiB Raw Permalink Blame History