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


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