Questo grafico a linee mostra gli stessi dati del grafico a barre impilate, ma utilizza punti per contrassegnare i punti dei dati e linee per collegarli. L'interruttore (creato in MUI) permette di passare da un semplice grafico a linee a un grafico ad area. Entrambe le visualizzazioni dei dati utilizzano quasi lo stesso codice D3.js.
I grafici ad area funzionano meglio come visualizzazioni di dati quando ci sono set di dati singoli: aiutano gli utenti a vedere più chiaramente il valore totale rappresentato dai punti di dati, perché questo è proporzionale alla dimensione dell'area ombreggiata. Tuttavia, quando ci sono più punti di dati, le aree ombreggiate possono creare confusione, perché un'area può oscurare le aree retrostanti. D3.js consente un controllo totale su questo aspetto: ad esempio, possiamo ridurre l'opacità di alcune o di tutte le aree, o addirittura ridurre l'opacità delle aree che si sovrappongono a quelle sottostanti. I grafici ad area possono anche confondere quando mostrano valori negativi, anche se D3.js offre modi per ovviare a questo problema, come l'uso di colori diversi per i valori positivi e negativi.
Come nell'esempio Bar Chart, è possibile utilizzare i controlli dell'interfaccia utente per concentrarsi su un particolare insieme di dati all'interno della visualizzazione dei dati e collegarli al codice D3.js. In questo caso, però, si utilizzano caselle di controllo anziché pulsanti di opzione. Con i pulsanti di opzione si deve selezionare una sola opzione, mentre con le caselle di controllo ogni casella può essere selezionata o deselezionata indipendentemente dalle altre. Con questa interfaccia utente, quindi, è possibile selezionare qualsiasi permutazione di set di dati: ad esempio, un singolo organo, due organi o tutti e tre gli organi. La codifica è un po' più complessa, soprattutto quando il numero di punti di dati non è esiguo.
D3.js ci permette anche di selezionare la curva utilizzata per collegare i dati. In genere, si sceglie la curva più adatta alla visualizzazione dei dati e la si codifica in modo rigido. Tuttavia, per illustrare le possibilità, abbiamo aggiunto una serie di pulsanti di opzione, in modo che gli utenti possano scegliere la propria. Alcune curve, come la Catmull-Rom, passano attraverso tutti i punti dei dati, mentre altre, come la Curva Base, non lo fanno. Il vantaggio di non passare attraverso tutti i punti di dati è che è possibile mostrare molto bene le tendenze dei dati. Al contrario, la curva di Catmull-Rom include tutti i punti di dati effettivi, ma include sovra e sottotono, il che rende più difficile vedere le tendenze.
Il costo di un grafico a linee o ad aree di D3.js dipende in larga misura dal grado di personalizzazione. 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. La pagina Prezzi vi darà un'idea generale. Tuttavia, vi invitiamo a contattarci per una discussione gratuita con uno sviluppatore per capire cosa è meglio per voi.