1 | <p align="right">
|
2 | <a href="https://npmjs.org/package/react-vis">
|
3 | <img src="https://img.shields.io/npm/v/react-vis.svg?style=flat-square" alt="version" />
|
4 | </a>
|
5 | <a href="https://travis-ci.org/uber/react-vis">
|
6 | <img src="https://img.shields.io/travis/uber/react-vis/master.svg?style=flat-square" alt="build" />
|
7 | </a>
|
8 | <a href="https://coveralls.io/github/uber/react-vis">
|
9 | <img src="https://img.shields.io/coveralls/uber/react-vis.svg?style=flat-square" alt="build" />
|
10 | </a>
|
11 | <a href="https://npmjs.org/package/react-vis">
|
12 | <img src="https://img.shields.io/npm/dm/react-vis.svg?style=flat-square" alt="downloads" />
|
13 | </a>
|
14 | <a href="http://starveller.sigsev.io/uber/react-vis">
|
15 | <img src="http://starveller.sigsev.io/api/repos/uber/react-vis/badge" alt="stars" />
|
16 | </a>
|
17 | </p>
|
18 |
|
19 | <h1 align="center">react-vis | <a href="http://uber.github.io/react-vis/examples/showcases/axes">Demos</a> | <a href="http://uber.github.io/react-vis/documentation/getting-started/creating-a-new-react-vis-project">Docs</a></h1>
|
20 |
|
21 | <h5 align="center">A COMPOSABLE VISUALIZATION SYSTEM</h5>
|
22 |
|
23 | ![demo](docs/assets/react-vis.gif?raw=true)
|
24 |
|
25 | ## Overview
|
26 |
|
27 | 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**.
|
28 |
|
29 | Some notable features:
|
30 |
|
31 | - Simplicity. `react-vis` doesn't require any deep knowledge of data visualization libraries to start building your first visualizations.
|
32 | - 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.
|
33 | - Ease of use. The library provides a set of defaults which can be overridden by the custom user's settings.
|
34 | - Integration with React. `react-vis` supports the React's lifecycle and doesn't create unnecessary nodes.
|
35 |
|
36 | ## Usage
|
37 |
|
38 | Install react-vis via npm.
|
39 |
|
40 | npm install react-vis --save
|
41 |
|
42 | Include the built main CSS file in your HTML page or via SASS:
|
43 | ```sass
|
44 | @import "./node_modules/react-vis/dist/style";
|
45 | ```
|
46 |
|
47 | 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:
|
48 | ```sass
|
49 | @import "./node_modules/react-vis/dist/styles/legends";
|
50 | ```
|
51 |
|
52 | Import the necessary components from the library...
|
53 |
|
54 | ```jsx
|
55 | import {XYPlot, XAxis, YAxis, HorizontalGridLines, LineSeries} from 'react-vis';
|
56 | ```
|
57 |
|
58 | … and add the following code to your `render` function:
|
59 |
|
60 | ```jsx
|
61 | <XYPlot
|
62 | width={300}
|
63 | height={300}>
|
64 | <HorizontalGridLines />
|
65 | <LineSeries
|
66 | data={[
|
67 | {x: 1, y: 10},
|
68 | {x: 2, y: 5},
|
69 | {x: 3, y: 15}
|
70 | ]}/>
|
71 | <XAxis />
|
72 | <YAxis />
|
73 | </XYPlot>
|
74 | ```
|
75 |
|
76 | If you're working in a non-node environment, you can also directly include the bundle and compiled style using basic html tags.
|
77 |
|
78 | ```html
|
79 | <link rel="stylesheet" href="https://unpkg.com/react-vis/dist/style.css">
|
80 | <script type="text/javascript" src="https://unpkg.com/react-vis/dist/dist.min.js"></script>
|
81 | ```
|
82 |
|
83 | The global `reactVis` object will now be available for you to play around.
|
84 |
|
85 | You can checkout these example CodePens:
|
86 | [#1](https://codepen.io/Apercu/pen/mmLOpY?editors=0010),
|
87 | [#2](https://codepen.io/jckr/pen/oWZPJe?editors=0010),
|
88 | [#3](https://codepen.io/jckr/pen/BRpReQ?editors=0010) or
|
89 | [#4](https://codepen.io/jckr/pen/aWmRGx?editors=0010)
|
90 |
|
91 | ## More information
|
92 |
|
93 | Take a look at the [folder with examples](showcase/examples/) or check out some docs:
|
94 |
|
95 | - Common concepts:
|
96 | * [Scales and Data](docs/scales-and-data.md) about how the attributes can be adjusted.
|
97 | * [Animations](docs/animation.md) about how to tweak animations in the library.
|
98 | - Components:
|
99 | * [XYPlot](docs/xy-plot.md) about orthogonal charts.
|
100 | * [RadialChart](docs/radial-chart.md) about radial charts.
|
101 | * [Treemap](docs/treemap.md) about making tree maps.
|
102 | * [Sankey](docs/sankey.md) about making sankey diagrams.
|
103 | * [Radar Chart](docs/radar-chart.md) about making radar charts.
|
104 | * [Parallel Coordinates](docs/parallel-coordinates.md) about making parallel coordinate charts.
|
105 | * [Sunbursts](docs/sunburst.md) about making sunburst diagrams.
|
106 | * [Legends](docs/legends.md) about the legends.
|
107 |
|
108 | ## Development
|
109 |
|
110 | To develop on this component, install the dependencies and then build and watch the static files:
|
111 |
|
112 | npm install && npm run start
|
113 |
|
114 | Once complete, you can view the component's example in your browser (will open automatically).
|
115 | Any changes you make to the example code will run the compiler to build the files again.
|
116 |
|
117 | To lint your code, run the tests, and create code coverage reports:
|
118 |
|
119 | npm run full-test
|
120 |
|
121 | ## Requirements
|
122 |
|
123 | 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.
|