Creating a Force Graph using React and D3

Published in

Level Up Coding

3 min readApr 30, 2020

I was involved in an interesting project that includes building various graph visualizations. The app we built used React as the view engine and D3 library for data visualization. In this post, I’ll show you how to create a force graph using D3 for visualizing connections in your data.

Creating The Example App

We’ll start by creating a new React app using create-react-app bootstraper. If you have Node.js installed on your machine, just run the following command:

npx create-react-app react-d3-force

This command will generate a new React project. After the project was created, get into the app folder and add D3 and Font Awesome libraries to it by using the following command:

npm i d3 @fortawesome/fontawesome-free

Now that all the libraries we need are in the project, it’s time to move forward and create the project structure:

A few things to notice here:

Under the components folder, we have two components: forceGraph and forceGraphGenerator. The ForceGraph component will be the container for the generated force graph and ForceGraphGenerator will generate the graph using D3.
Under the data folder, we will find a JSON file with the graph data. Of course this data should be retrieved from the server, but for simplicity of the example, I use it inside the project.

Building the Force Graph Container

The force graph container will contain the graph and will be responsible to things like data manipulation or business logic functionality. For simplicity in the project, we are creating it with a reference to the div which will wrap the generate graph and nothing more.

Here is the code for the ForceGraph component container:

The only interesting thing that happens here is the usage of a React ref to reference the container element. Another thing is the destroy function that we will get from the runForceGraph, which will handle the clean up if the component is removed from the DOM.

Building the Force Graph Generator

The force graph generator will be a function that will be responsible to generate the graph. Here is the declaration of the function which gets the containing div, the data for links and nodes and a function to generate a node tooltip:

Now let’s implement it.

The first lines of code will be to copy the data and to get the container’s width and height:

Then, we’ll add a few helper functions:

The 3 functions will retrieve the color, icon, and CSS class for a given node. The last function will add the option to drag the force graph nodes as part of its simulation.

After the previous part we will generate the code that will handle the node tooltip generation:

The addTooltip and removeTooltip are helper functions to show/hide the tooltip with it’s relevant content.

Now that we have everything in place, we will add the D3 code to generate the graph:

The code creates force simulation and adds to it the nodes and the links. It is also responsible to add for each node an icon (this is why we added Font Awesome) and color.

When the graph is ready we will add a few event handlers to handle what is going to happen when the tick is happening or when the tooltip is needed to be shown:

Last but not least we will return the destroy function that the graph container is going to use:

The whole function source code:

And here you can find the force graph CSS module:

The Data Used in the Example

The data.json file we load:

The App Implementation

The App component will run the entire graph. Here is its source code:

Now that everything is set in place you can run the app and look at your fancy force graph.