Data visualization with react-vis

What is react-vis?

React-vis is a React visualization library created by Uber. With it you can easily create common charts, such as line, area, bar charts, pie and donut charts, tree maps and many more.

React-vis is a good option because it is:

• Simple
• Flexible
• Integrated with React.

In this article I want to show how to build a simple line chart using react-vis.

Installation

First of all you need to install react-vis on your project. For demo purpose I used an empty project created with create-react-app.

Installing react-vis is as easy as npm install react-vis –save

Examples

Of course it is supposed that you have some data you want to visualize. For my example I will use dataset from Github Language Statistics with amounts of pull-requests per programming language.

Nothing new here, I fetch data in componentDidMount, than set state of my app and pass it as a props to the child component. As I am interested in JavaScript statistics, I also filter results.

import React, {Component} from ‘react’;import ‘./App.css’;import Chart from ‘./components/chart’const API_URL = “https://nataliia-radina.github.io/react-vis-example/”;class App extends Component { constructor(props) { super(props) this.state = { results: , }; } componentDidMount() { fetch(API_URL) .then(response => { if (response.ok) { return response.json() } else { throw new Error (‘something went wrong’) } }) .then(response => this.setState({ results: response.results.filter((r)=>{ return r.name === ‘JavaScript’; }) }) )} render() { const {results} = this.state; return ( <div className=”App”> <Chart data={results}/> </div> ); }}export default App;

Now let?s move further to our Chart component.

Chart component is a functional component because it has no state. On my chart I want to display the number of pull-requests at the specific period of time. That is why I will go for a simple LineSeries diagram.

To be able to use it I import the necessary components from the library

import {XYPlot, XAxis, YAxis, VerticalGridLines, LineSeries} from ‘react-vis’;

XYPlot is a wrapper for the rest of elements. Axes are there to show X and Y axis. VerticalGridLines to create a grid and LineSeries is a type of chart itself.

Simple use-case

Now let?s create chart component with some random data first, just to get an idea how it works:

import React from ‘react’;import {XYPlot, XAxis, YAxis, VerticalGridLines, HorizontalGridLines, LineSeries} from ‘react-vis’;const Chart = (props) => { return ( <XYPlot width={300} height={300}> <VerticalGridLines /> <HorizontalGridLines /> <XAxis /> <YAxis /> <LineSeries data={[ {x: 1, y: 4}, {x: 5, y: 2}, {x: 15, y: 6} ]}/> </XYPlot> );}export default Chart;

As you can see I pass an array of objects containing x and y values I want to show on the diagram to LineSeries component.

And here comes some magic! My chart component at this point looks like this :

Applying real data

Now let?s pass actual data to our component. I want to show the amount of pull-requests for a specific period of time. It is ?count?, and both ?year? and ?quarter? from my dataset. So I will create an array with x and y values from this data:

const dataArr = props.data.map((d)=> { return {x: d.year + ‘/’ + d.quarter, y: parseFloat(d.count/1000)}});

Let?s see what happens when I pass my array to LineSeries component

<LineSeries data={dataArr}/>

Because on the x axis I want to show quarters, I need to specify the type of the axes as following:

xType=”ordinal”

Not bad, but I still want to modify the look of my chart a little bit. So I will add some styles as well:

<LineSeries data={dataArr} style={{stroke: ‘violet’, strokeWidth: 3}}/>

Here is the full code for chart component:

import React from ‘react’;import {XYPlot, XAxis, YAxis, VerticalGridLines, HorizontalGridLines, LineSeries} from ‘react-vis’;const Chart = (props) => { const dataArr = props.data.map((d)=> { return {x: d.year + ‘/’ + d.quarter, y: parseFloat(d.count/1000)} }); return ( <XYPlot xType=”ordinal” width={1000} height={500}> <VerticalGridLines /> <HorizontalGridLines /> <XAxis title=”Period of time(year and quarter)” /> <YAxis title=”Number of pull requests (thousands)” /> <LineSeries data={dataArr} style={{stroke: ‘violet’, strokeWidth: 3}}/> </XYPlot> );}export default Chart;

And here we go:

Conclusion

I hope that you are convinced now that react-vis is easy to use powerful tool. It is a good choice for presenting any type of data.

For further information and experiments check react-vis documentation and examples.

Enjoy your data visualization!