Search code examples
javascriptd3.jsgraphthree.jsenvironment

What environment do I need to run a vasturiano 3D-Force Graph?

I only know javascript from a web browser perspective but I need to display data online in the way this web component does: https://github.com/vasturiano/3d-force-graph

The thing is that the setup instructions there aren't newbies friendly at all. It assumes some basic to advanced knowledge. So I made some research and even though everyone talking about the component say it's very easy to implement, none of them say how.

I kind of presume that there must be some javascript server involved (node.js ?). That Three.js and d3-force-3d must be imported (somehow, somewhere). But that's it. I'm not even sure it's enough. But I just can't figure out how to setup the whole thing so that I can run one of those scripts.

So, can anyone just give me hints, at a newbie level, so that I can work my way through using those scripts? Because at this point, I'm willing to search but I don't know what to search for exactly. I'm lacking the big picture while the info in the link are very particular and not very thorough.

I searched the web for two days but there is not much to find about 3d-force-graph and there is zero info on how to set it up.

All I need is a bridge in terms of info, so that these scripts can be set up and run (with custom data) by a non expert. I mean what environment, what libraries/dependencies, what to import, how to import, etc. Not necessarily in details as any help would be a good starting point.

Thank you.

Solution

  • I was able to run the basic example by simply creating an .html file and putting it in a web server. So if you grab the Basic example (https://github.com/vasturiano/3d-force-graph/blob/master/example/basic/index.html) and get that file content into your development web server.

    So the index.html file would look like:

    <head>
  <style> body { margin: 0; } </style>

  <script src="//unpkg.com/3d-force-graph"></script>
</head>

<body>
  <div id="3d-graph"></div>

  <script>
    // Random tree
    const N = 300;
    const gData = {
      nodes: [...Array(N).keys()].map(i => ({ id: i })),
      links: [...Array(N).keys()]
        .filter(id => id)
        .map(id => ({
          source: id,
          target: Math.round(Math.random() * (id-1))
        }))
    };

    const Graph = ForceGraph3D()
      (document.getElementById('3d-graph'))
        .graphData(gData);
  </script>
</body>

    Just open it in your browser and it should work.

    Regarding the dependencies, it looks like you only need to import one, there are different import options (mentioned here https://github.com/vasturiano/3d-force-graph#quick-start), the way you import it will depend on your development environment.