DailyJS
Published in

DailyJS

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!

--

--

--

JavaScript news and opinion.

Recommended from Medium

How to make HTTP requests by using the Axios library in React Native Apps.

9 Ideas For Angular That Are Often Overlooked by Developers

New release: Auto convert leads in Salesforce

Solving N-queens with Bitwise Operators

Improve your command-line Go application with Promptui

Firebase blog application with react native

https://youtu.be/9RROs1qW9ro

It can work (easily!): Serverless React and web crawlers

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Shyianovska Nataliia

Shyianovska Nataliia

Front end developer based in Amsterdam. Here I write about my life as a web-developer, advise on how to get programming skills and share all kind of ideas.

More from Medium

Understanding the MutationObserver API

Adding Search to a Jamstack Site

Increase the security and simplicity of your Information System with OpenID Connect

Focus on the item-stock API of your Information SystemFocus on the item-stock API of your Information System

Fixing vulnerabilities found in a dependency tree