Create a simple 3D Force Graph for Nextjs or CRA

Eli Elad Elrom
Master React
Published in
4 min readJan 7, 2022

--

In this tutorial, I will be showing you how to create a simple 3d force graph that can be used to show a relationship between nodes and link them together.

See it in the wild: https://elielrom.com/ReactQuestions > click the full-screen mode icon.

`react-force-graph-3d` is a simple to use library to use to get a force chart. The library does have 87 open issues so be prepared to fork and fix some functionality yourself but for a proof of concept / MVP, it’s the ideal starting point.

I also like that the library support d3 `forceEngine`. I will show you how to set a starter project and plug some data to get this library to work;

Technology stack:

  • react-force-graph-3d
  • Nextjs or CRA
  • TypeScript
  • d3 — forceEngine (optional)
  • Data management - Recoil

power_network.json

For the data I will be using nodes and links, this could be provided from a data source instead of a flat static file;

{
"status": "success",
"results": [
{
"nodes": [
{
"id": "JavaScript / TypeScript",
"fillColor": "#fa6502"
}
],
"links": [
{…

--

--