Componenti aggiuntivi

Suggerimenti

È possibile aggiungere tooltip a qualsiasi grafico o diagramma. Sono particolarmente utili quando ci sono molti punti di dati (ad esempio, in un grafico a dispersione). Anche con set di dati più piccoli, aiutano a ridurre il disordine del grafico, consentendo agli utenti di concentrarsi sui modelli generali.

Sono utili anche nei grafici complessi, in cui le diverse parti del grafico trasmettono aspetti diversi dell'insieme di dati e ciò potrebbe non essere evidente agli utenti che non hanno familiarità con questo tipo di diagrammi. Ad esempio, in questo diagramma Sunburst gli utenti possono passare il mouse sui segmenti per vedere sia il punto di dati sottostante che il contesto di quel punto di dati. In questo caso, il diagramma Sunburst suddivide i trattamenti medici in base al tipo, all'organo interessato e allo stato assicurativo del paziente. Queste informazioni sono visualizzate nella parte inferiore del display e cambiano quando l'utente passa il mouse su ciascun segmento.

Uno degli enormi punti di forza di D3 è che offre una grande flessibilità. Un tool-tip può includere qualsiasi dato presente nell'insieme di dati, testo contestuale o anche valori provenienti da un insieme di dati completamente diverso. Ad esempio, questo Sankey mostra agli utenti che i nodi rappresentano il numero totale di rifugiati, mentre le linee rappresentano il numero di rifugiati che si spostano tra ogni origine (in questo caso un Paese) e destinazione (in questo caso uno Stato degli USA). Il testo può essere in qualsiasi lingua, il che aiuta enormemente la localizzazione.

Quando nella visualizzazione vengono utilizzati due o più set di dati, i suggerimenti possono mostrare un confronto tra questi. Ad esempio, possono mostrare i valori di quest'anno e quelli dell'anno scorso, oppure i set di dati relativi a regioni diverse. Al contrario, con un singolo set di dati, possono essere utilizzati per visualizzare intervalli di confidenza, valori percentuali o altre informazioni statistiche relative ai punti di dati, aiutando gli utenti a valutare l'affidabilità dei dati.

Un altro vantaggio dei tool-tip è che sono divertenti! Migliorano l'interattività consentendo agli utenti di interagire con il grafico, esplorando i dati alle loro condizioni.

Zoom

Gli zoom consentono di ingrandire aree specifiche di un grafico o di un diagramma per esaminare più da vicino i punti e le tendenze dei dati. Questo è particolarmente utile per i set di dati di grandi dimensioni. È utile anche quando gli utenti sono interessati a diversi aspetti del set di dati: ad esempio, alcuni utenti potrebbero volersi concentrare su un particolare periodo di tempo.

Gli zoom consentono inoltre di effettuare confronti dettagliati tra le diverse parti dell'insieme di dati. Possono esplorare i dati in modo interattivo zoomando su un'area e poi spostandosi su un'altra. In questo modo si possono vedere meglio le correlazioni, i valori anomali e i modelli.

Un altro vantaggio dello zoom è che consente agli utenti di utilizzare dispositivi più piccoli, come gli smartphone, per visualizzare l'intero set di dati, pur riuscendo a vedere i dettagli di cui hanno bisogno. Gli utenti di smartphone sono abituati a ingrandire il display con il "gesto del pizzico".

Lo zoom contribuisce anche a migliorare l'accessibilità per le persone con difetti visivi.

Spazzole

La spazzolatura funziona in modo simile allo zoom, in quanto offre agli utenti un modo per interagire con una parte del set di dati. Tuttavia, invece di ingrandire una parte del grafico, quest'area non cambia dimensione. L'area spazzolata può essere indicata in un altro modo, ad esempio cambiando colore.

Un pennello può essere usato per filtrare i dati: ad esempio, gli utenti possono passare il pennello lungo l'asse x di un grafico ad area muovendo il mouse. L'area che è stata spazzolata può essere visualizzata in un'altra parte del display. Un altro modo di usare il pennello è quello di aggiungere un grafico separato che mostri gli stessi dati in una scala diversa. In questo caso, il pennello funziona in modo simile allo zoom. Tuttavia, può essere più facile da usare, perché il grafico originale non cambia le sue dimensioni.

Animazioni

