Test Plotly 3D
Apr. 7th 2026
7
Min.
A sample post for testing common Plotly 3D visualization patterns
Plotly
This page is a simple test for a few common 3D visualization patterns: point clouds, trajectories, surfaces, and mesh-based shapes.
Note: 3D Plotly is gonna load way slower.
1. 3D scatter plot
A common use case for 3D scatter plots is visualizing point clouds, sensor output, clusters, or sampled positions in space.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
<div id="plotly3dScatter" style="width:100%;aspect-ratio:4/3;"></div>
<script>
document.addEventListener('DOMContentLoaded', function () {
const clusterA = {
x: [0.8, 1.1, 1.3, 0.9, 1.4, 1.0, 1.2, 0.7],
y: [0.9, 1.2, 0.7, 1.4, 1.1, 0.8, 1.3, 1.0],
z: [0.8, 1.0, 1.2, 0.9, 1.4, 1.1, 0.7, 1.3]
};
const clusterB = {
x: [-1.2, -0.9, -1.4, -1.1, -0.8, -1.3, -1.0, -1.5],
y: [1.4, 1.1, 1.6, 1.0, 1.3, 1.5, 0.9, 1.2],
z: [0.2, 0.5, 0.1, 0.6, 0.3, 0.8, 0.4, 0.7]
};
const clusterC = {
x: [1.8, 2.1, 1.6, 2.3, 1.9, 2.2, 1.7, 2.0],
y: [-1.4, -1.1, -1.6, -1.0, -1.3, -1.5, -0.9, -1.2],
z: [1.3, 1.0, 1.5, 1.1, 1.6, 0.9, 1.4, 1.2]
};
Plotly.newPlot(
'plotly3dScatter',
[
{
x: clusterA.x,
y: clusterA.y,
z: clusterA.z,
type: 'scatter3d',
mode: 'markers',
name: 'Cluster A',
marker: { size: 5 }
},
{
x: clusterB.x,
y: clusterB.y,
z: clusterB.z,
type: 'scatter3d',
mode: 'markers',
name: 'Cluster B',
marker: { size: 5 }
},
{
x: clusterC.x,
y: clusterC.y,
z: clusterC.z,
type: 'scatter3d',
mode: 'markers',
name: 'Cluster C',
marker: { size: 5 }
}
],
{
title: '3D Scatter: Point Clusters',
autosize: true,
scene: {
xaxis: { title: 'X' },
yaxis: { title: 'Y' },
zaxis: { title: 'Z' },
aspectmode: 'cube'
},
legend: { orientation: 'h' }
},
{
responsive: true
}
);
});
</script>
2. 3D trajectory / path plot
A 3D line plot is useful for trajectories, robot paths, drone flight logs, or any motion through space over time.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
<div id="plotly3dTrajectory" style="width:100%;aspect-ratio:4/3;"></div>
<script>
document.addEventListener('DOMContentLoaded', function () {
const t = [];
for (let i = 0; i <= 240; i++) {
t.push(i * 0.08);
}
const x = t.map(v => Math.cos(v));
const y = t.map(v => Math.sin(v));
const z = t.map(v => v / 4);
Plotly.newPlot(
'plotly3dTrajectory',
[
{
x: x,
y: y,
z: z,
type: 'scatter3d',
mode: 'lines',
name: 'Trajectory',
line: { width: 6 }
},
{
x: [x[0]],
y: [y[0]],
z: [z[0]],
type: 'scatter3d',
mode: 'markers',
name: 'Start',
marker: { size: 6 }
},
{
x: [x[x.length - 1]],
y: [y[y.length - 1]],
z: [z[z.length - 1]],
type: 'scatter3d',
mode: 'markers',
name: 'End',
marker: { size: 6 }
}
],
{
title: '3D Trajectory Example',
autosize: true,
scene: {
xaxis: { title: 'X' },
yaxis: { title: 'Y' },
zaxis: { title: 'Z' },
aspectmode: 'data'
},
legend: { orientation: 'h' }
},
{
responsive: true
}
);
});
</script>
3. 3D surface plot
3D surface plots are common for mathematical functions, terrain-like data, simulation outputs, and response surfaces.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<div id="plotly3dSurface" style="width:100%;aspect-ratio:4/3;"></div>
<script>
document.addEventListener('DOMContentLoaded', function () {
const x = [];
const y = [];
const z = [];
const n = 50;
const min = -4;
const max = 4;
for (let i = 0; i < n; i++) {
x.push(min + (max - min) * i / (n - 1));
y.push(min + (max - min) * i / (n - 1));
}
for (let i = 0; i < y.length; i++) {
const row = [];
for (let j = 0; j < x.length; j++) {
const xv = x[j];
const yv = y[i];
const r = Math.sqrt(xv * xv + yv * yv) + 1e-6;
row.push(Math.sin(r) / r);
}
z.push(row);
}
Plotly.newPlot(
'plotly3dSurface',
[
{
x: x,
y: y,
z: z,
type: 'surface',
name: 'Surface'
}
],
{
title: '3D Surface Example',
autosize: true,
scene: {
xaxis: { title: 'X' },
yaxis: { title: 'Y' },
zaxis: { title: 'Z' },
aspectmode: 'cube'
}
},
{
responsive: true
}
);
});
</script>
4. 3D mesh plot
Mesh plots are useful for object shapes, reconstructed surfaces, geometry visualization, or low-poly models.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<div id="plotly3dMesh" style="width:100%;aspect-ratio:4/3;"></div>
<script>
document.addEventListener('DOMContentLoaded', function () {
const x = [0, 1, 1, 0, 0, 1, 1, 0];
const y = [0, 0, 1, 1, 0, 0, 1, 1];
const z = [0, 0, 0, 0, 1, 1, 1, 1];
Plotly.newPlot(
'plotly3dMesh',
[
{
x: x,
y: y,
z: z,
i: [0, 0, 0, 1, 2, 4, 4, 5, 6, 7, 0, 1],
j: [1, 2, 4, 3, 3, 5, 6, 6, 7, 4, 5, 6],
k: [2, 4, 1, 2, 0, 6, 5, 7, 4, 0, 1, 2],
type: 'mesh3d',
opacity: 0.55,
name: 'Cube Mesh'
}
],
{
title: '3D Mesh Example',
autosize: true,
scene: {
xaxis: { title: 'X' },
yaxis: { title: 'Y' },
zaxis: { title: 'Z' },
aspectmode: 'data'
}
},
{
responsive: true
}
);
});
</script>
Comments are disabled for this post