3D Line Plots in JavaScript

How to make 3D line plots in javascript.

Plotly Studio: Transform any dataset into an interactive data application in minutes with AI. Try Plotly Studio now.

3D Line Plot

d3.csv('https://raw.githubusercontent.com/plotly/datasets/master/3d-line1.csv', function(err, rows){
      function unpack(rows, key) {
          return rows.map(function(row)
          { return row[key]; }); }

var x = unpack(rows , 'x');
var y = unpack(rows , 'y');
var z = unpack(rows , 'z');
var c = unpack(rows , 'color');
Plotly.newPlot('myDiv', [{
  type: 'scatter3d',
  mode: 'lines',
  x: x,
  y: y,
  z: z,
  opacity: 1,
  line: {
    width: 6,
    color: c,
    reversescale: false
  }
}], {
  height: 640
});
});

3D Line + Markers Plot

var pointCount = 31;
var i, r;

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

for(i = 0; i < pointCount; i++) 
{
   r = 10 * Math.cos(i / 10);
   x.push(r * Math.cos(i));
   y.push(r * Math.sin(i));
   z.push(i);
   c.push(i)
}

Plotly.newPlot('myDiv', [{
  type: 'scatter3d',
  mode: 'lines+markers',
  x: x,
  y: y,
  z: z,
  line: {
    width: 6,
    color: c,
    colorscale: "Viridis"},
  marker: {
    size: 3.5,
    color: c,
    colorscale: "Greens",
    cmin: -20,
    cmax: 50
  }},                  
]);

3D Line Spiral Plot

var pointCount = 3142;
var i, r;

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

for(i = 0; i < pointCount; i++)
 {
     r = i * (pointCount - i);
     x.push(r * Math.cos(i / 30));
     y.push(r * Math.sin(i / 30));
     z.push(i);
     c.push(i)
 }

Plotly.newPlot('myDiv', [{
     type: 'scatter3d',
     mode: 'lines',
     x: x,
     y: y,
     z: z,
     opacity: 0.7,
     line: {
       width: 10,
       color: c,
       colorscale: 'Viridis'}
    }]);

3D Random Walk Plot

d3.csv('https://raw.githubusercontent.com/plotly/datasets/master/_3d-line-plot.csv', function(err, rows){
      function unpack(rows, key) {
          return rows.map(function(row)
          { return row[key]; });
      }

var trace1 = {
  x: unpack(rows, 'x1'),
  y: unpack(rows, 'y1'),
  z: unpack(rows, 'z1'),
  mode: 'lines',
  marker: {
    color: '#1f77b4',
    size: 12,
    symbol: 'circle',
    line: {
      color: 'rgb(0,0,0)',
      width: 0
    }},
  line: {
    color: '#1f77b4',
    width: 1
  },
  type: 'scatter3d'
};

var trace2 = {
  x: unpack(rows, 'x2'),
  y: unpack(rows, 'y2'),
  z: unpack(rows, 'z2'),
  mode: 'lines',
  marker: {
    color: '#9467bd',
    size: 12,
    symbol: 'circle',
    line: {
      color: 'rgb(0,0,0)',
      width: 0
    }},
  line: {
    color: 'rgb(44, 160, 44)',
    width: 1
  },
  type: 'scatter3d'
};

var trace3 = {
  x: unpack(rows, 'x3'),
  y: unpack(rows, 'y3'),
  z: unpack(rows, 'z3'),
  mode: 'lines',
  marker: {
    color: '#bcbd22',
    size: 12,
    symbol: 'circle',
    line: {
      color: 'rgb(0,0,0)',
      width: 0
    }},
  line: {
    color: '#bcbd22',
    width: 1
  },
  type: 'scatter3d'
};

var data = [trace1, trace2, trace3];
var layout = {
  title: {
    text: '3D Line Plot'
  },
  autosize: false,
  width: 500,
  height: 500,
  margin: {
    l: 0,
    r: 0,
    b: 0,
    t: 65
  }
};
Plotly.newPlot('myDiv', data, layout);
});

</script>\n\t<script src="/?originalUrl=https%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Fd3%2F3.5.17%2Fd3.min.js"></script>\n</head>\n\n<body>\n\t<div id='myDiv'></div>\n</body>","js":"d3.csv('https://raw.githubusercontent.com/plotly/datasets/master/_3d-line-plot.csv', function(err, rows){\n function unpack(rows, key) {\n return rows.map(function(row)\n { return row[key]; });\n }\n\nvar trace1 = {\n x: unpack(rows, 'x1'),\n y: unpack(rows, 'y1'),\n z: unpack(rows, 'z1'),\n mode: 'lines',\n marker: {\n color: '#1f77b4',\n size: 12,\n symbol: 'circle',\n line: {\n color: 'rgb(0,0,0)',\n width: 0\n }},\n line: {\n color: '#1f77b4',\n width: 1\n },\n type: 'scatter3d'\n};\n\nvar trace2 = {\n x: unpack(rows, 'x2'),\n y: unpack(rows, 'y2'),\n z: unpack(rows, 'z2'),\n mode: 'lines',\n marker: {\n color: '#9467bd',\n size: 12,\n symbol: 'circle',\n line: {\n color: 'rgb(0,0,0)',\n width: 0\n }},\n line: {\n color: 'rgb(44, 160, 44)',\n width: 1\n },\n type: 'scatter3d'\n};\n\nvar trace3 = {\n x: unpack(rows, 'x3'),\n y: unpack(rows, 'y3'),\n z: unpack(rows, 'z3'),\n mode: 'lines',\n marker: {\n color: '#bcbd22',\n size: 12,\n symbol: 'circle',\n line: {\n color: 'rgb(0,0,0)',\n width: 0\n }},\n line: {\n color: '#bcbd22',\n width: 1\n },\n type: 'scatter3d'\n};\n\nvar data = [trace1, trace2, trace3];\nvar layout = {\n title: {\n text: '3D Line Plot'\n },\n autosize: false,\n width: 500,\n height: 500,\n margin: {\n l: 0,\n r: 0,\n b: 0,\n t: 65\n }\n};\nPlotly.newPlot('myDiv', data, layout);\n});\n"}">