React + Dataviz

Es gibt eine natürliche Verbindung zwischen Datenvisualisierung (Dataviz) und SVG. SVG ist ein grafisches Format, das auf Geometrie basiert, und Geometrie ist genau das, was benötigt wird, um Daten anschaulich und präzise visuell darzustellen.

SVG hat den "Visualisierungs"-Teil, aber SVG ist eher deklarativ als programmatisch. Code zu schreiben, der Daten verarbeitet und in SVG-Visualisierungen umwandelt, eignet sich gut für JavaScript. Typischerweise bedeutet das D3.js ("Data-Driven Documents"), das hervorragend darin ist, Daten und SVG zu verknüpfen.

Wissen Sie, was sonst noch gut darin ist, mit Daten umzugehen? React.

Die Daten, die Dataviz antreiben, sind üblicherweise JSON, und "State" in React ist JSON. Füttern Sie diese JSON-Daten als State in eine React-Komponente, und sie wird beim Rendern Zugriff darauf haben und insbesondere beim Ändern dieses Zustands neu gerendert.

React + D3 + SVG = Ziemlich gut für Dataviz

Ich denke, diese Idee ist in den letzten Jahren aufgekommen. Fraser Xu hat vor ein paar Jahren darüber gesprochen

Ich verwende gerne React, weil alles, was ich benutze, eine Komponente ist, die jede Komponente sein kann, die ich selbst im Projekt schreibe oder die von großartigen Leuten auf NPM als Drittanbieter stammt. Wenn wir sie verwenden wollen, importieren oder erfordern wir sie einfach und übergeben dann die Daten, und wir erhalten das Visualisierungsergebnis.

Diese Sache mit den Komponenten ist eine große Sache. Ich bin kürzlich auf einige wirklich gute Bibliotheken gestoßen, die React + D3 miteinander verbinden, in Form von Komponenten. Anstatt diese Bibliotheken zu nutzen, aber im Grunde immer noch die eigentlichen Dataviz-Komponenten selbst zu erstellen, bieten sie eine Reihe von Komponenten an, die bereit sind, Daten zu empfangen und gerendert zu werden.

nivo

nivo bietet eine reichhaltige Auswahl an Dataviz-Komponenten, die auf den großartigen Bibliotheken d3 und Reactjs aufbauen.

Victory

Victory ist eine Sammlung modularer Diagrammkomponenten für React und React Native. Victory erleichtert den Einstieg, ohne die Flexibilität zu beeinträchtigen. Erstellen Sie einzigartige Datenvisualisierungen mit vollständig anpassbaren Stilen und Verhaltensweisen. Victory verwendet dieselbe API für Web- und React Native-Anwendungen für einfache plattformübergreifende Diagramme.

react-vis

[react-vis ist] eine zusammensetzbare Diagrammbibliothek

Recharts

Eine zusammensetzbare Diagrammbibliothek, die auf React-Komponenten basiert

React D3

Eine JavaScript-Bibliothek zum Erstellen von zusammensetzbaren und deklarativen Diagrammen. Eine neue Lösung zum Erstellen wiederverwendbarer Komponenten für interaktive Diagramme.