Add-Ons

Tooltips

Wir können jedem Diagramm oder jeder Grafik Tooltips hinzufügen. Diese sind besonders hilfreich, wenn es viele Datenpunkte gibt (z. B. in einem Punktediagramm). Selbst bei kleineren Datensätzen tragen sie dazu bei, das Diagramm übersichtlicher zu gestalten, damit sich die Benutzer auf die allgemeinen Muster konzentrieren können.

Sie sind auch in komplexen Diagrammen nützlich, in denen verschiedene Teile des Diagramms unterschiedliche Aspekte des Datensatzes vermitteln, was für Benutzer, die mit dieser Art von Diagramm nicht vertraut sind, möglicherweise nicht offensichtlich ist. In diesem Sunburst-Diagramm zum Beispiel können die Benutzer mit der Maus über Segmente fahren, um sowohl den zugrunde liegenden Datenpunkt als auch den Kontext dieses Datenpunkts zu sehen. In diesem Fall schlüsselt das Sunburst-Diagramm medizinische Behandlungen nach Art, betroffenem Organ und Versicherungsstatus des Patienten auf. Diese Informationen werden am unteren Rand der Anzeige angezeigt und ändern sich, wenn der Benutzer mit der Maus über die einzelnen Segmente fährt.

Eine der großen Stärken von D3 ist, dass es eine große Flexibilität bietet. Ein Tooltip kann alle Daten enthalten, die im Datensatz vorhanden sind, kontextuellen Text oder sogar Werte aus einem völlig anderen Datensatz. Zum Beispiel zeigt diese Sankey den Nutzern, dass die Knoten die Gesamtzahl der Flüchtlinge darstellen, während die Linien die Anzahl der Flüchtlinge darstellen, die sich zwischen jedem Ursprung (in diesem Fall ein Land) und Ziel (in diesem Fall ein US-Bundesstaat) bewegen. Dieser Text kann in jeder beliebigen Sprache sein, was die Lokalisierung enorm erleichtert.

Wenn zwei oder mehr Datensätze in der Anzeige verwendet werden, können Tooltipps Vergleiche zwischen diesen anzeigen. Sie können z. B. sowohl den Wert dieses Jahres als auch den des letzten Jahres oder Datensätze für verschiedene Regionen anzeigen. Umgekehrt können sie bei einem einzigen Datensatz zur Anzeige von Konfidenzintervallen, Prozentwerten oder anderen statistischen Informationen zu Datenpunkten verwendet werden, um den Nutzern zu helfen, die Zuverlässigkeit der Daten zu beurteilen.

Ein weiterer Vorteil von Tooltipps ist, dass sie Spaß machen! Sie erhöhen die Interaktivität, indem sie es den Nutzern ermöglichen, sich mit dem Diagramm zu beschäftigen und die Daten nach ihren eigenen Vorstellungen zu erkunden.

Zooms

Mit Hilfe von Zooms können die Benutzer bestimmte Bereiche eines Diagramms oder einer Grafik vergrößern, um Datenpunkte und Trends genauer zu untersuchen. Dies ist besonders bei großen Datensätzen hilfreich. Es ist auch nützlich, wenn die Nutzer an verschiedenen Aspekten des Datensatzes interessiert sind: Einige Nutzer möchten sich beispielsweise auf einen bestimmten Zeitraum konzentrieren.

Zooms ermöglichen es den Nutzern auch, detaillierte Vergleiche zwischen verschiedenen Teilen des Datensatzes anzustellen. Sie können die Daten interaktiv erkunden, indem sie in einen Bereich hineinzoomen und dann zu einem anderen Bereich wechseln. So lassen sich Korrelationen, Ausreißer und Muster deutlicher erkennen.

Ein weiterer Vorteil von Zooms ist, dass sie es den Nutzern ermöglichen, kleinere Geräte wie Smartphones zu verwenden, um den gesamten Datensatz zu sehen und dennoch die benötigten Details zu erkennen. Smartphone-Nutzer sind es gewohnt, mit der "Pinch-Geste" in das Display zu zoomen.

