Description
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, 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.
react-vis alternatives and similar libraries
Based on the "Data Visualization" category.
Alternatively, view react-vis alternatives based on common mentions on social networks and blogs.
-
d3
Bring data to life with SVG, Canvas and HTML. :bar_chart::chart_with_upwards_trend::tada: -
echarts
Apache ECharts is a powerful, interactive charting and data visualization library for browser -
fabric.js
Javascript Canvas Library, SVG-to-Canvas (& canvas-to-SVG) Parser -
BabylonJS
Babylon.js is a powerful, beautiful, simple, and open game and rendering engine packed into a friendly JavaScript framework. -
p5.js
p5.js is a client-side JS platform that empowers artists, designers, students, and anyone to learn to code and express themselves creatively on the web. It is based on the core principles of Processing. http://twitter.com/p5xjs β -
#<Sawyer::Resource:0x00007f1b609038f0>
Open-source JavaScript charting library behind Plotly and Dash -
Highcharts JS
Highcharts JS, the JavaScript charting framework -
paper.js
The Swiss Army Knife of Vector Graphics Scripting β Scriptographer ported to JavaScript and the browser, using HTML5 Canvas. Created by @lehni & @puckey -
Frappe Charts
Simple, responsive, modern SVG Charts with zero dependencies -
sigma.js
A JavaScript library aimed at visualizing graphs of thousands of nodes and edges -
GoJS, a JavaScript Library for HTML Diagrams
JavaScript diagramming library for interactive flowcharts, org charts, design tools, planning tools, visual languages. -
Cytoscape.js
Graph theory (network) library for visualisation and analysis -
dc.js
Multi-Dimensional charting built to work natively with crossfilter rendered with d3.js -
mxGraph
Diagramming library that enables interactive graph and charting applications to be quickly created that run natively in any major browser that is supported by its vendor. -
metrics-graphics
A library optimized for concise and principled data graphics and layouts. -
heatmap.js
π₯ JavaScript Library for HTML5 canvas based heatmaps -
rickshaw
JavaScript toolkit for creating interactive real-time graphs -
cubism
Cubism.js: A JavaScript library for time series visualization. -
jointjs
A proven SVG-based JavaScript diagramming library powering exceptional UIs -
processing.js
Processing.js makes your data visualizations work using web standards and without any plug-ins -
react-simple-maps
Beautiful React SVG maps with d3-geo and topojson using a declarative api. -
d3plus
A javascript library that extends D3.js to enable fast and beautiful visualizations. -
jquery.sparkline
A plugin for the jQuery javascript library to generate small sparkline charts directly in the browser -
Chartkick.js
Create beautiful charts with one line of JavaScript
Appwrite - The Open Source Firebase alternative introduces iOS support
* Code Quality Rankings and insights are calculated and provided by Lumnify.
They vary from L1 to L5 with "L5" being the highest.
Do you think we are missing an alternative of react-vis or a related project?
README
ββ This library is deprecated. Please see DEPRECATED.md
. ββ
react-vis | Demos | Docs
A COMPOSABLE VISUALIZATION SYSTEM
[demo](docs/assets/react-vis.gif?raw=true)
ββ This library is deprecated. Please see DEPRECATED.md
. ββ
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:
@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:
@import "~react-vis/dist/styles/legends";
Import the necessary components from the library...
import {XYPlot, XAxis, YAxis, HorizontalGridLines, LineSeries} from 'react-vis';
… and add the following code to your render
function:
<XYPlot
width={300}
height={300}>
<HorizontalGridLines />
<LineSeries
data={[
{x: 1, y: 10},
{x: 2, y: 5},
{x: 3, y: 15}
]}/>
<XAxis />
<YAxis />
</XYPlot>
If you're working in a non-node environment, you can also directly include the bundle and compiled style using basic html tags.
<link rel="stylesheet" href="https://unpkg.com/react-vis/dist/style.css">
<script type="text/javascript" src="https://unpkg.com/react-vis/dist/dist.min.js"></script>
The global reactVis
object will now be available for you to play around.
You can checkout these example CodePens: #1, #2, #3 or #4
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
To develop on this component, install the dependencies and then build and watch the static files:
npm install && npm run 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 lint your code, run the tests, and create code coverage reports:
npm run full-test
Requirements
react-vis makes use of ES6 array methods such as Array.prototype.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
to polyfill these methods.