How to Create an Animated Bar Chart With React and d3
Have you ever looked at data visualizations and be wowed by all the effects and animations?
Have you ever wondered how to integrate visualizations with react?
In this article, we will talk about how to make an animating bar chart using d3 in react.
To understand how to create the bar chart, let’s understand what d3 is and how it works.
D3 is an open-source javascript library that is used to create custom interactive data visualizations. It is data-driven and generates visualizations from data that can come from arrays, objects, jsons, or data from a CSV or XML file.
It allows direct selection of elements/nodes in the DOM and attach styles and attributes to generate visualizations.
Here is an example of a d3 bar chart:
I know this is a bit long so let me break this down.
Above we set the margins for the graph and on line 28/29, you would see there is an xscale and yscale. The xscale determines our range on the x-axis and in our case, that would be the range of the years(1993, 1994, etc).
On the other hand, the yscale determines the scale depending on the height of the values.
Afterward, we select the current ref and initializes a bar this way:
we select the “g” element of the current SVG, which is the bar chart itself.
Over here, we start joining the data we get from another file. Normally, this will be data from a CSV or JSON file. Afterward, we initialize the chart.
Here is where it gets interesting. After I set the attr of width, a call to make duration and delay how fast the bars show up.
Let’s look at how the rest of the chart is setup:
Over here, we set up the bar labels first. Afterward, we determine the location of the x-axis and y-axis labels, which we attach to the element “g”. “g” is our master node for the whole barChart.
We also select x-axis-title and y-axis-title and bind its data attribute to the respective fields of year and yAxisTitle. We also dictate other attributes that come along with it, such as x, y position, transform, and its font-size.
Pretty straightforward, right? Let’s take a look at how it’s being utilized inside App.js:
Over here, we have a bar chart, where we set the width and the height as well as the y-axis title. We also give radio options for users to select between us and japan data, which maps to a different set of values from the data JSON under ‘./utils/constant’.
It’s hard to show the graph with the animation here but here is a brief overview of how it would actually look like:
That’s it! I know I talked a lot about the visualization but I will also provide the steps to set this out from scratch.
Step 1: install node on your machine and run the following command:
- curl “https://nodejs.org/dist/latest/node-${VERSION:-$(wget -qO- https://nodejs.org/dist/latest/ | sed -nE ‘s|.*>node-(.*)\.pkg</a>.*|\1|p’)}.pkg” > “$HOME/Downloads/node-latest.pkg” && sudo installer -store -pkg “$HOME/Downloads/node-latest.pkg” -target “/”
Step 2: run the following command:
- npx create-react-app economic-growth-chart
Step 3: go to app.js and replace with the following content:(already shown once in this article)
Step 4: run the following command:
- npm install -- save d3 @material-ui/core
Step 5: Creates a utils folder under the src folder and create constant.js with the following content:
Step 6: under the src folder, create a folder called components and create a class called BarChart.js(this is also mentioned in this article already):
Now go into your terminal and run npm start! Your project is all set up.