Das Zoomen trägt auch dazu bei, die Zugänglichkeit für Menschen mit Sehbehinderungen zu verbessern.

Bürsten

Das Pinseln funktioniert ähnlich wie das Zoomen, da es dem Benutzer die Möglichkeit bietet, mit einem Teil des Datensatzes zu interagieren. Anstatt jedoch einen Teil des Diagramms zu vergrößern, ändert sich die Größe dieses Bereichs nicht. Der gepinselte Bereich kann auf andere Weise angezeigt werden, z. B. durch eine Änderung der Farbe.

Ein Pinsel kann verwendet werden, um die Daten zu filtern - zum Beispiel könnten die Benutzer mit der Maus entlang der x-Achse eines Flächendiagramms streichen. Der Bereich, der mit dem Pinsel bearbeitet wurde, könnte dann in einem anderen Teil der Anzeige erscheinen. Eine andere Möglichkeit, einen Pinsel zu verwenden, besteht darin, ein separates Diagramm hinzuzufügen, das dieselben Daten in einem anderen Maßstab zeigt. In diesem Fall funktioniert der Pinsel ähnlich wie der Zoom. Er kann jedoch einfacher zu verwenden sein, da das ursprüngliche Diagramm seine Abmessungen nicht ändert.

Animationen

Animationen sind in vielerlei Hinsicht hilfreich. Bei einem einfachen Balkendiagramm zum Beispiel können die Balken langsam nach oben gleiten, anstatt sofort zu erscheinen. Dies trägt nur wenig zum Informationsgehalt des Diagramms bei, macht es aber für die Benutzer interessanter.

Animationen spielen eine wichtigere Rolle, wenn sie für Übergänge verwendet werden. Zum Beispiel zeigt dieses Sankey-Diagramm Daten für mehrere Jahre. Wenn der Benutzer mit dem Schieberegler von einem Jahr zum anderen wechselt, ändern sich die relativen Größen der Knotenpunkte. Sie bewegen sich, weil sie in der Reihenfolge ihrer Größe angeordnet sind. Ohne die Animation wäre die Veränderung unangenehm, und es wäre schwierig, die "Objektkonstanz" aufrechtzuerhalten. Ein Benutzer könnte zum Beispiel daran interessiert sein, wie sich der Zustrom (in diesem Fall von Flüchtlingen) aus einem bestimmten Land von Jahr zu Jahr verändert. Wenn dieser Knoten ohne fließenden Übergang umherspringen würde, wäre es schwierig, dies zu tun.

Ein weiteres Beispiel für einen Übergang ist in diesem PieChart zu sehen. Wenn man mit der Maus über ein Segment fährt, bewegt es sich leicht nach außen. Durch die Verwendung eines sanften Übergangs wirkt diese Bewegung natürlich und trägt dazu bei, die Metapher des Kreises beizubehalten. Ohne diesen Übergang würde dieser Teil des Tortendiagramms von einer Position zur anderen springen. Aus demselben Grund eignen sich Animationen besonders gut für die Darstellung von Zeitreihendaten, z. B. von Werten in einem Börsenticker. Auch hier besteht der Vorteil darin, dass es für das Auge einfacher ist, einen bestimmten Wert zu verfolgen, während er sich ändert.

Wenn Animationen verwendet werden, um zwischen Datensätzen zu wechseln, und diese Übergänge von einer Benutzeroberfläche gesteuert werden, wie z. B. <TransLink>dieser Schieberegler</TransLink>, kann der Benutzer die Werte fast wie eine Videoanzeige erkunden.

Farben

Da D3-Grafiken und -Diagramme mit JavaScript erstellt werden, ist es möglich, die Farben über eine Funktion einzustellen. Dies bedeutet, dass Farben auf eine Weise verwendet werden können, die in anderen Datenvisualisierungsbibliotheken nicht möglich ist.

