# Plotting 3d network graphs in plotly

**URL:** <https://community.plotly.com/t/plotting-3d-network-graphs-in-plotly/72426>\
**Category:** plotly.js\
**Tags:** question\
**Created:** [February 8, 2023, 9:27am UTC](https://community.plotly.com/t/plotting-3d-network-graphs-in-plotly/72426 "2023-02-08T09:27:36Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![Natasha](https://avatars.discourse-cdn.com/v4/letter/n/df705f/32.png) [@Natasha](https://community.plotly.com/u/Natasha)\
**Post date:** [February 8, 2023, 9:27am UTC](https://community.plotly.com/t/plotting-3d-network-graphs-in-plotly/72426/1 "2023-02-08T09:27:36Z")

</div>

I am trying to plot a 3d network using plotly.js

```auto
<html>
  <head>
    <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
  </head>
  <body>
    <div id="myDiv"></div>
    <script>
      var nodes = [
        { x: 0, y: 0, z: 0 },
        { x: 1, y: 1, z: 1 },
        { x: 2, y: 0, z: 2 },
        { x: 3, y: 1, z: 3 },
        { x: 4, y: 0, z: 4 }
      ];

      var edges = [
        { source: 0, target: 1 },
        { source: 1, target: 2 },
        { source: 2, target: 3 },
        { source: 3, target: 4 }
      ];

      var x = [];
      var y = [];
      var z = [];

      for (var i = 0; i < nodes.length; i++) {
        x.push(nodes[i].x);
        y.push(nodes[i].y);
        z.push(nodes[i].z);
      }

      var xS = [];
      var yS = [];
      var zS = [];
      var xT = [];
      var yT = [];
      var zT = [];

      for (var i = 0; i < edges.length; i++) {
        xS.push(nodes[edges[i].source].x);
        yS.push(nodes[edges[i].source].y);
        zS.push(nodes[edges[i].source].z);
        xT.push(nodes[edges[i].target].x);
        yT.push(nodes[edges[i].target].y);
        zT.push(nodes[edges[i].target].z);
      }

      var traceNodes = {
        x: x, y: y, z: z,
        mode: 'markers',
        marker: { size: 12, color: 'red' },
        type: 'scatter3d'
      };

      var traceEdges = {
        x: [xS, xT],
        y: [yS, yT],
        z: [zS, zT],
        mode: 'lines',
        line: { color: 'red', width: 2},
        opacity: 0.8,
        type: 'scatter3d'
      };
      
      var layout = {
        margin: { l: 0, r: 0, b: 0, t: 0 }
      };

      Plotly.newPlot('myDiv', [traceNodes, traceEdges], layout);
    </script>
  </body>
</html>

```

The nodes of the network are visible but the edges are not visible. Suggestions on how to fix this issue will be really helpful.
