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:
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.
npm install --save react-chart-race
import ChartRace from 'react-chart-race';
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.
We will need to
setState for the animation to work.
Thank you for reading!