Creating a Force Graph using React and D3

Lately, 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 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 retrieve 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 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 it’s 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 add 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 tick is happening or when 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 the 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.

Summary

In the post I showed how to create a force graph component using React and D3 libraries. You can find the graph code here.