Einführung

DynamicD3 bietet individuelle Datenvisualisierungen mit D3.js an. Wir werden mit Ihnen zusammenarbeiten, um Ihnen zu helfen, die effektivste Art der Darstellung Ihrer Daten auszuwählen: dies kann Balkendiagramme, Liniendiagramme, Kuchendiagramme, Sankey Diagramme oder exotischere Datenvisualisierungen wie Chloroplethen, Bubble Charts oder Sunburst Diagramme umfassen.

D3.js-Datenvisualisierungen können eine große Anzahl von Add Ons wie Tooltips, Zooms, Mouse-overs und Animationen enthalten. Diese helfen den Nutzern, die Daten intuitiver zu verstehen und bieten eine ansprechende Erfahrung, die mit statischen Datenvisualisierungen nicht möglich ist. Wir können auch eine benutzerdefinierte Benutzeroberfläche erstellen - mit Optionsfeldern, Kontrollkästchen, Schiebereglern oder Kippschaltern - die das Spektrum der interaktiven Erfahrungen noch erweitern.

Sie erhalten von uns entweder einfaches JavaScript, das Sie direkt in Ihre Website einfügen können, oder eine React-Komponente. Wir werden eine einfache kostenlose Webseite als Demo einrichten. Als Option können wir ein Datengitter erstellen, damit Sie Ihre Daten leicht aktualisieren können.

D3.js kann Daten aus einer statischen JSON- oder CSV-Datei verwenden, oder es kann Daten aus einer API übernehmen. Wir können auch ein Datengitter erstellen, damit Sie die Daten leicht aktualisieren können.

Balkendiagramme

Balkendiagramme werden in der Regel für kategorische Daten verwendet, wie dieses Beispiel, in dem die Anzahl der Operationen an drei bestimmten Organen in einem großen Krankenhaus verglichen wird.

Beachten Sie, dass ein Balkendiagramm nicht dasselbe ist wie ein Histogramm, auch wenn sie ähnlich aussehen. Ein Histogramm enthält keine kategorischen Daten, wie z. B. Länder (bei denen ein Datenpunkt eindeutig in die eine oder andere Kategorie fällt). Vielmehr zeigt es Daten, die ein Kontinuum bilden, aber in verschiedene Bereiche, so genannte Bins, eingeteilt sind. So könnte beispielsweise ein Datensatz, bei dem die x-Achse die Entfernung von einem bestimmten Punkt anzeigt, in Bereiche eingeteilt werden. Diese Bereiche sind jedoch willkürlich und werden in der Regel gewählt, um die Daten klar darzustellen.

D3.js kann entweder für ein Balkendiagramm oder ein Histogramm verwendet werden, und beide können einen oder mehrere Datensätze darstellen. Es kann auch verwendet werden, um kontinuierliche Daten darzustellen. Diese werden jedoch besser in einem Liniendiagramm oder Streudiagramm dargestellt.

Liniendiagramme

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).

Liniendiagramme sind besonders nützlich, um mehrere Datensätze darzustellen, die in irgendeiner Weise miteinander verbunden sind. Diese Datensätze verwenden in der Regel dieselbe X-Achse, können aber unterschiedliche Skalen und unterschiedliche Y-Achsen haben. Sie sind besonders nützlich, um Trends in verschiedenen Datensätzen zu erkennen (z. B. wenn man vergleicht, wann es in verschiedenen Ländern einen Höchststand an Krankheiten gibt). In diesem Beispiel wird eine Benutzeroberfläche verwendet, um zwischen verschiedenen Kombinationen von Datensätzen zu wechseln. Beachten Sie, dass D3.js den Maßstab der vertikalen Achse automatisch anpassen kann, wenn sich die Daten ändern.

