Dieses Liniendiagramm zeigt die gleichen Daten wie das Stapelbalkendiagramm, verwendet aber Punkte, um die Datenpunkte zu markieren und Linien, um sie zu verbinden. Der Umschalter (erstellt in MUI) wechselt zwischen einem einfachen Liniendiagramm und einem Flächendiagramm. Beide Datenvisualisierungen verwenden fast den gleichen D3.js-Code.
Flächendiagramme eignen sich besser für die Visualisierung von Daten, wenn es sich um einzelne Datensätze handelt: Sie helfen den Benutzern, den Gesamtwert der Datenpunkte klarer zu erkennen, da dieser proportional zur Größe des schattierten Bereichs ist. Wenn es jedoch mehrere Datenpunkte gibt, können die schattierten Bereiche verwirrend sein, da ein Bereich die dahinter liegenden Bereiche verdecken kann. Mit D3.js lässt sich dies vollständig steuern: Wir können zum Beispiel die Deckkraft einiger oder aller Bereiche reduzieren oder sogar die Deckkraft der Bereiche verringern, die sich mit den darunter liegenden überschneiden. Flächendiagramme können auch verwirrend sein, wenn sie negative Werte anzeigen, obwohl D3.js Möglichkeiten bietet, dieses Problem zu umgehen, z. B. durch die Verwendung unterschiedlicher Farben für positive und negative Werte.
Wie im Beispiel Balkendiagramm ist es möglich, UI-Steuerelemente zu verwenden, um den Fokus auf einen bestimmten Datensatz innerhalb der Datenvisualisierung zu legen und diesen mit dem D3.js-Code zu verknüpfen. In diesem Fall werden jedoch Kontrollkästchen und keine Optionsfelder verwendet. Bei Radiobuttons muss nur eine Option ausgewählt werden, bei Checkboxen hingegen kann jedes Kästchen unabhängig von den anderen an- oder abgewählt werden. Mit dieser Benutzeroberfläche ist es also möglich, jede beliebige Kombination von Datensätzen auszuwählen: z. B. ein einzelnes Organ, zwei beliebige Organe oder alle drei Organe. Die Kodierung dafür ist etwas komplexer, vor allem, wenn es mehr als eine kleine Anzahl von Datenpunkten gibt.
Mit D3.js können wir auch die Kurve auswählen, die zur Verbindung der Daten verwendet wird. Normalerweise würden wir die am besten geeignete Kurve für die Datenvisualisierung auswählen und diese fest programmieren. Um jedoch zu veranschaulichen, was möglich ist, haben wir eine Reihe von Optionsfeldern hinzugefügt, damit die Benutzer ihre eigene Kurve auswählen können. Einige Kurven, wie z. B. Catmull-Rom, gehen durch alle Datenpunkte, während andere, wie z. B. Curve Basis, dies nicht tun. Der Vorteil, dass nicht alle Datenpunkte durchlaufen werden, besteht darin, dass Trends in den Daten sehr gut dargestellt werden können. Die Catmull-Rom-Kurve hingegen umfasst zwar alle Datenpunkte, enthält aber auch Über- und Unterschreitungen, wodurch es schwieriger ist, Trends zu erkennen.
Die Kosten für ein D3.js Liniendiagramm oder Flächendiagramm hängen stark davon ab, inwieweit es individuell kodiert werden muss. Add-ons wie Tooltips, benutzerdefinierte Animationen und so weiter erhöhen die Kosten ein wenig, verbessern aber das Benutzererlebnis. Die Preise Seite gibt Ihnen einen allgemeinen Überblick. Die Preise Seite gibt Ihnen eine allgemeine Vorstellung. Bitte kontaktieren Sie uns jedoch für ein kostenloses Gespräch mit einem Entwickler, um herauszufinden, was für Sie am besten ist.