AppDividend
Latest Code Tutorials

React Data Visualization Tutorial

Data Visualization with React js

459

Get real time updates directly on you device, subscribe now.

In this tutorial, we will see React Data Visualization. We will use uber chart datavisualization charting-library visualization react. React-vis is a React visualization library created by Uber. With it, you can quickly create simple charts, such as lineareabar chartspie and donut chartstreemaps and many more.  Modern web application front ends are usually developed using one of the significant UI frameworks, such as Ember, React, Vue, or Angular. Depends on the framework you are using; you may want to ensure that the library plays well with it. Most of the charting libraries are framework agnostic. We use React-vis library for creating a React Data Visualization. So let us get started.

React Data Visualization Tutorial

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 React-vis library.

I am using Yarn as a package manager. If you have not installed yet, then you can quickly pull it through NPM.

yarn add react-vis

 

React D3 Tutorial

Now, the dependency is installed on our machine. Now, we can import it and use it. We are using React-vis because it is:

  1. Simple
  2. Flexible
  3. 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 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 the testing purpose, 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 React development server, which is running on PORT: 3000. The json-server is only served the data that we can use to create different data visualization. We are creating that data and also creates a server that serves that data. So we can send an AJAX request to that server or send a network request to the server, and that server returns the JSON data. So that data is inside the db.json file. Please do not confuse 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 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.

json server tutorial example

 

If you switch to the browser and hit the http://localhost:4000/posts, you can see that we can access the data in JSON format that served by json-server and data store is our db.json file. So it is like we are creating a fake server that returns the fake data for the testing of our application. 

Next step is to change the data of the db.json file and add that kind of data that 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 nothing to do with real data. This is just an example of how we can visualize the data using React js.

Step 4: Send a network request to json-server.

Related Posts
1 of 10

Our final App.js component looks like 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 Axios library for that. Both are a promise based library.  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. Chart component is a stateless component that is why it is a functional component. Its only work is whatever the data, it gets render that as a Chart and nothing more.

Step 5: Display the visualized data.

Create one file called Chart.js inside 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 display the data as a chart.

Save the file and if everything works fine then go to the http://localhost:3000/

 

D3 data visualization using React js

Finally, React Data Visualization Tutorial is over. I have put this code on Github.

Fork Me On Github

Leave A Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.