Eine weitere Stärke von Liniendiagrammen ist die Möglichkeit, Trends effektiv zu analysieren. Es kann eine Kurve gezeichnet werden, die durch jeden Punkt verläuft oder die kurz- oder längerfristige Trends zeigt. In dem oben verlinkten Beispiel wurde eine Benutzeroberfläche hinzugefügt, damit die Benutzer den Datensatz auf verschiedene Weise mit unterschiedlichen Kurven untersuchen können.

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

Pie Charts

In einem Kreisdiagramm ist der Winkel jeder Scheibe proportional zu der Menge, die sie darstellt. Kuchendiagramme und Donut-Diagramme sind identisch, außer dass Donut-Diagramme in der Mitte ein Loch haben, das Daten enthalten kann. Donut-Diagramme können mehrere Ringe haben, die eine Hierarchie von Datenwerten zeigen; diese Art von Diagramm wird jedoch als Sunburst-Diagramm bezeichnet.

Kreisdiagramme werden häufig in Zeitungen verwendet. Sie sind zwar vertraut und leicht zu verstehen, eignen sich aber nicht zur Darstellung proportionaler oder kategorischer Daten, da es schwierig ist, verschiedene Werte zu vergleichen (anders als bei einem Balkendiagramm, bei dem die Höhen der Rechtecke leicht verglichen werden können). Sie sind jedoch nützlich, wenn die Daten einen Anteil an einem Gesamtwert darstellen. Proportionen können auch mit Balkendiagrammen dargestellt werden, was jedoch weniger intuitiv ist.

Die Metapher eines Kuchens kann erweitert werden, indem ein Stück des Kuchens herausgezogen wird. Dies kann statisch oder mit einem Mouse-over-Effekt geschehen, wie auf der Seite Kuchendiagramm gezeigt. Dies wird als explodiertes Kreisdiagramm bezeichnet. Genauere Informationen können für den explodierten Abschnitt gegeben werden.

Sunburst-Diagramme

Sunburst-Diagramme sind eine Form von mehrstufigen Kreisdiagrammen. Sie werden manchmal auch als radiale Baumdiagramme bezeichnet, weil die Daten dieselbe hierarchische Struktur aufweisen wie bei einem herkömmlichen Baumdiagramm.

Diese Art der Datenvisualisierung zeigt die Hierarchie durch eine Reihe von Ringen, die für jeden Kategorieknoten in Scheiben geschnitten werden. Jeder Ring entspricht einer Ebene in der Hierarchie, wobei der zentrale Kreis den Wurzelknoten darstellt und sich die Hierarchie von ihm aus nach außen bewegt. In diesem Beispiel werden beispielsweise die Vorgangsarten unterteilt. Der erste Ring unterteilt die Operationen nach dem Organ, das betroffen ist. Der nächste Ring unterteilt jeden dieser Abschnitte nach der Art der Behandlung (konservativ, Operation, Transplantation oder Medikamente) und der nächste Ring zeigt, ob die Patienten versichert waren oder nicht. Beim Überfahren mit der Maus werden die zugrundeliegenden Werte in einer Anzeige am unteren Rand angezeigt. Das bedeutet, dass der Benutzer die Daten erkunden kann, indem er sich auf der Anzeige bewegt. Sie könnten zum Beispiel wissen wollen, wie sich der Anteil der Patienten, die sich einer Nierenbehandlung unterzogen haben, je nach ihrem Versicherungsschutz unterscheidet.

Farbe kann verwendet werden, um hierarchische Gruppierungen oder bestimmte Kategorien hervorzuheben. Im obigen Beispiel kann der Benutzer das Farbschema ändern, um verschiedene Aspekte des Datensatzes hervorzuheben. Im ersten Beispiel werden für jeden Ring unterschiedliche Farbbereiche verwendet. Dies erleichtert das Verständnis der in den einzelnen Ringen angezeigten Daten und macht gleichzeitig die Abschnittsgrenzen deutlich. Dies funktioniert jedoch nicht bei großen Datensätzen. In diesem Fall ist es übersichtlicher, wenn alle Abschnitte in einem bestimmten Ring denselben Farbton haben. Schließlich können in einigen Fällen auch Zufallsfarben verwendet werden. Diese machen es schwieriger, die Bedeutung der einzelnen Ebenen in der Hierarchie zu verstehen, erleichtern aber das Erkennen der verschiedenen Sektoren. Die UI-Anzeige im Beispiel Sunburst wechselt zwischen diesen Alternativen.