Le animazioni sono utili in diversi modi. Nel caso di un semplice grafico a barre, ad esempio, le barre possono scorrere lentamente invece di apparire istantaneamente. Ciò non aggiunge molto al contenuto informativo del grafico, ma lo rende più interessante per gli utenti.

Le animazioni hanno un ruolo più serio quando vengono utilizzate per le transizioni. Ad esempio, questo diagramma di Sankey mostra i dati di diversi anni. Quando l'utente si sposta da un anno all'altro, utilizzando il cursore, le dimensioni relative dei nodi cambiano. Si muovono perché sono disposti in ordine di grandezza. Senza l'animazione, il cambiamento sarebbe stridente e sarebbe difficile mantenere la "costanza dell'oggetto". Ad esempio, un utente potrebbe essere interessato a vedere come il flusso (in questo caso, di rifugiati) proveniente da un particolare Paese cambia di anno in anno. Se il nodo saltasse senza una transizione graduale, sarebbe difficile farlo.

Un altro esempio di transizione è mostrato in questo grafico a torta. Quando si passa il mouse su un segmento, questo si sposta leggermente. Utilizzando una transizione fluida, questo movimento sembra naturale e aiuta a mantenere la metafora della torta. Senza di esso, questa sezione del grafico a torta salterebbe da una posizione all'altra. Per questo stesso motivo, le animazioni funzionano particolarmente bene quando si visualizzano dati di serie temporali, come i valori di un indicatore di borsa. Anche in questo caso, il vantaggio è che è più facile per l'occhio tenere traccia di un particolare valore mentre cambia.

Quando si usa l'animazione per passare da un set di dati all'altro e queste transizioni sono controllate da un'interfaccia utente, come ad esempio <TransLink>questo cursore</TransLink>, l'utente può esplorare i valori quasi come in un video.

Colori

Poiché i grafici e le tabelle di D3 sono creati con JavaScript, è possibile impostare i colori utilizzando una funzione. Ciò significa che il colore può essere utilizzato in modi che non sono possibili in altre librerie di visualizzazione dei dati.

L'uso più ovvio del colore è quello di distinguere diversi insiemi di dati: ad esempio, questo Bar Chart contiene dati per più insiemi di dati simili. Utilizzando colori diversi per ogni serie di dati e spiegando il significato di questi colori in una legenda, è possibile combinarli insieme nello stesso grafico.

Il colore può essere utilizzato anche per raggruppare insiemi di valori simili. Ad esempio, questo diagramma Sunburst mostra una gerarchia di dati. Ogni anello rappresenta un livello diverso della gerarchia. Utilizzando il colore, possiamo raggruppare i valori che appartengono allo stesso livello e spiegarli in una legenda.

