In this tutorial, we will see React Data Visualization. We will use uber chart data–visualization charting-library visualization react.
React-vis is a React visualization library created by Uber. With it, you can quickly create simple charts, such as line, area, bar charts, pie and donut charts, treemaps, and many more.
Modern web application front ends are usually developed using one of the powerful UI frameworks, such as Ember, React, Vue, or Angular.
Depending on the framework you are using; you may want to ensure that the library plays well with it
React Data Visualization
First, we install the React js then we will start our example.
Step 1: Install React using create react app.
Go to your project drive and hit the following command.
npx create-react-app reactstarter
Okay, after installing, go into that directory.
cd reactstarter
Start the development server.
yarn start
Step 2: Install the React-vis library.
I am using Yarn as a package manager. If you have not installed it yet, you can quickly pull it through NPM.
yarn add react-vis
Now, the dependency is installed on our machine. Now, we can import and use it. We are using React-vis because it is:
- Simple
- Flexible
- Integrated with React.
In this post, I want to show how to build a simple line chart using react-vis.
Step 3: Create the sample data and server.
We need the fake data to work with. That is why I am using one package called json-server for this tutorial. Okay, so let us install the package using the Yarn package manager.
yarn global add json-server
Okay, now we need to create one folder inside src called data and in that folder, create one file called db.json. For testing purposes, let us add the following data in the db.json file.
{
"posts": [
{ "id": 1, "title": "json-server", "author": "typicode" }
],
"comments": [
{ "id": 1, "body": "some comment", "postId": 1 }
],
"profile": { "name": "typicode" }
}
Remember, this server is different from the React development server, which runs on PORT: 3000. The json-server only serves the data we can use to create different data visualization.
We are creating that data and a server that serves that data. So we can send an AJAX request to that server or a network request to the server, and that server returns the JSON data.
So that data is inside the db.json file. So please do not confuse it with React development server and json server.
Now, start the json server using the following command.
json-server --watch src/data/db.json --port 4000
By default, the json-server uses the 3000 port, but our create react app also uses the 3000 port, so we need to change the port of either of the application. So I have changed the port of json server.
If you switch to the browser and hit http://localhost:4000/posts, you can see that we can access the data in JSON format that is served by the json-server, and the data store is our db.json file. So it is like we are creating a fake server that returns the fake data for testing our application.
The next step is to change the data of the db.json file and add that kind of data we can use to create data visualization.
{
"results": [
{
"name": "Ruby",
"year": "2012",
"count": "18117"
},
{
"name": "Python",
"year": "2012",
"count": "100"
},
{
"name": "Python",
"year": "2014",
"count": "200"
},
{
"name": "Python",
"year": "2016",
"count": "300"
},
{
"name": "Python",
"year": "2018",
"count": "100"
},
{
"name": "JavaScript",
"year": "2012",
"count": "200"
},
{
"name": "PHP",
"year": "2012",
"count": "14460"
},
{
"name": "Java",
"year": "2012",
"count": "8006"
},
{
"name": "C++",
"year": "2012",
"count": "4879"
},
{
"name": "C",
"year": "2012",
"count": "4217"
},
{
"name": "C#",
"year": "2012",
"count": "1866"
},
{
"name": "Scala",
"year": "2012",
"count": "1848"
},
{
"name": "Objective-C",
"year": "2012",
"count": "1674"
},
{
"name": "Shell",
"year": "2012",
"count": "1284"
},
{
"name": "HTML",
"year": "2012",
"count": "1272"
},
{
"name": "Perl",
"year": "2012",
"count": "967"
},
{
"name": "CoffeeScript",
"year": "2012",
"count": "793"
},
{
"name": "Haskell",
"year": "2012",
"count": "723"
},
{
"name": "Erlang",
"year": "2012",
"count": "644"
},
{
"name": "CSS",
"year": "2012",
"count": "622"
},
{
"name": "Emacs Lisp",
"year": "2012",
"count": "495"
},
{
"name": "Clojure",
"year": "2012",
"count": "430"
},
{
"name": "Lua",
"year": "2012",
"count": "344"
},
{
"name": "Go",
"year": "2012",
"count": "324"
},
{
"name": "Groovy",
"year": "2012",
"count": "210"
},
{
"name": "Puppet",
"year": "2012",
"count": "189"
},
{
"name": "VimL",
"year": "2012",
"count": "185"
}]
}
So, we are counting the NPM installs based on the years. This is fake data and has nothing to do with real data. This is an example of how we can visualize the data using React js.
Step 4: Send a network request to the json-server.
Our final App.js component looks like the one below.
// App.js
import React, {Component} from 'react';
import './App.css';
import Chart from './Chart';
const API_URL = "http://localhost:4000/results";
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(results => this.setState({
results: results.filter((r)=>{
return r.name === 'Python';
})
})
)}
render() {
const {results} = this.state;
return (
<div className="App" style={{ marginLeft: 70 }}>
<Chart data={results}/>
</div>
);
}
}
export default App;
We have used the Fetch library to send a network request. We can also use the Axios library for that. Both are promise-based libraries.
Next, we need to filter the data because we are displaying only the Python installs. So we have used a little bit of functional programming here.
Pass that filtered data to the Chart component as props. The chart component is a stateless component which is why it is a functional component. Its only work is whatever the data, it gets rendered as a Chart and nothing more.
Step 5: Display the visualized data.
Create one file called Chart.js inside the src folder. Add the following code to it.
// Chart.js
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,
y: d.count}
});
return (
<XYPlot
xType="ordinal"
width={1000}
height={500}>
<VerticalGridLines />
<HorizontalGridLines />
<XAxis title="Period of time(year)" />
<YAxis title="No. of counts" />
<LineSeries
data={dataArr}
style={{stroke: 'violet', strokeWidth: 3}}/>
</XYPlot>
);
}
export default Chart;
So Chart.js component receives the data from the parent component App.js and displays the data as a chart.
Save the file and if everything works fine, then go to http://localhost:3000/.
Finally, React Data Visualization Tutorial is over. I have put this code on Github.
You have to import this StyleCSS file to solve this black background:
import “react-vis/dist/style.css”;
OR