Data Visualization with React & ECharts
With the innovation of technologies in the field of Data Engineering, the term Data visualization has significant importance as it is an one of the essential components of Industry 4.0 and 5.0.
Data visualization is about representing data or information in a graph, chart, or other visual format which helps to communicate relationships of complex data with images. The main goals are:
- quick understanding of the information
- identify emerging trends/clusters and act quickly based on what we see
- identify relationships and patterns within digital assets
- can share our story (results) with others
- analysis at various levels of detail
This article helps you to plot & understand some basic visualization of the dummy data with React and ECharts.
React is an open-source JavaScript library, maintained by Facebook for building user interfaces or UI components.
ECharts is a powerful library of JavaScript for visualization, based on zrender offering an easy way of adding intuitive, interactive, and highly customizable charts.
Pre-requisites
Before starting, make sure you have installed the node.js, otherwise you can installed from official site of Node.js
Setting up
Lets create the React project by using the npm package. Open the command prompt/terminal and run the following command:
npx create-react-app visualizationOnce your command executed successfully then test if the web server is running fine :
- for this first, change directory to project folder
cd visualization- and run
npm startThe following page will be shown on the browser, which means you web development server working fine.
Now next we need to install and add ECharts in the project by execute the following commands:
npm install — save echarts-for-reactnpm install — save echarts
Line Chart
Open the App.js file in src folder and replace the default code with the below code:
Again run the `npm start` command then it will show the below line graph on browser.
Pie Chart
For pie chart, you can again change the App.js code with the below code:
Reload the browser and you will get the pie chart on browser.
Polar Chart
Similar to line and pie chart plotting, you can create the polar chart as well.
Finishing Up
ECharts provide a vast variety of visualization type. Similar to Line, Pie and Polar chart you may find different type of plots in EChart offical site and check the examples. You just need to select the visualization type, copy the JSON and put it in App.js file.
You can find the above project in GitHub repository .