Die offensichtlichste Verwendung von Farben ist die Unterscheidung verschiedener Datensätze - zum Beispiel enthält dieses Balkendiagramm Daten für mehrere ähnliche Datensätze. Durch die Verwendung unterschiedlicher Farben für jeden Datensatz und die Erläuterung der Bedeutung dieser Farben in einer Legende ist es möglich, sie im selben Diagramm zu kombinieren.

Farbe kann auch verwendet werden, um ähnliche Wertegruppen zu gruppieren. Dieses Sunburst-Diagramm zeigt zum Beispiel eine Hierarchie von Daten. Jeder Ring steht für eine andere Ebene in der Hierarchie. Durch die Verwendung von Farben können wir Werte gruppieren, die zur gleichen Ebene gehören, und sie in einer Legende erläutern.

Ein weiterer Vorteil von D3 ist die Möglichkeit, die Sättigung der Farbe und den Farbton zu variieren. In diesem Sunburst-Diagramm (oberes Beispiel) wird die Sättigung der Farbe in jedem Abschnitt variiert, während alle Abschnitte im gleichen Ring die gleiche Farbe haben. In diesem Fall wird die Intensität einfach randomisiert, um die einzelnen Sektoren deutlicher zu unterscheiden (vergleiche das Beispiel, in dem jeder Sektor in einem Ring sowohl den gleichen Farbton als auch die gleiche Sättigung hat). Die Sättigung könnte aber auch mit dem zugrunde liegenden Datenpunkt zusammenhängen. In diesem Fall ist es besser, wenn die Abschnitte nicht nach der Größe geordnet sind, da kleinere Sektoren sonst zu schwer zu unterscheiden sind.

Ein weiteres Beispiel für die Verwendung von Farben zur Verdeutlichung des Diagramms ist dieses Sankey-Diagramm. In den beiden oberen Beispielen wird eine Farbe verwendet, um die Ursprungsknoten darzustellen, und eine andere Farbe steht für die Zielknoten. Außerdem gibt die Dichte der Farbe die Größe der einzelnen Knoten an. Die gleichen Farben werden auch für die Verbindungslinien verwendet. Es besteht also eine offensichtliche Verbindung zwischen den Werten, die durch die Knoten dargestellt werden, und den Werten, die durch die Verbindungslinien dargestellt werden. In den letzten beiden Beispielen werden zwei Farben verwendet, und die zugrunde liegenden Datenwerte werden durch die relativen Werte dieser beiden Farben dargestellt. Dies kann manchmal klarer sein, insbesondere wenn die Unterschiede zwischen den Datenwerten geringfügig sind.

Schließlich kann die Farbe manchmal auch einfach dazu dienen, Teile des Diagramms abzugrenzen, ohne dass eine Bedeutung dahinter steht. Dies ist der Fall im dritten Beispiel eines Sunburst-Diagramms. Die Farben sind bewusst so gewählt, dass die Grenzen zwischen den Sektoren im Sunburst-Diagramm deutlich sichtbar sind. Dies ist besonders nützlich, wenn die Werte klein und die Sektoren sehr schmal sind.

Eine weitere Möglichkeit, Farbe zu verwenden, besteht darin, eine bestimmte Gruppe von Datenpunkten zu unterscheiden. Dies kann mit einem Pinsel (siehe oben) kombiniert werden. Durch Streichen über das Diagramm können die Benutzer Datenpunkte filtern. Die gefilterten Werte können in einer anderen Farbe angezeigt werden, die mit einer separaten Legende verknüpft werden kann.

Auch ohne einen Pinsel können Farben nützlich sein, um bestimmte Werte hervorzuheben. Mit D3.js können wir zum Beispiel Ausreißern eine bestimmte Farbe geben oder unterschiedliche Farben für negative und positive Werte verwenden. Datenvisualisierungen werden viel klarer, wenn Farben intelligent eingesetzt werden, insbesondere wenn es viele Datenpunkte gibt. Die Farbkodierung kann auch verwendet werden, um die Gesamtstruktur einer Datenvisualisierung darzustellen.

