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- Simple JavaScript charting for designers & developers
Google Charts - Google chart tools are powerful, simple to use, and free
D3 - 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 - platform for data visualization and storytelling.
.
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 I found while I was looking to show the top NBA Players ranked visually for the NBA-stats 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.
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
. 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 for the rest of the NBA hex color codes for all of your favorite NBA team color codes.
Next Steps
We will need to setState for the animation to work.
To connect please check my Github, LinkedIn or Twitter.
Thank you for reading!
Top comments (0)