example/auto-colored/index.html

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

  <script src="//unpkg.com/react/umd/react.production.min.js"></script>
  <script src="//unpkg.com/react-dom/umd/react-dom.production.min.js"></script>
  <script src="//unpkg.com/@babel/standalone"></script>

  <script src="//unpkg.com/react-force-graph-3d"></script>
  <!--<script src="../../src/packages/react-force-graph-3d/dist/react-force-graph-3d.js"></script>-->

  <script src="../datasets/random-data.js"></script>
</head>

<body>
  <div id="graph"></div>

  <script type="text/jsx">
    const GROUPS = 12;
    const gData = genRandomTree();

    ReactDOM.render(
      <ForceGraph3D
        graphData={gData}
        nodeAutoColorBy={d => d.id%GROUPS}
        linkAutoColorBy={d => gData.nodes[d.source].id%GROUPS}
        linkWidth={2}
      />,
      document.getElementById('graph')
    );
  </script>
</body>