JavaScript > 3D Charts > 3D Mesh Plots
Suggest an edit to this page

3D Mesh Plots in JavaScript

How to make 3D mesh plots in javascript.


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

Simple 3D Mesh Plot 

// 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);
</script>\n</head>\n\n<body>\n\t<div id='myDiv'><!-- Plotly chart will be drawn inside this DIV --></div>\n</body>","js":"// Generating random data..\na=[]; b=[]; c=[];\nfor(i=0;i<50;i++)\n {\n var a_ = Math.random(); \n a.push(a_);\n \n var b_ = Math.random(); \n b.push(b_);\n \n var c_ = Math.random(); \n c.push(c_);\n }\n// Plotting the mesh\nvar data=[\n {\n opacity:0.8,\n color:'rgb(300,100,200)',\n type: 'mesh3d',\n x: a,\n y: b,\n z: c,\n }\n];\nPlotly.newPlot('myDiv', data);\n"}">

3D Mesh Plot with Alphahull 

// 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);
</script>\n</head>\n\n<body>\n\t<div id='myDiv'><!-- Plotly chart will be drawn inside this DIV --></div>\n</body>","js":"// Generating random data..\na=[]; b=[]; c=[];\nfor(i=0;i<50;i++)\n {\n var a_ = Math.random(); \n a.push(a_);\n \n var b_ = Math.random(); \n b.push(b_);\n \n var c_ = Math.random(); \n c.push(c_);\n }\n// Plotting the mesh\nvar data=[\n {\n alphahull:5,\n opacity:0.8,\n color:'rgb(200,100,300)',\n type: 'mesh3d',\n x: a,\n y: b,\n z: c,\n }\n];\nPlotly.newPlot('myDiv', data);\n"}">

3D Mesh Tetrahedron 

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.newPlot('myDiv', data, {});
</script>\n</head>\n\n<body>\n\t<div id='myDiv'><!-- Plotly chart will be drawn inside this DIV --></div>\n</body>","js":"var data = [{\n type: \"mesh3d\",\n x: [0, 1, 2, 0],\n y: [0, 0, 1, 2],\n z: [0, 2, 0, 1],\n i: [0, 0, 0, 1],\n j: [1, 2, 3, 2],\n k: [2, 3, 1, 3],\n intensity: [0, 0.33, 0.66, 1],\n colorscale: [\n [0, 'rgb(255, 0, 0)'],\n [0.5, 'rgb(0, 255, 0)'],\n [1, 'rgb(0, 0, 255)']\n ]\n }\n];\n\nPlotly.newPlot('myDiv', data, {});\n"}">

3D Mesh Cube 

var intensity = [0, 0.14285714285714285, 0.2857142857142857, 0.42857142857142855, 0.5714285714285714, 0.7142857142857143, 0.8571428571428571, 1];

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.newPlot('myDiv', data, {});
</script>\n</head>\n\n<body>\n\t<div id='myDiv'><!-- Plotly chart will be drawn inside this DIV --></div>\n</body>","js":"var intensity = [0, 0.14285714285714285, 0.2857142857142857, 0.42857142857142855, 0.5714285714285714, 0.7142857142857143, 0.8571428571428571, 1];\n\nvar data = [{\n type: \"mesh3d\",\n x: [0, 0, 1, 1, 0, 0, 1, 1],\n y: [0, 1, 1, 0, 0, 1, 1, 0],\n z: [0, 0, 0, 0, 1, 1, 1, 1],\n i: [7, 0, 0, 0, 4, 4, 6, 6, 4, 0, 3, 2],\n j: [3, 4, 1, 2, 5, 6, 5, 2, 0, 1, 6, 3],\n k: [0, 7, 2, 3, 6, 7, 1, 1, 5, 5, 7, 6],\n intensity: intensity,\n colorscale: [\n [0, 'rgb(255, 0, 255)'],\n [0.5, 'rgb(0, 255, 0)'],\n [1, 'rgb(0, 0, 255)']\n ]\n }\n];\n\nPlotly.newPlot('myDiv', data, {});\n"}">