Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://uber.github.io/react-vis/
Data Visualization Components
https://uber.github.io/react-vis/
chart charting-library data-visualization react uber visualization
Last synced: about 1 month ago
JSON representation
Data Visualization Components
- Host: GitHub
- URL: https://uber.github.io/react-vis/
- Owner: uber
- License: mit
- Created: 2016-02-22T20:45:50.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2024-09-09T20:24:13.000Z (4 months ago)
- Last Synced: 2024-11-11T03:03:12.514Z (about 2 months ago)
- Topics: chart, charting-library, data-visualization, react, uber, visualization
- Language: JavaScript
- Homepage: https://uber.github.io/react-vis
- Size: 89.3 MB
- Stars: 8,734
- Watchers: 2,144
- Forks: 835
- Open Issues: 342
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
- Roadmap: ROADMAP.md
Awesome Lists containing this project
- react-frontend-toolkit - React-Vis
- react-frontend-toolkit - React-Vis
README
react-vis | Demos | Docs
A COMPOSABLE VISUALIZATION SYSTEM
> **_NOTE:_** This repository is now under new management. Please reach out to the new administrators if you have any questions.
## Overview
A collection of react components to render common data visualization charts, such as **line/area/bar charts**, **heat maps**, **scatterplots**, **contour plots**, **hexagon heatmaps**, **pie and donut charts**, **sunbursts**, **radar charts**, **parallel coordinates**, and **tree maps**.
Some notable features:
- Simplicity. `react-vis` doesn't require any deep knowledge of data visualization libraries to start building your first visualizations.
- Flexibility. `react-vis` provides a set of basic building blocks for different charts. For instance, separate X and Y axis components. This provides a high level of control of chart layout for applications that need it.
- Ease of use. The library provides a set of defaults which can be overridden by the custom user's settings.
- Integration with React. `react-vis` supports the React's lifecycle and doesn't create unnecessary nodes.
## Usage
Install react-vis via npm.
npm install react-vis --save
Include the built main CSS file in your HTML page or via SASS:
```scss
@import "~react-vis/dist/style";
```
You can also select only the styles you want to use. This helps minimize the size of the outputted CSS. Here's an example of importing only the legends styles:
```scss
@import "~react-vis/dist/styles/legends";
```
Import the necessary components from the library...
```jsx
import {XYPlot, XAxis, YAxis, HorizontalGridLines, LineSeries} from 'react-vis';
```
… and add the following code to your `render` function:
```jsx
```
If you're working in a non-node environment, you can also directly include the bundle and compiled style using basic html tags.
```html
```
The global `reactVis` object will now be available for you to play around.
You can checkout these example CodePens:
[#1](https://codepen.io/Apercu/pen/mmLOpY?editors=0010),
[#2](https://codepen.io/jckr/pen/oWZPJe?editors=0010),
[#3](https://codepen.io/jckr/pen/BRpReQ?editors=0010) or
[#4](https://codepen.io/jckr/pen/aWmRGx?editors=0010)
## More information
Take a look at the [folder with examples](docs/examples) or check out some docs:
- Common concepts:
* [Scales and Data](docs/scales-and-data.md) about how the attributes can be adjusted.
* [Animations](docs/animation.md) about how to tweak animations in the library.
- Components:
* [XYPlot](docs/xy-plot.md) about orthogonal charts.
* [RadialChart](docs/radial-chart.md) about radial charts.
* [Treemap](docs/treemap.md) about making tree maps.
* [Sankey](docs/sankey.md) about making sankey diagrams.
* [Radar Chart](docs/radar-chart.md) about making radar charts.
* [Parallel Coordinates](docs/parallel-coordinates.md) about making parallel coordinate charts.
* [Sunbursts](docs/sunburst.md) about making sunburst diagrams.
* [Legends](docs/legends.md) about the legends.
## Development
Make sure you are using the correct version of `node` and `yarn`. To do so, check `package.json` and find the entry "volta", e.g.
```
"volta": {
"node": "14.18.0",
"yarn": "1.22.4"
}
```
It's recommanded to install [volta](https://volta.sh/) to manage node and yarn.
To develop on react-vis, navigate to `packages/react-vis`, and install the dependencies and then build and watch the static files:
yarn && yarn start
Once complete, you can view the component's example in your browser (will open automatically).
Any changes you make to the example code will run the compiler to build the files again.
To run the tests, and create code coverage reports:
yarn cover
## Requirements
react-vis makes use of ES6 array methods such as [`Array.prototype.find`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/find). If you make use of react-vis, in an environment without these methods, you'll see errors like `TypeError: Server rendering error: Object x,y,radius,angle,color,fill,stroke,opacity,size has no method 'find'`. You can use [`babel-polyfill`](https://babeljs.io/docs/usage/polyfill/) to polyfill these methods.