react-vis - Data-Visualization oriented components

  •        101

A collection of react components to render common data visualization charts, such as line/area/bar charts, heat maps, scatterplots, contour plots, pie and donut charts, sunbursts, radar charts, parallel coordinates, and tree maps.Install react-vis via npm.

https://uber.github.io/react-vis
https://github.com/uber/react-vis

Dependencies:

d3-array : ^1.2.0
d3-collection : ^1.0.3
d3-color : ^1.0.3
d3-contour : ^1.1.0
d3-format : ^1.2.0
d3-geo : ^1.6.4
d3-hierarchy : ^1.1.4
d3-interpolate : ^1.1.4
d3-sankey : ^0.7.1
d3-scale : ^1.0.5
d3-shape : ^1.1.0
d3-voronoi : ^1.1.2
deep-equal : ^1.0.1
global : ^4.3.1
prop-types : ^15.5.8
react-motion : ^0.4.8

Tags
Implementation
License
Platform

   




Related Projects

react-d3-components - D3 Components for React

  •    Javascript

Let React have complete control over the DOM even when using D3. This way we can benefit from Reacts Virtual DOM. to start a webserver, and navigate to http://localhost:8000/example in order to visualize the new example page. Note that the example page directly points to the dist folder.

vx - 🐯react + d3 = vx | visualization components

  •    Javascript

vx is a collection of reusable low-level visualization components. vx combines the power of d3 to generate your visualization with the benefits of react for updating the DOM. Let's make a simple bar graph.

ngx-graph - Graph visualization library for angular

  •    TypeScript

This library is focused on handling graph data (anything with nodes and edges) rather than chart data. Currently the only visualization uses the Dagre layout, which is specialized for directed graphs. The plan is to implement multiple visualisations for graph data within this same library. Eventually, ngx-charts-force-directed-graph may be imported into this library as another option to visualize your graph data. ngx-graph is a Swimlane open-source project; we believe in giving back to the open-source community by sharing some of the projects we build for our application. Swimlane is an automated cyber security operations and incident response platform that enables cyber security teams to leverage threat intelligence, speed up incident response and automate security operations.


react-d3-library - Open source library for using D3 in React

  •    Javascript

An open source library that will allow developers the ability to reroute D3 output to React’s virtual DOM. Just use your existing D3 code, and with a few simples lines, you can now harness the power of React with the flexibility of D3! React-D3-Library will compile your code into React components, and it also comes with a series of D3 template charts converted to React components for developers who are unfamiliar with D3. Not only do we build fully functional React components, but they utilize the power of D3 to automate scaling ranges, normalizing data, and constructing legends.

react-timeseries-charts - Declarative and modular timeseries charting components for React

  •    Javascript

This library contains a set of modular charting components used for building flexible interactive charts. It was built for React from the ground up, specifically to visualize timeseries data and network traffic data in particular. Low level elements are constructed using d3, while higher level composability is provided by React. Charts can be stacked as rows, overlaid on top of each other, or any combination, all in a highly declarative manner. The library is used throughout the public facing ESnet Portal.

Britecharts - Client-side reusable Charting Library based on D3

  •    Javascript

Britecharts is a client-side reusable Charting Library based on D3.js v4 that offers easy and intuitive use of charts and components that can be composed together to create amazing visualizations.Britecharts components have been written in ES2016 with a Test Driven methodology, so they are fully tested, and we are committed to keeping them that way.

react-bluekit - Automatically generating a component library from your React components (ES5, ES6, Typescript)

  •    Javascript

BlueKit automatically generates a library from your React components with editable props and live preview. Point BlueKit to folders with your React components and it will generate a library for you. You'll be able to browse through the components, tweak their props, and see the changes live. Furthermore, any changes that you make to your components' code will be reflected in the library.

epoch - A general purpose, real-time visualization library.

  •    HTML

A general purpose real-time charting library for building beautiful, smooth, and high performance visualizations.

mapd-charting - Dimensional charting built to work natively with crossfilter rendered using d3.js

  •    Javascript

Dimensional charting built to work natively with crossfilter rendered using d3.js. MapD-Charting is a superfast charting library that works natively with crossfilter that is based off dc.js. It is designed to work with MapD-Connector and MapD-Crossfilter to create charts instantly with our MapD-Core SQL Database. Please see examples for further understanding to quickly create interactive charts.

react-map-gl - React friendly API wrapper around MapboxGL JS

  •    Javascript

In addition to exposing MapboxGL functionality to React apps, react-map-gl also integrates seamlessly with deck.gl.browserify - react-map-gl is extensively tested with browserify and works without configuration.

d4 - Data-Driven Declarative Documents

  •    Javascript

d4 is an experiment in using React to produce data-driven documents (ala d3) that are performant and understandable. This is not a library, but rather a demonstration that it's possible (and preferable) to use React instead of the core of d3. d3 can produce fantastic results. Look no further than Mike Bostock's blocks for examples. Unfortunately, I always find d3 code surprisingly difficult to understand and extend, in the same way I used to find code difficult to approach before React encouraged a declarative style. By using React (which can render SVGs, no problem) for data-driven documents, we can improve comprehension and performance and use tools from the React ecosystem.

f2 - 📱📈An elegant, interactive and flexible charting library for mobile.

  •    Javascript

F2 is born for mobile, developed for developers as well as designers. It is Html5 Canvas-based, and is also compatible with Node.js, Weex and React Native. Based on the grammar of graphics, F2 provides all the chart types you'll need. Our mobile design guidelines enable better user experience in mobile visualzation projects. Special thanks to Leland Wilkinson, the author of The Grammar Of Graphics, whose book served as the foundation for F2 and G2.

kotojs - A framework for building reusable components with d3.js

  •    Javascript

A framework for creating reusable charts with D3.js, written in ES6. KotoJS is HEAVILY inspired by another reusable charting framework maintained by the Miso Project called d3.chart. I think that project is well designed and well documented. For those who are not familiar with d3.chart, the framework provides a logical way to ensure that all data-visualization components that are authored using the framework are done in a way that facilitates re-usablily.