Farben können auch bei Interaktionen helfen. Die Farbe eines Datenpunkts, eines Balkens oder einer Linie kann sich beim Überfahren mit der Maus ändern, um zu betonen, dass sie ausgewählt wurden.

Datenraster

Die Daten für ein D3js-Diagramm oder eine Grafik stammen in der Regel aus einer von drei Quellen. Wenn sich die Daten wahrscheinlich nicht sehr oft ändern, können sie in einer JSON- oder CSV-Datei auf dem Server gespeichert werden. Wenn die Daten aus einer lokalen Datenbank stammen, muss diese Datenbank direkt aktualisiert werden, entweder mit einer benutzerdefinierten Schnittstelle oder mit einem Datenbank-Tool wie DBeaver. Wir können dies für Sie einrichten.

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.

Eine Variante eines Datengitters ist ein Formular: Dieses funktioniert ähnlich wie das Kontaktformular auf einer Website. Dies kann besser geeignet sein, wenn die Daten von Mitarbeitern eingegeben werden müssen, die mit einem Datengitter nicht vertraut sind.

UI Elements

D3.js bietet zwar eine begrenzte Anzahl von UI-Tools, aber es ist besser, diese entweder mit einer Komponentenbibliothek wie MUI oder als einfaches HTML zu programmieren.

Die nützlichsten UI-Elemente sind Optionsfelder und Kontrollkästchen. Diese werden manchmal verwechselt. Optionsfelder, wie die in diesem Stapelbalkendiagramm gezeigten, ermöglichen es dem Benutzer, zwischen einer Reihe von sich gegenseitig ausschließenden Möglichkeiten zu wählen: In diesem Fall kann er einen einzelnen Datensatz wählen, der als einfaches Balkendiagramm dargestellt wird, oder mehrere Datensätze, die als gestapeltes Balkendiagramm angezeigt werden. Sie können aber auch verwendet werden, um die Art und Weise der Datenanzeige zu ändern. In dieser Sunburst-Datenvisualisierung beeinflussen die Optionsfelder die Art und Weise, wie die Farbe verwendet wird, um verschiedene Aspekte des Datensatzes hervorzuheben.

Bei Kontrollkästchen hingegen können die Benutzer eine beliebige Kombination von Optionen auswählen: In diesem Fall schließen sich die Optionen nicht gegenseitig aus. In dem Beispiel mit den Kontrollkästchen kann die <Link>Liniendiagramm-Datenvisualisierung</Link> nur einen Datensatz, zwei beliebige Datensätze oder alle drei anzeigen. Dies ist äußerst hilfreich, wenn Benutzer spezifische Vergleiche zwischen Paaren von Datensätzen anstellen müssen: Sie könnten zum Beispiel die Werte für Herzoperationen mit denen für Leberoperationen vergleichen und die Werte für Milzoperationen entfernen, um die Übersichtlichkeit zu verbessern.

Ein weiteres UI-Element, das zur Verbesserung von D3.js-Datenvisualisierungen nützlich ist, ist ein Kippschalter. Dieser wird verwendet, wenn das Diagramm in einem von zwei Zuständen sein kann oder wenn Sie den Benutzern die Möglichkeit geben wollen, einen Teil der Datenvisualisierung auszuschalten, um die Übersichtlichkeit zu verbessern. In diesem Beispiel wird ein Kippschalter verwendet, um <Link>zwischen einem Liniendiagramm und einem Flächendiagramm umzuschalten</Link>.

Schließlich können auch Schieberegler verwendet werden. Diese funktionieren besonders gut, wenn eine Datenvisualisierung Datensätze aus verschiedenen Zeiträumen enthält. Sie ermöglichen es den Nutzern, sich intuitiv auf der Zeitachse vor und zurück zu bewegen, wie in dieser <Link>Sankey-Datenvisualisierung</Link>