Wir leben in einer Zeit explosiven Wachstums der Datenmenge, die von der Menschheit erzeugt und konsumiert wird. In fast jeder Anwendung, die heute entwickelt wird, werden Daten entweder irgendwo in ihnen verwendet oder visualisiert. Mit Hilfe von Daten bemühen sich Programmierer, die Arbeit mit ihren Programmen so angenehm wie möglich zu gestalten.
Manchmal kann es vorkommen, dass das Wertvollste und Interessanteste, was eine Anwendung dem Benutzer geben kann, einige Daten sind. Wenn Sie sie jedoch in Form einer Liste oder Tabelle darstellen, ist die Arbeit mit solchen Daten wahrscheinlich mühsam. Wenn viele Daten vorhanden sind und nur ihre einfachste Darstellung angezeigt wird, kann der Benutzer außerdem Schwierigkeiten haben, diese zu analysieren und darauf basierende Entscheidungen zu treffen.
Die Daten, die den Benutzer der Anwendung darstellen, sollten nicht nur für ihn selbst von Wert sein. Sie sollten so gestaltet sein, dass es schnell, bequem und angenehm ist, mit ihnen zu arbeiten.
Heute präsentieren wir Ihnen eine Übersetzung eines Materials, in dem Open-Source-JavaScript-Bibliotheken für die Datenvisualisierung behandelt werden.
1. D3
D3-BibliothekMöglicherweise kann die Open-Source-Bibliothek
D3 (auch als D3.js bezeichnet) als die beliebteste der vorhandenen JS-Bibliotheken für die Datenvisualisierung bezeichnet werden. Insbesondere dieses Projekt hat auf GitHub fast 80.000 Sterne gesammelt. Die Bibliothek wurde erstellt, um Daten mithilfe von Technologien wie HTML, SVG und CSS zu visualisieren.
Dank der Aufmerksamkeit der Ersteller der Bibliothek für Webstandards bietet D3 Entwicklern eine ganzheitliche Umgebung, die für die Verwendung in modernen Browsern zur Visualisierung von Daten geeignet ist, sodass nicht mehr nach kostenpflichtigen Lösungen gesucht werden muss. Die D3-Bibliothek kombiniert Komponenten für die Datenvisualisierung und einen Ansatz für die Arbeit mit dem DOM, der wiederum auf Daten basiert. Mit D3 können Sie beliebige Daten in das DOM ausgeben und dann die entsprechenden Transformationen auf das Dokument anwenden. Hier finden Sie eine großartige
Galerie mit Beispielen für die Verwendung dieser Bibliothek.
Achten Sie übrigens darauf, dass nach Meinung von D3 überhaupt
keine Bibliothek zur Datenvisualisierung vorhanden ist . Wir glauben, dass Sie selbst entscheiden können, was Sie in Betracht ziehen und ob Sie es in Ihrem Projekt verwenden möchten.
2. Chart.js
Chart.jsDie
Chart.js- Bibliothek, die auf GitHub etwa
40.000 Sterne gesammelt hat, ist eine sehr beliebte Lösung zum Erstellen von HTML5-Grafiken und -Diagrammen auf der Basis des
<canvas> , mit dem reaktionsschnelle Webanwendungen entwickelt werden können. Die aktuelle zweite Version der Bibliothek unterstützt die Kombination von Diagrammen verschiedener Typen (es gibt 8 Grundtypen von Diagrammen) und verschiedenen Koordinatensystemen. Chart.js kann in Verbindung mit der Bibliothek
moment.js verwendet werden. Die Bibliothek kann bei Bedarf von
cdnjs heruntergeladen
werden .
3. Three.js
Three.jsDie Three.js- Bibliothek ist eine sehr beliebte Lösung (ungefähr 45.000 Sterne auf GitHub; mehr als 1000 Personen haben zum Projekt beigetragen) zum Erstellen von 3D-Animationen mit WebGL. Aufgrund der Flexibilität und Abstraktheit des Projekts können mit Three.js Daten in
zwei und drei Dimensionen visualisiert werden.
Hier ist beispielsweise ein spezielles Modul für Three.js, mit dem dreidimensionale Diagramme erstellt werden können. Hier ist eine
Online-Sandbox für Datenvisualisierungsexperimente. Wenn Sie daran denken, Daten mit WebGL zu visualisieren, sollten Sie sich Three.js ansehen.
4. ECharts und Highcharts JS
Ein Beispiel für die Arbeit mit ECharts (Bild von hier )ECharts ist ein Baidu-Projekt, das auf GitHub etwa
30.000 Sterne gesammelt hat. Es ist eine Bibliothek zur Datenvisualisierung und grafischen Darstellung in einem Browser. Es wird in reinem JavaScript unter Verwendung der
zrender- Bibliothek geschrieben, die für die Verwendung mit dem
<canvas> .
Die Bibliothek unterstützt die grafische Darstellung mit
<canvas> , SVG (4.0+) und VML. ECharts können nicht nur zur Entwicklung von Seiten für Desktop- oder mobile Browser verwendet werden, sondern auch zur Organisation eines effektiven Server-Renderings.
Hier finden Sie eine Galerie mit Beispielen für die Verwendung dieser Bibliothek, mit denen Sie in einer interaktiven Umgebung experimentieren können.
Highcharts jsDie
Highcharts JS- Bibliothek ist weit verbreitet und hat auf GitHub etwa
8.000 Sterne gesammelt. Der Hauptmechanismus, den sie für die Datenvisualisierung verwendet, ist die SVG-Technologie, mit der Möglichkeit, für ältere Browserversionen zu VML und
<canvas> zu wechseln. Es wird angegeben, dass 72 der 100 größten Unternehmen der Welt diese Bibliothek nutzen, was diese Bibliothek, falls zutreffend, zur beliebtesten Chartlösung für große Unternehmen wie Facebook und Twitter macht.
5. MetricsGraphics.js
MetricsGraphics.jsDie
MetricsGraphics.js- Bibliothek (ca. 7.000 Sterne auf GitHub) ist eine für die Zeitreihenvisualisierung optimierte Lösung. Es zeichnet sich durch seine relativ geringe Größe (80 KB in verkleinerter Form) aus und bietet dem Entwickler einen kleinen, aber durchdachten Satz hochspezialisierter Werkzeuge, darunter Werkzeuge zum Erstellen von Liniendiagrammen, Streudiagrammen, Histogrammen, Balkendiagrammen und Datentabellen.
Hier ist eine interaktive Galerie mit Beispielen für die Arbeit mit dieser Bibliothek.
6. Recharts
RechartsDie
Recharts- Bibliothek mit fast 10.000 Sternen auf GitHub ist eine React- und D3-basierte Diagrammlösung, die wie die Arbeit mit deklarativen React-Komponenten aussieht. Die Bibliothek bietet dem Entwickler Unterstützung für SVG. Der kompakte Abhängigkeitsbaum (basierend auf D3-Submodulen) kann über Komponenteneigenschaften in hohem Maße angepasst werden.
Hier finden Sie Beispiele für seine Verwendung.
7. Raphaël
RaphaëlRaphaëls "Vektor" -Bibliothek (ungefähr 10 Tausend Sterne auf GitHub) wurde für die Arbeit mit Vektorgrafiken in einer Webumgebung entwickelt. Als Basistechnologie zum Erstellen von Grafikobjekten verwendet sie SVG und VML. Daher sind grafische Objekte auch DOM-Objekte, mit denen Sie mithilfe von JavaScript-Ereignishandlern eine Verbindung herstellen können. Die Bibliothek unterstützt derzeit Browser wie Firefox 3.0+, Safari 3.0+, Chrome 5.0+, Opera 9.5+ und Internet Explorer 6.0+.
7. C3
Beispiel für eine C3-BibliothekDie
C3- Bibliothek (ca. 8.000 Sterne auf GitHub) basiert auf D3. Sie bietet dem Entwickler die Möglichkeit, Klassen für alle ihre Elemente zu verwenden, sodass Sie mithilfe der Klassen Ihre eigenen Stile definieren und die Funktionen von D3 nutzen können. Darüber hinaus werden verschiedene APIs und Rückrufe zum Organisieren der interaktiven Interaktion mit Diagrammen unterstützt. Mit ihnen können Sie die Diagramme auch dann aktualisieren, wenn sie auf der Seite angezeigt werden.
Hier finden Sie Beispiele für die Verwendung dieser Bibliothek.
8. React-Vis, React Virtualized, Victory
React-Vis-Komponenten-KitDer Satz von
React-Vis- Komponenten (ca. 4.000 Sterne auf GitHub) wurde von Uber entwickelt und dient zur Organisation eines einheitlichen Datenvisualisierungssystems in React-Anwendungen. Diese Lösung unterstützt die Darstellung von Daten in verschiedenen Formen, insbesondere in Form von Wärmekarten und Streudiagrammen. Um mit dieser Bibliothek arbeiten zu können, ist beispielsweise keine Vorkenntnisse in D3 erforderlich. Es bietet dem Entwickler einfache modulare Bausteine wie X / Y-Achsen.
Reagieren Sie auf den virtualisierten KomponentensatzDer Satz von
virtualisierten React- Komponenten (ungefähr 12.000 Sterne auf GitHub) dient dazu, das effektive Rendern großer Sätze tabellarischer Daten zu organisieren. Reagieren Sie virtualisierte ES6-, CommonJS- und UMD-Builds. Das Projekt unterstützt Webpack 4. Wenn Sie diese Komponenten verwenden möchten, lesen Sie den Abschnitt
Abhängigkeiten in der Dokumentation.
Victory Component CollectionVictory ist eine Sammlung von React-Komponenten, mit denen Daten mit interaktiven Funktionen visualisiert werden können. Das Projekt wurde von Formidable Labs erstellt und hat auf GitHub etwa 6.000 Sterne gesammelt. Victory verwendet dieselben APIs sowohl für reguläre React-Anwendungen als auch für die React Native-Umgebung, was die Entwicklung plattformübergreifender Lösungen erleichtert. Victory bietet Entwicklern flexible und schöne Möglichkeiten, die Funktionen von React-Komponenten für die Datenvisualisierung zu nutzen.
9. CartoDB
CartoDB-DienstDie Carto- Plattform (ca. 2.000 Sterne auf GitHub) dient zur Visualisierung und Analyse von Geodaten. Auf dieser Plattform können Sie Geodaten herunterladen (z. B. in den Formaten Shapefiles oder GeoJSON), sie visualisieren, auf eine Karte legen, mit CartoCSS formatieren und mit SQL suchen.
Es gibt Video-Tutorials zur Arbeit mit dieser Plattform.
10. RAWGraphs
RAWGraphsDie
RAWGraphs- Bibliothek mit ungefähr 5.000 Sternen auf GitHub bietet ein Tool, mit dem Sie Tabellen mit Daten mit Visualisierungstools verknüpfen können. RAWGraphs basiert auf D3 und ermöglicht Entwicklern die Erstellung einer eigenen Vektordatenvisualisierung. Es arbeitet mit tabellarischen Daten in verschiedenen Formaten und unterstützt Daten, die einfach aus anderen Anwendungen kopiert werden können. Die Ergebnisse von RAWGraphs werden im SVG-Format dargestellt, können mit den entsprechenden Anwendungen bearbeitet oder unverändert auf Webseiten verwendet werden.
Hier finden Sie Beispiele für die Verwendung dieser Bibliothek.
11. Metabasis
MetabasisDie
Metabase- Bibliothek, die auf GitHub mehr als 11.000 Sterne gesammelt hat, bietet eine relativ schnelle und einfache Möglichkeit, Kontrollfelder mit visualisierten Daten zu erstellen, für die keine SQL-Kenntnisse erforderlich sind. Gleichzeitig verfügt die Bibliothek über einen speziellen SQL-Modus für Analysten und Personen, die professionell an der Datenverarbeitung beteiligt sind. Mit Metabase können Sie Daten
segmentieren , indem Sie Filter oder Filtersätze erstellen. Die Bibliothek unterstützt die Erstellung von Metriken - berechnete Indikatoren, auf die Sie häufig zugreifen müssen. Weitere Funktionen von Metabase sind die Unterstützung für das Senden von Daten an Slack und die Bereitstellung der Möglichkeit, in dieser Umgebung mit
MetaBot mit ihnen zu arbeiten. Diese Bibliothek kann möglicherweise als hervorragendes Werkzeug zur Visualisierung von Daten in Unternehmen angesehen werden, obwohl zu beachten ist, dass einige Meisterarbeiten erforderlich sind, um sie zu beherrschen.
Bonusbibliothek: Taucharts
TauchartsDie Taucharts-Datenvisualisierungsbibliothek (ca. 2.000 Sterne auf GitHub) basiert auf der D3-Bibliothek. Es bietet dem Entwickler eine deklarative Schnittstelle zum schnellen Organisieren der Verbindung von Datenfeldern mit visuellen Eigenschaften. Mit seiner Architektur können Sie Diagramme erstellen, in denen Variablen mithilfe von X- und Y-Koordinaten (
Facettendiagrammen ) gruppiert werden. Mit Taucharts können Sie das Verhalten von Diagrammen mit Plugins erweitern, die zur Wiederverwendung geeignet sind.
Zusammenfassung
Wir haben uns JavaScript-Bibliotheken angesehen, um Daten zu visualisieren, die bei der Entwicklung von Webanwendungen verwendet werden können. Angesichts dessen, was wir über die Rolle von Daten in der modernen Welt gesprochen haben, ist es nicht verwunderlich, dass es eine Vielzahl von Lösungen für die Datenvisualisierung gibt. Daher hier einige ähnliche Bibliotheken (achten Sie beim Studium darauf, dass einige von ihnen schon lange nicht mehr aktualisiert wurden):
Liebe Leser! Mit welchen Bibliotheken visualisieren Sie Daten in Ihren Webprojekten?
