DynamicD3: Visualizzazione dei dati con D3.js

DynamicD3

Diagrammi Sankey

I diagrammi di Sankey sono visualizzazioni di dati utilizzate per visualizzare il flusso attraverso una serie di processi. L'esempio precedente è semplice; tuttavia, possono essere utilizzati anche per processi molto più complessi, come quelli industriali che comprendono molte fasi. D3.js è particolarmente adatto alla creazione di diagrammi di Sankey e consente una grande personalizzazione.

Un'area che funziona particolarmente bene è quella dei flussi energetici: ad esempio, le visualizzazioni dei dati di Sankey sono state utilizzate per illustrare la produzione di petrolio, a partire dal suo paese di origine, come viene trasportato, dove viene raffinato e dove viene infine consumato.

I diagrammi di Sankey possono essere utilizzati anche per dimostrare come vengono creati e riciclati i materiali. Tuttavia, un principio importante che a volte complica il loro utilizzo in questi tipi di visualizzazione dei dati è che D3.js richiede che il flusso in ogni parte del processo sia uguale al flusso in uscita da quel processo. Inoltre, l'altezza di ogni nodo deve essere uguale alla somma degli spessori dei flussi (in altre parole, delle linee) in entrata e in uscita. È possibile aggirare queste limitazioni e creare diagrammi di Sankey con cicli di feedback, ma ciò richiede una programmazione personalizzata o un fork della libreria Sankey standard di D3.js.

Un altro uso popolare del diagramma di Sankey è quello di mostrare il flusso di cassa di un'azienda. In questo caso, i colori e le posizioni dei nodi e delle linee devono essere spostati in modo che i flussi simili (ad esempio, quelli che hanno un impatto positivo sul bilancio) siano dello stesso colore (ad esempio, verde), mentre quelli che rappresentano flussi con un impatto negativo siano di un altro colore, tipicamente rosso. I nodi e le linee devono essere posizionati insieme in modo che il diagramma sia ben organizzato. Le visualizzazioni di dati Sankey come questa possono essere create utilizzando D3.js, ma queste posizioni devono essere codificate in modo personalizzato. È importante tenere presente la condizione menzionata in precedenza: il flusso in ogni nodo deve essere uguale al flusso in uscita da quel nodo. Ciò richiede una certa comprensione dei dati finanziari in modo che il diagramma di Sankey abbia un senso.

Il costo di una visualizzazione di dati Sankey creata con D3.js dipende in larga misura dalla misura in cui deve essere personalizzata. I componenti aggiuntivi, come i tool-tip, le animazioni personalizzate e così via, aggiungono un po' al costo ma migliorano notevolmente l'esperienza dell'utente. La pagina Prezzi vi darà un'idea generale. Tuttavia, vi invitiamo a contattarci per un colloquio gratuito con uno sviluppatore per capire cosa è meglio per voi.

Questo mostra il flusso dei rifugiati dal loro paese di origine allo stato di destinazione negli Stati Uniti.

Il numero di persone che si sono spostate in un determinato anno è indicato dallo spessore del collegamento e dall'altezza e dal colore del nodo.