Visualize with React Chart Race
Tags: javascript, react, tutorial, webdev
Published: 2021-03-22 00:48:17

Using a Chart Library that consolidates and presents data visually might help people to understand a large amount of information and make better business decisions. Using the right type of chart is the decision to make when you want to present data. Those are some charts I have used:

[Chartjs](https://www.chartjs.org/)- Simple JavaScript charting for designers & developers
[Google Charts](https://developers.google.com/chart) - Google chart tools are powerful, simple to use, and free
[D3](https://d3js.org/) - JavaScript library for manipulating docs based on data

The **animated bar chart race** is one of my favorite visualizations and it helps you for example to visualize the change in trends over time. This type of animation has been around for a while it's very popular on social media as they provide a holistic data story/insight in an easy-to-understand chart. 

A bar chart race contains an animated order of bars that display the value of data at a different moment in time. You can make your own bar chart race without coding with [Flourish](hhttps://app.flourish.studio/@flourish/bar-chart-race) - platform for data visualization and storytelling. 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/34pew4odzc2g3zezjpju.png).
You will need to Create Flourish Account, Open up the Bar Chart Race Template, and format the data to be imported to Flourish, you can Download the formatted data and Import directly following the structure in the file. 

Sometimes, in the software we build, we find that we have to deal with data sets that cannot be viewed clearly unless we visualize it. Depends on the data set after knowing what you are looking for, you will need to surf for the dataset that can be used using different sources such as web scraping or for example use Python that can allow us to scrape websites effectively.

I was looking for NBA Season Leaders - ESPN Rating
data sets, and for this project I came across a bar chart race visualization library called `React Chart Race`.

## React Chart Race
I really like this animated bar chart race [React Chart Race](https://www.npmjs.com/package/react-chart-race) I found while I was looking to show the top NBA Players ranked visually for the [NBA-stats](https://nba-stats-seven.vercel.app/) project I was building.

The animated bar chart race helps you visualize your changing data and it's quite easy to understand. A rising or decreasing bar moves up or down along with the animation.
![here](https://raw.githubusercontent.com/ugurdalkiran/react-chart-race/master/demo.gif)

## Installation
`npm install --save react-chart-race`

## Import
`import ChartRace from 'react-chart-race';`

## Simple Usage
An element must consist of 4 variables: id, title, value, color, I wanted to have those bars set to `color` that is the exact `NBA hex color code` of the Player's Team [NBA Team Color Codes](https://teamcolorcodes.com/nba-team-color-codes/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/avyte4ehwwex1q1eoj45.png). I manually set `values` from 2020-2021 NBA Season Leaders - ESPN Rating in order to have Players ranked, I choose the top 6 Players, but it depends on you to chose and add or remove it.

To learn more follow this [link](https://teamcolorcodes.com/milwaukee-bucks-color-codes/) for the rest of the NBA `hex color codes` for all of your favorite NBA team color codes.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n5rbpuu15ok7rnb5p7r8.png)

### Next Steps

We will need to `setState` for the animation to work.

To connect please check my [Github](https://github.com/ivanadokic), [LinkedIn](https://www.linkedin.com/in/ivana-dokic/) or [Twitter](https://twitter.com/LloydPile). 

Thank you for reading!