Introduzione

DynamicD3 offre visualizzazioni di dati personalizzate utilizzando D3.js. Lavoreremo con voi per aiutarvi a scegliere il modo più efficace per visualizzare i vostri dati: ciò potrebbe includere grafici a barre, grafici a linee, grafici a torta, grafici a scimmia o visualizzazioni di dati più esotiche come cloropitechi, grafici a bolle o grafici a raggi solari.

Le visualizzazioni di dati D3.js possono includere un gran numero di Aggiungimenti come tool-tips, zoom, mouse-overs e animazioni. Questi elementi aiutano gli utenti a comprendere i dati in modo più intuitivo e forniscono un'esperienza coinvolgente che non è possibile con le visualizzazioni statiche dei dati. Possiamo anche creare un'interfaccia utente personalizzata, utilizzando pulsanti di opzione, caselle di controllo, cursori o interruttori a levetta, per ampliare ulteriormente la gamma di esperienze interattive.

Vi forniamo un semplice JavaScript, che potete inserire direttamente nel vostro sito web, oppure un componente React. Creeremo una semplice pagina web gratuita come dimostrazione. Come opzione, possiamo creare una griglia di dati in modo che possiate aggiornare facilmente i vostri dati.

D3.js può utilizzare i dati da un file JSON o CSV statico, oppure può prendere i dati da un'API. Possiamo anche creare una griglia di dati in modo da poter aggiornare facilmente i dati.

Grafici a barre

I grafici a barre sono tipicamente utilizzati per dati categorici, come questo esempio che confronta il numero di operazioni su tre organi specifici in un grande ospedale.

Si noti che un grafico a barre non è la stessa cosa di un istogramma, anche se l'aspetto è simile. Un istogramma non presenta dati categorici, come i Paesi (in cui un punto di dati è inequivocabilmente in una categoria o in un'altra). Piuttosto, mostra dati che formano un continuum, ma che sono suddivisi in diversi intervalli, chiamati bins. Ad esempio, una serie di dati in cui l'asse delle ascisse mostra la distanza da un certo punto potrebbe essere suddivisa in intervalli. Tuttavia, tali intervalli sono arbitrari e vengono tipicamente scelti per visualizzare i dati in modo chiaro.

D3.js può essere utilizzato sia per un grafico a barre sia per un istogramma, che possono rappresentare una o più serie di dati. Può anche essere utilizzato per rappresentare dati continui. Tuttavia, questi sono più appropriatamente visualizzati in un grafico a linee o in un grafico a dispersione.

Grafici di linea

Line Charts and Area Charts displays data points over a continuous interval or time period. Depending on the curve used to connect the lines it shows trends and patterns over time. The horizontal, or x-axis represents the independent variable (often time), while the vertical axis represents the dependent variable (the value which has been measured). If the horizontal axis represents time this can be labelled using standard units of time and date, such as seconds, minutes, months and years. D3.js is extremely flexible in this regard. Date and time labels can be localized (for example, by using words in another language to represent the months).

I grafici a linee sono particolarmente utili per mostrare più insiemi di dati in qualche modo correlati. Queste serie di dati utilizzano in genere lo stesso asse x, ma possono avere scale diverse e assi y diversi. Sono particolarmente utili per vedere le tendenze in diversi insiemi di dati (ad esempio, per confrontare quando si verifica un picco di malattie in diversi Paesi). In questo esempio viene utilizzata un'interfaccia utente per passare tra diverse combinazioni di set di dati. Si noti che D3.js può regolare automaticamente la scala dell'asse verticale al variare dei dati.

Un altro punto di forza dei grafici a linee è la capacità di analizzare efficacemente le tendenze. È possibile tracciare una curva che passa per ogni punto o che mostra le tendenze a breve o a lungo termine. Nell'esempio sopra riportato è stata aggiunta un'interfaccia utente che consente agli utenti di esplorare il set di dati in modi diversi, utilizzando curve diverse.

A variation on the line chart is the area chart, in which the area under the line is shaded. This is also shown in the example on the Line Chart page

Grafici a torta

In un diagramma a torta, l'angolo di ogni fetta è proporzionale alla quantità che rappresenta. I grafici a torta e i grafici a ciambella sono identici, tranne per il fatto che i grafici a ciambella hanno un buco al centro che può contenere dei dati. I grafici a ciambella possono avere più anelli che mostrano una gerarchia di valori di dati; tuttavia, questo tipo di grafico viene definito Diagramma a raggiera.

