Data visualization with react-vis

Image for post
Image for post

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.

  • Flexible
  • Integrated with React.

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.

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.

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;
import {XYPlot, XAxis, YAxis, VerticalGridLines, LineSeries} from 'react-vis';

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;
Image for post
Image for post

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)}
});
<LineSeries data={dataArr}/>
xType="ordinal"
<LineSeries data={dataArr} style={{stroke: 'violet', strokeWidth: 3}}/>
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;
Image for post
Image for post

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.

DailyJS

JavaScript news and opinion.

Shyianovska Nataliia

Written by

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.

DailyJS

DailyJS

JavaScript news and opinion.

Shyianovska Nataliia

Written by

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.

DailyJS

DailyJS

JavaScript news and opinion.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

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