Charts With Modern React and D3
In this article, see how you can create a basic chart using the power of D3JS and ReactJS.
Join the DZone community and get the full member experience.Join For Free
In this article, I will showcase how you can create a basic chart using the power of D3JS and ReactJS. Later in other articles, I will show you how to fully customize the chart and add more information and interactions. Here I will keep everything simple. Consider this a starting point into the world of data reporting and visualization.
Before we visualize data, we need to pass it to our application. In a real-life application, this is most likely done via an API call to a server that provides the data to the application (usually in JSON or XML format).
In our application, even though we have the data on my local computer, I will serve it using a Node JS http server, to simulate a real API call. Http server is a quick way to set up a server to serve static files. All I have to do is to create a folder (let’s name it covid-data), store the data file (Let’s name it covid-data.csv), and then run the following command:
Note: --cors allows us to make requests from our (React) application to our server (http-server) on the same computer. If you remove that flag, all requests will be rejected due to the CORS policy.
Now that we have our server running and ready to serve our data, let’s start creating our front-end app with React and D3.
The best way to create a React application is using Create React App:
This command takes a few minutes to finish. It will create a new directory, named react-d3, and create a basic React application inside it. After it’s done, change directory and start the application:
Now the new React app is ready and serving on port 3000. Just start your browser and make sure that it is running by visiting the following link:
You should see the React welcome page.
We now have all we need to start the project.
Let’s start with changing the React’s welcome page. Open src/App.js, remove everything and replace it with:
Within the return method, we added a div with the id of “chart-component”. We are going to add our chart here using D3.
We also used a hook called “useEffect”, which is basically the equivalent of “componentDidMount” and “componentDidUpdate” in class components. In this hook we are running our “draw” function, which is a function that runs all the d3 commands that we need to draw our charts. We could also fetch the data from our API here as well, but we decided to do it within our draw function using D3 instead.
So far React created the infrastructure we need to start creating our chart. Now let’s see how we can fetch our data and draw our chart using D3.
Create a file in src folder and name it “draw.js”, and put the following code in it:
I’ll go over each line and explain what they do.
Line 1 imports all d3 methods.
In line 3, we define a draw function, which we used in App.js file. Later in line 67 we will export this function so that we can use it in App.js file.
In line 5 to 12, we define all the constants that we’ll use to for the looks and functionality of our chart.
In line from 14 to 18, we select the div with the id of “chart-component” (which we created in our “App.js” file), append a SVG element to it, and set its width, height, and background color.
In line 20 to 25, we add a title to the SVG, and place it in the right position.
In line 27-29, we fetch the data by an API call, using d3.csv method. We then filter, sort, and restructure it, and then log it to console, so that we can see the data and make sure that it looks the way we expect it to. Later we will likely remove line 29 before we put this into production (even if we don’t, React will automatically remove all console.logs when we build the production version of the application).
In line 31-34, we use the d3’s incredibly useful scale method (scaleBand in this case), to define our X scale so that we can convert our data points into real points at the correct position on the chart.
Subsequently, in line 36-37, we define an axis, and in line 39-41, we will attach the axis to our SVG. We do the exact same thing in line 43-52 for the Y axis.
Lastly, in line 54-63, we select all the bars (rectangles) on the SVG (which is an empty set so far), attach our data to it, and for each of those data points, we append a new bar to the SVG. Then we adjust the x, y, width, height, and the fill color of each bar.
And that is it. This is a very simple chart created with D3 and React. It is lacking a lot of features and interactions, but we can add those later. The purpose of this article was to show you how easy it is to create simple charts using D3 and modern React.
Opinions expressed by DZone contributors are their own.