plotly.js

The open source JavaScript graphing library that powers Plotly

Show Sidebar Hide Sidebar

3D Mesh Plots in plotly.js

How to make 3D mesh plots in javascript.

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);


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);


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.plot('myDiv', data, {});


3D Mesh Cube

// 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?