3D Axes in JavaScript
How to format axes for 3d charts.
Plotly Studio: Transform any dataset into an interactive data application in minutes with AI. Sign up for early access now.
function getrandom(num , mul)
{
var value = [ ];
for(i=0;i<=num;i++)
{
var rand = Math.random() * mul;
value.push(rand);
}
return value;
}
var data=[
{
opacity:0.4,
type: 'scatter3d',
x: getrandom(50 , -75),
y: getrandom(50 , -75),
z: getrandom(50 , -75),
},
{
opacity:0.5,
type: 'scatter3d',
x: getrandom(50 , -75),
y: getrandom(50 , 75),
z: getrandom(50 , 75),
},
{
opacity:0.5,
type: 'scatter3d',
x: getrandom(50 , 100),
y: getrandom(50 , 100),
z: getrandom(50 , 100),
}
];
var layout = {
scene:{
aspectmode: "manual",
aspectratio: {
x: 1, y: 0.7, z: 1,
},
xaxis: {
nticks: 9,
range: [-200, 100],
},
yaxis: {
nticks: 7,
range: [-100, 100],
},
zaxis: {
nticks: 10,
range: [-150, 100],
}},
};
Plotly.newPlot('myDiv', data, layout);
function getrandom(num , mul)
{
var value = [ ]
var i;
for(i=0;i<=num;i++)
{
rand = Math.random() * mul;
value.push(rand);
}
return value;
}
var i;
traces = [];
names = ['cube', 'data', 'auto', 'manual'];
for (i=1; i<5; i++){
traces.push({
x: getrandom(20, 4),
y: getrandom(20, 3),
z: getrandom(20, 5),
opacity:0.5,
mode: "markers",
type: "mesh3d",
scene: "scene" + i,
name: names[i-1]
}
)
}
var layout = {
scene:{
aspectmode:'cube',
domain:{row:0, column:0}
},
scene2:{
aspectmode:'data',
domain:{row:1, column:0}
},
scene3:{
aspectmode:'auto',
domain:{row:0, column:1}
},
scene4:{
aspectmode:'manual',
aspectratio: {x:1, y:1, z:2},
domain: {row:1, column:1}
},
grid:{
pattern: 'independent',
rows:2,
columns:2
},
};
Plotly.newPlot('myDiv', traces, layout);
function getrandom(num , mul)
{
var value = [ ];
for(i=0;i<=num;i++)
{
var rand = Math.random() * mul;
value.push(rand);
}
return value;
}
var data=[
{
opacity:0.4,
type: 'scatter3d',
x: getrandom(50 , -75),
y: getrandom(50 , -75),
z: getrandom(50 , -75),
},
];
var layout = {
scene:{
xaxis: {
ticktext:['H20','C02','O2'],
tickvals:[-30, -45, -65, -10]
},
yaxis: {
nticks: 5,
tickfont:
{
color:'green',
family:'Old Standard TT, serif',
size: 14
},
ticksuffix:'$'
},
zaxis: {
ticks: 'outside',
tick0: 0,
tickwidth: 4}},
};
Plotly.newPlot('myDiv', data, layout);
function getrandom(num , mul)
{
var value = [ ];
for(i=0;i<=num;i++)
{
var rand = Math.random() * mul;
value.push(rand);
}
return value;
}
var data=[
{
opacity:0.4,type: 'scatter3d',
x: getrandom(50 , 75),
y: getrandom(50 , 75),
z: getrandom(50 , 75),
mode:'markers'
},
{
opacity: 0.5,
type: 'scatter3d',
x: getrandom(75 , 75),
y: getrandom(75 , 75),
z: getrandom(75 , 75),
mode:'markers'
},
{
opacity: 0.5,
type: 'scatter3d',
x: getrandom(75 , 100),
y: getrandom(75 , 100),
z: getrandom(75 , 100),
mode:'markers'
}
];
var layout = {
scene:{
xaxis: {
backgroundcolor: "rgb(200, 200, 230)",
gridcolor: "rgb(255, 255, 255)",
showbackground: true,
zerolinecolor: "rgb(255, 255, 255)",
},
yaxis: {
backgroundcolor: "rgb(230, 200,230)",
gridcolor: "rgb(255, 255, 255)",
showbackground: true,
zerolinecolor: "rgb(255, 255, 255)"
},
zaxis: {
backgroundcolor: "rgb(230, 230,200)",
gridcolor: "rgb(255, 255, 255)",
showbackground: true,
zerolinecolor: "rgb(255, 255, 255)"
}}
};
Plotly.newPlot('myDiv', data, layout);function getrandom(num , mul) {
var value = [ ];
for(i=0;i<=num;i++)
{
var rand = Math.random() * mul;
value.push(rand);
}
return value;}
var trace1 = {
type:'mesh3d',
x: getrandom(1000,200), y: getrandom(1000,300), z: getrandom(1000,150),
color: 'lightblue',};
var trace2 = {
type:'mesh3d',
x: getrandom(1000,200), y: getrandom(1000,300), z: getrandom(1000,150),
color: 'pink'};
var layout = {
scene: {
xaxis: {
title: {
text: 'X AXIS TITLE'
}
},
yaxis: {
title: {
text: 'Y AXIS TITLE'
}
},
zaxis: {
title: {
text: 'Z AXIS TITLE'
}
}
},
autosize: false,
width: 550,
height: 500,
margin: {
l: 0,
r: 0,
b: 50,
t: 50,
pad: 4
},
}
Plotly.newPlot('myDiv', [trace1,trace2], layout);function getrandom(num , mul)
{
var value = [ ];
for(i=0;i<=num;i++)
{
var rand = Math.random() * mul;
value.push(rand);
}
return value;
}
var data = [
{
x: getrandom(20, 4),
y: getrandom(20, 3),
z: getrandom(20, 5),
opacity:0.5,
mode: "markers",
type: "scatter3d",
scene: "scene1",
name: "Lower the view point"
},
{
x:getrandom(20, 4),
y:getrandom(20, 3),
z:getrandom(20, 5),
opacity:0.5,
mode: "markers",
type: "scatter3d",
scene: "scene2",
name: "x-z plane"
},
{
x:getrandom(20, 4),
y:getrandom(20, 3),
z:getrandom(20, 5),
opacity:0.5,
mode: "markers",
type: "scatter3d",
scene: "scene3",
name: "y-z plane"
},
{
x:getrandom(10, 4),
y:getrandom(10, 3),
z:getrandom(10, 5),
opacity:0.5,
mode: "markers",
type: "scatter3d",
scene: "scene4",
name: "View from above"
},
{
x:getrandom(20, 4),
y:getrandom(20, 3),
z:getrandom(20, 5),
opacity:0.5,
mode: "markers",
type: "scatter3d",
scene: "scene5",
name: "Zooming in"
},
];
var layout = {
scene1: {
domain: {
x: [0.00, 0.33],
y: [0.5, 1]
},
camera: {
center: {
x: 0, y: 0, z: 0 },
eye: {
x: 2, y: 2, z: 0.1 },
up: {
x: 0, y: 0, z: 1 }
},},
scene2: {
domain: {
x: [0.33, 0.66],
y: [0.5, 1.0]
},
camera: {
center: {
x: 0, y: 0, z: 0},
eye: {
x:0.1, y:2.5, z:0.1},
up: {
x: 0, y: 0, z: 1}
},},
scene3: {
domain: {
x: [0.66, 0.99],
y: [0.5, 1]
},
camera: {
center: {
x: 0, y: 0, z: 0},
eye: {
x:2.5, y:0.1, z:0.1},
up: {
x: 0, y: 0, z: 1}
},},
scene4: {
domain: {
x: [0.15, 0.5],
y: [-0.25, 0.4]
},
camera: {
center: {
x: 0, y: 0, z: 0},
eye: {
x:0.1, y:0.1, z:2.5},
up: {
x: 0, y: 0, z: 1}
},},
scene5: {
domain: {
x: [0.62, 0.7],
y: [-0.2, 0.4]
},
camera: {
center: {
x: 0, y: 0, z: 0},
eye: {
x:0.1, y:0.1, z:1},
up: {
x: 0, y: 0, z: 1}
},},
};
Plotly.newPlot('myDiv', data, layout);