I grafici a torta sono comunemente utilizzati nei giornali. Tuttavia, sebbene siano familiari e facili da capire, non sono il modo migliore per mostrare dati proporzionali o categorici, perché è difficile confrontare valori diversi (a differenza di un grafico a barre, dove le altezze dei rettangoli possono essere confrontate facilmente). Tuttavia, sono utili quando i dati rappresentano una proporzione di un valore totale. Le proporzioni possono essere mostrate anche con i grafici a barre, ma questo è meno intuitivo.

La metafora della torta può essere estesa disegnando un pezzo della torta stessa. Questo può essere fatto in modo statico o utilizzando un effetto mouse-over, come mostrato nella pagina Pie Chart. Questo è noto come grafico a torta esploso. Informazioni più dettagliate possono essere fornite per la sezione esplosa.

Diagrammi Sunburst

I grafici a raggiera sono una forma di grafico a torta multilivello. Sono talvolta noti come treemaps radiali, perché i dati hanno la stessa struttura gerarchica di una treemap convenzionale.

Questo tipo di visualizzazione dei dati mostra la gerarchia attraverso una serie di anelli che vengono tagliati per ogni nodo della categoria. Ogni anello corrisponde a un livello della gerarchia, con il cerchio centrale che rappresenta il nodo principale e la gerarchia che si muove verso l'esterno. Ad esempio, in questo esempio vengono suddivisi i tipi di operazioni. Il primo anello divide le operazioni in base all'organo interessato. L'anello successivo divide ognuna di queste sezioni in base al tipo di trattamento (conservativo, operazione, trapianto o farmaci) e l'anello successivo mostra se i pazienti erano assicurati o meno. Il passaggio del mouse mostra i valori sottostanti in un display in basso. In questo modo gli utenti possono esplorare i dati muovendosi all'interno del display. Ad esempio, potrebbero voler sapere come varia la percentuale di pazienti che hanno ricevuto un trattamento renale in base alla loro copertura assicurativa.

Il colore può essere utilizzato per evidenziare raggruppamenti gerarchici o categorie specifiche. Nell'esempio precedente, l'utente può modificare la combinazione di colori per enfatizzare diversi aspetti del set di dati. Nel primo esempio, per ogni anello vengono utilizzate gamme di colori diverse. In questo modo è facile comprendere i dati mostrati in ciascun anello e, allo stesso tempo, rendere chiari i confini delle sezioni. Tuttavia, questo non funziona con insiemi di dati di grandi dimensioni. In questo caso, è più chiaro se tutte le sezioni di un determinato anello hanno la stessa tonalità. Infine, in alcuni casi si possono usare colori casuali. Questi rendono più difficile capire il significato di ogni livello della gerarchia, ma facilitano la visualizzazione dei diversi settori. La visualizzazione dell'interfaccia utente nell'esempio Sunburst passa tra queste alternative.

Diagramma Sankey

I diagrammi di Sankey sono utilizzati per rappresentare processi di flusso, come il flusso di denaro all'interno di un'organizzazione (come mostrato in un rendiconto finanziario), il flusso di energia o di materie prime attraverso una serie di processi industriali o il flusso di un bene più astratto, come le informazioni. L'altezza o la larghezza di ogni nodo rappresenta la quantità totale di flusso che attraversa quel nodo e lo spessore delle linee tra ogni coppia di nodi rappresenta la quantità di flusso che passa tra questi nodi. Il colore può essere utilizzato per mostrare la quantità di flusso (ad esempio, utilizzando una sfumatura di colore) o per mostrare qualche altro aspetto del processo, come in questo diagramma di Sankey, che utilizza i colori per illustrare il flusso dei rifugiati.

Un'area in cui le Sankeys sono spesso utilizzate è il settore dell'energia. Ad esempio, possono mostrare la fonte di gas naturale per Paese, i mezzi con cui arriva a destinazione (gasdotto, nave, ecc.) e poi come viene utilizzato (utenti finali). Diagrammi di questo tipo sono utili per i responsabili delle politiche, in quanto evidenziano le aree in cui è possibile migliorare l'efficienza.

I diagrammi di Sankey sono un modo particolarmente intuitivo di mostrare i cambiamenti nel tempo. In questo diagramma di Sankey viene mostrato il flusso di rifugiati da vari Paesi di origine negli Stati Uniti per un periodo di tempo. Il cursore permette agli utenti di muoversi attraverso la linea temporale e le transizioni fluide rendono facile tenere traccia dei nodi che aumentano o diminuiscono di importanza.

