plotly.js

The open source JavaScript graphing library that powers Plotly

Show Sidebar Hide Sidebar
Plotly.js

3D Mesh Plots in plotly.js

How to make 3D mesh plots in javascript.

// Generating random data..
a=[]; b=[]; c=[];
for(i=0;i<50;i++)
  {
    var a_ = Math.random(); 
    a.push(a_);
    
    var b_ = Math.random(); 
    b.push(b_);
    
    var c_ = Math.random(); 
    c.push(c_);
  }
// Plotting the mesh
var data=[
    {
      opacity:0.8,
      color:'rgb(300,100,200)',
      type: 'mesh3d',
      x: a,
      y: b,
      z: c,
    }
];
Plotly.newPlot('myDiv', data);
// Generating random data..
a=[]; b=[]; c=[];
for(i=0;i<50;i++)
  {
  var a_ = Math.random(); 
   a.push(a_);
  
  var b_ = Math.random(); 
   b.push(b_);
  
  var c_ = Math.random(); 
   c.push(c_);
  }
// Plotting the mesh
var data=[
  {
    alphahull:5,
    opacity:0.8,
    color:'rgb(200,100,300)',
    type: 'mesh3d',
    x: a,
    y: b,
    z: c,
  }
];
Plotly.newPlot('myDiv', data);
var data = [{
    type: "mesh3d",
    x: [0, 1, 2, 0],
    y: [0, 0, 1, 2],
    z: [0, 2, 0, 1],
    i: [0, 0, 0, 1],
    j: [1, 2, 3, 2],
    k: [2, 3, 1, 3],
    intensity: [0, 0.33, 0.66, 1],
    colorscale: [
      [0, 'rgb(255, 0, 0)'],
      [0.5, 'rgb(0, 255, 0)'],
      [1, 'rgb(0, 0, 255)']
    ]
  }
];

Plotly.plot('myDiv', data, {});
// have to import the numeric.js in order to call `numeric.linspace`

var intensity = numeric.linspace(0,1,8);

var data = [{
    type: "mesh3d",
    x: [0, 0, 1, 1, 0, 0, 1, 1],
    y: [0, 1, 1, 0, 0, 1, 1, 0],
    z: [0, 0, 0, 0, 1, 1, 1, 1],
    i: [7, 0, 0, 0, 4, 4, 6, 6, 4, 0, 3, 2],
    j: [3, 4, 1, 2, 5, 6, 5, 2, 0, 1, 6, 3],
    k: [0, 7, 2, 3, 6, 7, 1, 1, 5, 5, 7, 6],
    intensity: intensity,
    colorscale: [
      [0, 'rgb(255, 0, 255)'],
      [0.5, 'rgb(0, 255, 0)'],
      [1, 'rgb(0, 0, 255)']
    ]
  }
];

Plotly.plot('myDiv', data, {});
Still need help?
Contact Us

For guaranteed 24 hour response turnarounds, upgrade to a Developer Support Plan.