How to use 3d-force-graph - 7 common examples

componentDidMount() {
    this.graph = ForceGraph3D()(this.chartRef)
      .width(this.chartRef.clientWidth - 100)
      .height(window.innerHeight - 200)
      .forceEngine("ngraph")
      .backgroundColor("#FFFFFF")
      .nodeAutoColorBy("group")
      .graphData(this.state.data);

    this.startOrbit();
  }

componentDidMount() {
    const canvas = document.createElement("canvas");
    const ctx = canvas.getContext("2d");

    this.graph = ForceGraph3D()(this.chartRef)
      .width(this.chartRef.clientWidth - 100)
      .height(window.innerHeight - 200)
      .backgroundColor("#FFFFFF")
      .nodeAutoColorBy("type")
      .linkWidth(2)
      .nodeThreeObject(node => {
        if (node.type === "application") {
          var geometry = new THREE.DodecahedronGeometry(10);

          var diffuseColor = new THREE.Color(0x5e9ccb);
          var material = new THREE.MeshPhysicalMaterial({
            color: diffuseColor,
            metalness: 0,
            roughness: 0.5,
            clearCoat: 1.0,
            clearCoatRoughness: 1.0,

componentDidMount() {
    this.graph = ForceGraph3D()(this.chartRef)
      .width(this.chartRef.clientWidth - 100)
      .height(window.innerHeight - 200)
      .backgroundColor("#FFFFFF")
      .nodeColor(d => {
        switch (d.type) {
          case "application":
            return "blue";
          case "environment":
            return "yellow";
          case "microservice":
            return "purple";
          case "K8Container":
            return "green";
          case "K8Pod":
            return "red";
          case "K8Cluster":

componentDidMount() {
    this.graph = ForceGraph3D()(this.chartRef)
      .width(this.chartRef.clientWidth - 100)
      .height(window.innerHeight - 200)
      .backgroundColor("#FFFFFF")
      .forceEngine("ngraph")
      .nodeColor(d => {
        switch (d.type) {
          case "application":
            return "blue";
          case "environment":
            return "yellow";
          case "microservice":
            return "purple";
          case "K8Container":
            return "green";
          case "K8Pod":
            return "red";

data: function() {
      return {
        devicesByMAC: new Map(),
        associationsByKey: new Map(),
        isAssociated: new Map(),
        devices: [],
        associations: [],
        onlyShowAssociated: false,
        graph: ForceGraph3D(),
        displayDetails: false,
        selectedNodeMAC: "",
        selectedNodeVendor: "",
        selectedNodeProbedFor: "",
      }
    },
    methods: {

componentDidMount() {
    this.graph = ForceGraph3D()(this.chartRef)
      .width(this.chartRef.clientWidth - 100)
      .height(window.innerHeight - 200)
      .backgroundColor("#FFFFFF")
      .nodeAutoColorBy("group")
      .linkWidth(2)
      .linkColor((d, d2) => {
        return d.source < 10 ? "#FF0000" : "#000000";
      })
      .nodeThreeObject(
        ({ id }) =>
          new THREE.Mesh(
            [
              new THREE.BoxGeometry(
                Math.random() * 20,
                Math.random() * 20,
                Math.random() * 20

componentDidMount() {
    this.graph = ForceGraph3D()(this.chartRef)
      .width(this.chartRef.clientWidth - 100)
      .height(window.innerHeight - 200)
      .backgroundColor("#FFFFFF")
      .nodeAutoColorBy("group")
      .linkWidth(3)
      .linkColor((d, d2) => {
        return d.source < 20 ? "#FF0000" : "#000000";
      })
      .graphData(this.state.data);
  }