Creating a Force Graph using React and D3
Tags: d3js, fontawesome, react, webdev
Published: 2020-04-30 14:14:24

---
title: Creating a Force Graph using React and D3
published: true
date: 2020-04-30 11:48:47 UTC
tags: d3js,font-awesome,react,web-development
canonical_url: https://medium.com/@gilfink/creating-a-force-graph-using-react-and-d3-6579bcd9628c
---

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:

![](https://cdn-images-1.medium.com/max/829/1*fJ9MrLe-cCTToLxE4ZQpsA.png)<figcaption>Project Structure</figcaption>

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:

{% gist https://gist.github.com/gilf/2c28025c16c005a0d714a5fab014941f %}

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:

{% gist https://gist.github.com/gilf/04549cd8fbe5286c31aaebf87c8cc70c %}

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** :

{% gist https://gist.github.com/gilf/2cd55545a1597fb886c61be971af3261 %}

Then, we’ll add a few helper functions:

{% gist https://gist.github.com/gilf/4ad7775a0c78030c4858b7c622a1336a %}

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:

{% gist https://gist.github.com/gilf/912f65ade7d4375978f134d0375278f2 %}

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:

{% gist https://gist.github.com/gilf/d7d00a76527d8d8d971f391524fcdbaa %}

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:

{% gist https://gist.github.com/gilf/fe595e6d8f8932370505fc97e76bc2fa %}

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

{% gist https://gist.github.com/gilf/8c9b373419838f68822ac36e01766d03 %}

The whole function source code:

{% gist https://gist.github.com/gilf/2ac9eae91de0eb58badfd0e8be4a3a7c %}

And here you can find the force graph CSS module:

{% gist https://gist.github.com/gilf/300ab7f06c2246ad1cf505d215e6fbaa %}

The Data Used in the Example

The **data.json** file the we load:

{% gist https://gist.github.com/gilf/91623873a3229d7d643160193838570b %}

The App Implementation

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

{% gist https://gist.github.com/gilf/94afdda06be382d1914ea5223acc84f1 %}

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

![](https://cdn-images-1.medium.com/max/1024/1*0ZJFHu5JpZTyoxfzZR_ItA.png)<figcaption>The Force Graph</figcaption>

#### 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](https://1drv.ms/u/s!AvRpQcwPfoDMgqFYvvmmF3wrQNAOCw?e=fhciaT).