Sankey-Diagramm

Sankey-Diagramme werden verwendet, um Flussprozesse darzustellen, z. B. den Geldfluss innerhalb eines Unternehmens (wie in einem Jahresabschluss dargestellt), den Fluss von Energie oder Rohstoffen durch eine Reihe von industriellen Prozessen oder den Fluss eines abstrakteren Vermögenswerts, z. B. von Informationen. Die Höhe oder Breite jedes Knotens stellt die Gesamtmenge des Flusses durch diesen Knoten dar, und die Dicke der Linien zwischen jedem Knotenpaar stellt die Menge des Flusses dar, der zwischen diesen Knoten verläuft. Farbe kann verwendet werden, entweder um die Menge des Flusses darzustellen (z.B. mit Hilfe eines Farbverlaufs) oder um einen anderen Aspekt des Prozesses zu zeigen, wie in diesem Sankey-Diagramm, das Farben verwendet, um den Flüchtlingsfluss zu illustrieren.

Ein Bereich, in dem Sankeys häufig verwendet werden, ist der Energiesektor. Sie können beispielsweise die Herkunft des Erdgases nach Ländern, die Art und Weise, wie es seinen Bestimmungsort erreicht (Pipeline, Schiff usw.) und wie es dann verwendet wird (Endverbraucher), darstellen. Solche Diagramme sind für politische Entscheidungsträger nützlich, da sie Bereiche aufzeigen, in denen die Effizienz verbessert werden kann.

Sankey-Diagramme sind eine besonders intuitive Methode, um Veränderungen im Zeitverlauf darzustellen. In diesem Sankey-Diagramm wird der Strom von Flüchtlingen aus verschiedenen Herkunftsländern in die Vereinigten Staaten über einen bestimmten Zeitraum dargestellt. Mit dem Schieberegler kann man sich durch die Zeitachse bewegen, und die fließenden Übergänge machen es leicht, die Knotenpunkte zu verfolgen, wenn sie an Bedeutung gewinnen oder verlieren.

Chloropleth

Bei Choroplethen wird farblich dargestellt, wie eine Variable in einem geografischen Gebiet variiert. Sie ähneln Heatmaps; im Gegensatz zu letzteren unterteilen sie die Karte jedoch in geopolitische Untereinheiten wie Länder, Staaten, Provinzen oder Landkreise.

Die in einem Chloroplethen verwendeten Werte müssen der unterschiedlichen Größe der Gebiete Rechnung tragen. So gibt es beispielsweise große Unterschiede zwischen den Größen der einzelnen Länder, so dass es keinen Sinn macht, die Länder nur auf der Grundlage ihrer Bevölkerungszahl einzufärben. Stattdessen sollten diese Daten über die Regionen hinweg "normalisiert" werden, indem die Bevölkerungsdichte und nicht die absolute Bevölkerungszahl verwendet wird. Bei beiden Darstellungsarten stehen dunklere oder intensivere Farben in der Regel für höhere Werte, während hellere oder blassere Farben für niedrigere Werte stehen.

