Data visualization with react-vis

Nataliia Radina
DailyJS
Published in
4 min readMar 8, 2018

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!

--

--

Nataliia Radina
DailyJS

I'm a front-end developer based in the beautiful city of Amsterdam. Here I share my journey, experiences, and insights into the world of web development