Build a hierarchy force graph by D3v7 and React + Vite

Son Pham — Wed, 13 Dec 2023 08:28:28 +0000

In recent features, I was involved to building graph visualization which built used D3js(v7). In this post, i'll show you how to create simple hierarchy force graph using D3 for visualizing connections in your data.

Creating The App

We'll start by creating a new React app using Vite and TypeScript

yarn create vite d3-hierarchy-force-graph --template react-ts

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

yarn add d3 @types/d3

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

Building Graph

Here is the code for the Graph component container:

We will add the D3 to generate the graph

When the graph is ready we will add nodes and links to simulation then add a few event handlers to handle what is going to happen when tick is happening

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 hierarchy force graph using React + Vite and D3. You can find the graph code here.

DEV Community: Son Pham

Build a hierarchy force graph by D3v7 and React + Vite