Un altro vantaggio del D3 è che è possibile variare la saturazione del colore e la sua tonalità. Ad esempio, in questo diagramma Sunburst (l'esempio in alto) la saturazione del colore in ogni sezione è variabile, mentre tutte le sezioni dello stesso anello hanno lo stesso colore. In questo caso l'intensità è semplicemente randomizzata, per distinguere meglio i singoli settori (si confronti con l'esempio in cui ogni settore di un anello ha la stessa tonalità e la stessa saturazione). Tuttavia, la saturazione potrebbe anche essere legata al punto dati sottostante. In questo caso, è meglio che le sezioni non siano disposte in ordine di grandezza, altrimenti i settori più piccoli saranno troppo difficili da distinguere.

Un altro esempio di utilizzo del colore per rendere più chiaro il diagramma è questo Diagramma di Sankey. Nei due esempi superiori, un colore è usato per rappresentare i nodi di origine e un altro colore rappresenta i nodi di destinazione. Inoltre, la densità del colore rappresenta la dimensione di ciascun nodo. Gli stessi colori sono utilizzati per le linee di collegamento. Esiste quindi un legame evidente tra i valori rappresentati dai nodi e quelli rappresentati dalle linee di collegamento. Negli ultimi due esempi si utilizzano due colori e i valori dei dati sottostanti sono rappresentati dai valori relativi di questi due colori. A volte questa soluzione può essere più chiara, soprattutto quando le differenze tra i valori dei dati sono sottili.

Infine, a volte il colore può essere utilizzato semplicemente per separare le parti del diagramma, senza alcun significato di fondo. Questo è il caso del terzo esempio di diagramma Sunburst. I colori sono stati scelti appositamente in modo da rendere chiaramente visibili i confini tra i settori del diagramma Sunburst. Ciò è particolarmente utile quando i valori sono piccoli e i settori sono molto stretti.

Un altro modo in cui si può usare il colore è quello di distinguere un particolare insieme di punti di dati. Questo può essere combinato con un pennello (vedi sopra). Passando il pennello sul grafico, gli utenti possono filtrare i punti di dati. I valori filtrati possono essere visualizzati con un colore diverso, che può essere collegato a una legenda separata.

Anche senza un pennello, i colori possono essere utili per evidenziare valori specifici. Ad esempio, con D3.js possiamo dare un colore specifico agli outlier o usare colori diversi per i valori negativi e positivi. Le visualizzazioni dei dati diventano molto più chiare quando i colori sono usati in modo intelligente, soprattutto quando ci sono molti punti dati. La codifica dei colori può essere utilizzata anche per mostrare la struttura complessiva di una visualizzazione di dati.

I colori possono essere utili anche per le interazioni. Il colore di un punto, di una barra o di una linea di dati può cambiare al passaggio del mouse, sottolineando che è stato selezionato.

Data Grid

I dati per un grafico o un diagramma D3js provengono in genere da una delle tre fonti. Se è improbabile che i dati cambino molto spesso, possono essere memorizzati in un file JSON o CSV sul server. Se i dati provengono da un database locale, questo dovrà essere aggiornato direttamente, con un'interfaccia personalizzata o con uno strumento di database, come DBeaver. Possiamo configurare questa operazione per voi.

However, if data needs to be updated by somebody with no technical skills, the best option is for us to create a data grid for you. This looks and feels much like an Excel spreadsheet. It can either be on a page which is shielded from search engines or which is password-protected.

Una variante di una griglia di dati è un modulo: funziona come il formulario di contatto di un sito web. Questo potrebbe essere più appropriato quando i dati devono essere inseriti da personale che non ha familiarità con una griglia di dati.

Elementi dell'interfaccia utente

Sebbene D3.js offra una serie limitata di strumenti per l'interfaccia utente, è meglio codificarli usando una libreria di componenti, come MUI, o come semplice HTML.

Gli elementi dell'interfaccia utente più utili sono i pulsanti di opzione e le caselle di controllo. A volte questi elementi vengono confusi. I pulsanti di opzione, come quelli mostrati in questo Cartello a barre impilate, consentono agli utenti di scegliere tra un insieme di scelte che si escludono a vicenda: in questo caso, possono scegliere un singolo set di dati, mostrato come un semplice grafico a barre, o più set di dati, mostrati come un grafico a barre impilate. Tuttavia, possono anche essere utilizzati per modificare il modo in cui vengono visualizzati i dati. In questa visualizzazione Sunburst i pulsanti di opzione influenzano il modo in cui il colore viene utilizzato per mettere in evidenza i diversi aspetti dell'insieme di dati.

Le caselle di controllo, invece, consentono agli utenti di scegliere qualsiasi permutazione di opzioni: in questo caso, le scelte non si escludono a vicenda. Nell'esempio della casella di controllo, la visualizzazione <Link>Line Chart</Link> può mostrare un solo set di dati, due set di dati qualsiasi o tutti e tre. Questo è estremamente utile quando gli utenti devono fare confronti specifici tra coppie di dati: ad esempio, potrebbero voler confrontare i valori delle operazioni al cuore con quelli delle operazioni al fegato e rimuovere i valori delle operazioni alla milza per migliorare la chiarezza.

Un altro elemento dell'interfaccia utente utile per migliorare le visualizzazioni dei dati in D3.js è un interruttore a levetta. Si usa quando il diagramma può essere in uno dei due stati o quando si vuole dare agli utenti la possibilità di cambiare parte della visualizzazione dei dati per migliorare la chiarezza. In questo esempio, un interruttore a levetta è usato per <Link> passare da un grafico a linee a un grafico ad area</Link>.

Infine, è possibile utilizzare dei cursori. Questi funzionano particolarmente bene quando una visualizzazione di dati contiene serie di dati provenienti da periodi di tempo diversi. Permettono agli utenti di spostarsi intuitivamente avanti e indietro lungo la linea del tempo, come in questa visualizzazione dei dati di Sankey.