Clorofilla

I coropleti utilizzano il colore per mostrare la variazione di una variabile in un'area geografica. Sono simili alle mappe di calore; tuttavia, a differenza di queste ultime, dividono la mappa in sottounità geopolitiche, come paesi, stati, province o contee.

I valori utilizzati in un cloroplatino devono tenere conto delle diverse dimensioni delle aree. Ad esempio, c'è un'enorme differenza tra le dimensioni dei diversi Paesi, quindi non ha senso colorare i Paesi solo in base alla loro popolazione. I dati andrebbero invece "normalizzati" tra le regioni utilizzando la densità di popolazione piuttosto che la popolazione assoluta. Per entrambi i tipi di visualizzazione, i colori più scuri o più intensi rappresentano solitamente valori più alti, mentre quelli più chiari o più pallidi indicano valori più bassi.

Purtroppo, i dati del mondo reale non sono tipicamente divisi in categorie naturali. Ad esempio, un cloropleto in cui l'intensità di un colore fosse proporzionale alla densità di popolazione potrebbe funzionare quando c'è una differenza simile tra le densità di popolazione di regioni diverse (ad esempio tra le diverse contee dello stesso stato americano). Tuttavia, spesso i dati contengono valori di ordini di grandezza superiori ad altri valori dello stesso insieme di dati. Fortunatamente, D3.js dispone di una ricca serie di scale. In alcuni casi, potrebbe essere più appropriata una scala di log: questa mostrerebbe bene le piccole differenze, ma anche quelle molto più grandi. In altri casi, si potrebbe usare un colore per mostrare i valori superiori o inferiori a una certa soglia. È questo alto livello di flessibilità che rende D3.js un mezzo così potente per creare visualizzazioni di dati.

Oltre ad aiutarci a scalare i dati, D3.js ci permette di utilizzare un'ampia gamma di proiezioni cartografiche, che hanno un impatto notevole sul modo in cui i dati vengono percepiti. I clorofotogrammi prodotti con altre librerie utilizzano spesso proiezioni standard, come la proiezione di Mercatore, che può portare a grandi distorsioni in alcune parti del mondo. Questo problema è minore quando la mappa mostra aree più piccole, come le contee del Regno Unito, o quando le aree visualizzate si trovano tutte a una latitudine simile.

Infine, è possibile utilizzare due dati separati (ma correlati), ciascuno con una scala di colori diversa. Questo è noto come Cloropleth bidimensionale.

Grafico a bolle

I grafici a bolle sono come i grafici a dispersione con i dati sostituiti da cerchi. Mentre un grafico a dispersione può utilizzare solo la posizione e il colore di un punto per rappresentare le informazioni, un grafico a bolle ha anche dimensioni orizzontali e verticali. Questo rende i grafici a bolle particolarmente adatti alla visualizzazione di relazioni multidimensionali.

Se per ogni cerchio è necessario visualizzare solo un'informazione aggiuntiva, questa può essere rappresentata dall'area del cerchio. Tuttavia, questo può essere problematico, perché gli utenti tendono a giudicare le dimensioni relative dei cerchi in base al loro diametro piuttosto che alla loro area. È importante che questo sia chiaro nella legenda.

I grafici a bolle funzionano meno bene quando ci sono molti punti di dati e quando c'è un'ampia gamma di dati. Quando ci sono troppi punti dati, la visualizzazione può sembrare affollata e le bolle possono sovrapporsi. Quando l'insieme dei dati presenta un'ampia gamma di valori, le bolle più piccole potrebbero non essere chiaramente visibili. Questi problemi possono essere in parte superati utilizzando le interazioni con il mouse per fornire maggiori informazioni, come il valore esatto del punto dati sottostante.

Un ultimo problema dei grafici a bolle è l'illusione della media ponderata: le dimensioni delle bolle influenzano la percezione dei valori x e y del punto dati. Questa distorsione deve essere tenuta in considerazione quando si stimano i valori medi di x e y.

I grafici a bolle che devono mostrare i valori negativi possono essere creati utilizzando un simbolo al centro delle bolle che rappresentano i valori negativi, colori diversi per i valori positivi e negativi o anche forme diverse. Con D3.js questo livello di flessibilità è possibile, ma non è il caso della maggior parte delle librerie di visualizzazione dei dati.