React Tutorial- How To Create And Add Word Tree Chart In React Js App

How To Create And Add Word Tree Chart In React Js App

React Word Tree Chart Tutorial

In this tutorial, we will get to know how to show multiple and parallel sequences of words through the Word Trees Chart. We will see in this guide how to build a Word Trees Chart in a React App.

We will be using the React Google Charts package for embedding the words tress chart in React.

 

A word tree shows multiple parallel sequences of words. It is used to display those words which most often follow or herald a target word (e.g, “Cats are …….”) or to show a hierarchy of terms (e.g, a decision tree).

React Js- Google Word Tree Chart Integration Example

Step 1- Download New React App

Step 2- Add Google Charts Package

Step 3- Create Word Tree Component

Step 4- Update App Js

Step 5- Run React APp

 

Let’s learn in detail now:

Step 1- Install New react App

The first step of the tutorial is to install or download a new React app. We have to implement the given command for doing so:

npx create-react-app tree-demo

Then, we will jump into the app folder:

cd tree-demo

Now, remember that this step is completely optional. If you want to follow, then go for the below command:

npm install bootstrap

Afterward, we need to get into the App.js file and import the bootstrap CSS:

import '../node_modules/bootstrap/dist/css/bootstrap.min.css';

 

Step 2- Add Google Charts Package

By executing the following command, we will install the React Google Chart library:

# npm
npm install react-google-charts

# yarn
yarn add react-google-charts

 

Step 3- Create Word Tree Component

Here, in this step, we will create the ‘components’ folder and then we create the WordTree.js file in it.

So, the below code will be inserted into the components/WordTree.js:

import React, { Component } from 'react'
import Chart from 'react-google-charts'

const WordTreeData = [
  ['Phrases'],
  ['cats are better than dogs'],
  ['cats eat kibble'],
  ['cats are better than hamsters'],
  ['cats are awesome'],
  ['cats are people too'],
  ['cats eat mice'],
  ['cats meowing'],
  ['cats in the cradle'],
  ['cats eat mice'],
  ['cats in the cradle lyrics'],
  ['cats eat kibble'],
  ['cats for adoption'],
  ['cats are family'],
  ['cats eat mice'],
  ['cats are better than kittens'],
  ['cats are evil'],
  ['cats are weird'],
  ['cats eat mice'],
]

const WordTreeOptions = {
  wordtree: {
    format: 'implicit',
    word: 'cats',
  },
}

class WordTreeChart extends Component {
  render() {
    return (
      <div>
        <h2>React Word Tree Chart Example</h2>
        <Chart
          width={'500px'}
          height={'300px'}
          chartType="WordTree"
          loader={<div>Loading Chart</div>}
          data={WordTreeData}
          options={WordTreeOptions}
          rootProps={{ 'data-testid': '1' }}
        />
      </div>
    )
  }
}

export default WordTreeChart

 

Step 4- Update App Js

We will add the word tree component into the App.js file:

import React from 'react'
import '../node_modules/bootstrap/dist/css/bootstrap.min.css'
import WordTree from './components/WordTree'

function App() {
  return (
    <div className="container mt-5">
      <WordTree />
    </div>
  )
}

export default App

 

Step 5- Run React App

Now, we reach the last step of this guide in which we have to run the React app using the given command:

npm start

 

Conclusion

So, friends, we have come to understand that a word tree is a visualization that hierarchically arranges text data.

This tutorial has made us learn how to create a word tree chart and display the hierarchical arrangement of text data in React app using the Google Chart library.

 

Thanks