Leider sind Daten aus der realen Welt in der Regel nicht in natürliche Kategorien unterteilt. Ein Chloropleth, bei dem die Intensität einer Farbe proportional zur Bevölkerungsdichte ist, könnte beispielsweise funktionieren, wenn es einen ähnlichen Unterschied zwischen den Bevölkerungsdichten verschiedener Regionen gibt (z. B. zwischen verschiedenen Bezirken desselben US-Bundesstaates). Oft enthalten die Daten jedoch Werte, die um Größenordnungen größer sind als andere Werte im gleichen Datensatz. Glücklicherweise verfügt D3.js über eine Vielzahl von Skalen. In einigen Fällen könnte eine logarithmische Skala besser geeignet sein: Diese würde kleine Unterschiede gut darstellen, aber auch viel größere Unterschiede zeigen. In anderen Fällen könnte eine Farbe verwendet werden, um Werte über oder unter einem bestimmten Schwellenwert anzuzeigen. Es ist dieses hohe Maß an Flexibilität, das D3.js zu einem so mächtigen Werkzeug für die Erstellung von Datenvisualisierungen macht.

D3.js hilft uns nicht nur bei der Skalierung der Daten, sondern ermöglicht uns auch die Verwendung einer breiten Palette von Kartenprojektionen: Diese haben einen großen Einfluss darauf, wie die Daten wahrgenommen werden. Chloroplethen, die mit anderen Bibliotheken erstellt werden, verwenden oft Standardprojektionen wie die Mercator-Projektion, die in bestimmten Teilen der Welt zu starken Verzerrungen führen kann. Dies ist weniger ein Problem, wenn die Karte kleinere Gebiete zeigt, wie z. B. Grafschaften im Vereinigten Königreich, oder wenn die angezeigten Gebiete alle auf einem ähnlichen Breitengrad liegen.

Schließlich ist es möglich, zwei getrennte (aber zusammenhängende) Daten zu verwenden, die jeweils eine andere Farbskala haben. Dies wird als zweidimensionales Cloropleth bezeichnet.

Blasendiagramm

Blasendiagramme sind wie Punktdiagramme, wobei die Daten durch Kreise ersetzt werden. Während ein Punktdiagramm nur die Position und die Farbe eines Punktes zur Darstellung von Informationen verwenden kann, hat ein Blasendiagramm auch horizontale und vertikale Dimensionen. Dadurch eignen sich Blasendiagramme besonders gut für die Darstellung mehrdimensionaler Beziehungen.

Wenn für jeden Kreis nur eine zusätzliche Information angezeigt werden muss, kann diese durch die Fläche des Kreises dargestellt werden. Dies kann jedoch problematisch sein, da die Benutzer dazu neigen, die relative Größe der Kreise anhand ihres Durchmessers und nicht anhand ihrer Fläche zu beurteilen. Es ist wichtig, dies in der Legende deutlich zu machen.

Blasendiagramme funktionieren weniger gut, wenn es viele Datenpunkte gibt und wenn der Datenbereich groß ist. Wenn es zu viele Datenpunkte gibt, kann die Anzeige überfüllt aussehen und die Blasen können sich überschneiden. Bei einem großen Wertebereich im Datensatz sind die kleineren Blasen möglicherweise nicht deutlich sichtbar. Diese Probleme lassen sich bis zu einem gewissen Grad dadurch lösen, dass beim Überfahren mit der Maus weitere Informationen angezeigt werden, z. B. der genaue Wert des zugrunde liegenden Datenpunkts.

Ein letztes Problem bei Blasendiagrammen ist die Illusion des gewichteten Durchschnitts: Die Größe der Blasen beeinflusst die Wahrnehmung der x- und y-Werte des Datenpunkts. Diese Verzerrung muss bei der Schätzung der mittleren x- und y-Werte berücksichtigt werden.

Blasendiagramme, die negative Werte anzeigen sollen, können entweder mit einem Symbol in der Mitte der Blasen, die negative Werte darstellen, oder mit unterschiedlichen Farben für positive und negative Werte oder sogar mit unterschiedlichen Formen erstellt werden. Mit D3.js ist dieses Maß an Flexibilität möglich, was jedoch bei den meisten Datenvisualisierungsbibliotheken nicht der Fall ist.