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. Sign up for early access now.
// 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.newPlot('myDiv', data, {});
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, {});
