Create a simple 3D Force Graph for Nextjs or CRA

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": [
    {…