3D Subplots in JavaScript

How to make 3D Subplots in javascript.


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

function getrandom(num , mul) {
    var value = [ ];
    for ( i=0; i <= num; i++ ) {
        var rand = Math.random() * mul;
        value.push(rand);
    }
    return value;
}

var trace1 =  {
     opacity: 0.5,
     color: 'rgba(255,127,80,0.7)',
     type: 'mesh3d',
     x: getrandom(50 , -75),
     y: getrandom(50 , 75),
     z: getrandom(50 , 75),
     scene: "scene1"
    };

var trace2 =  {
     opacity: 0.5,
     color: 'pink',
     type: 'mesh3d',
     x: getrandom(50 , -75),
     y: getrandom(50 , 75),
     z: getrandom(50 , 75),
     scene: "scene2"
    };

var trace3 = {
     opacity:0.4,
     color:'rgb(033,255,100)',
     type: 'mesh3d',
     x: getrandom(50 , -75),
     y: getrandom(50 , -75),
     z: getrandom(50 , -75),
     scene: "scene3",
    };

var trace4 = {
     opacity: 0.5,
     color:'rgb(200,100,200)',
     type: 'mesh3d',
     x: getrandom(50 , -75),
     y: getrandom(50 , 75),
     z: getrandom(50 , 75),
     scene: "scene4"
    };
    
var trace5 =  {
    opacity: 0.5,
    color:'rgb(00,150,200)',
    type: 'mesh3d',
    x: getrandom(50 , 100),
    y: getrandom(50 , 100),
    z: getrandom(50 , 100),
    scene: "scene5",
    }

var layout = {
    scene1: {
        domain: {
            x: [0.0,  0.5],
            y: [0.5, 1.0]
        },},
    scene2: {
        domain: {
            x: [0.5, 1],
            y: [0.5, 1.0]
        }},
     scene3: {
        domain: {
            x: [0.0,  0.33],
            y: [0, 0.5]
        },},
    scene4: {
        domain: {
            x: [0.33, 0.66],
            y: [0, 0.5]
        }},
    scene5: {
        domain: {
            x: [0.66, 0.99],
            y: [0, 0.5]
        },},
  height: 600,
   margin: {
    l: 0,
    r: 0,
    b: 0,
    t: 0,
    pad: 0
  },
}    
     
Plotly.newPlot('myDiv', [trace1,trace2,trace3,trace4,trace5], layout);
</script>\n</head>\n\n<body>\n\t<div id='myDiv'><!-- Plotly chart will be drawn inside this DIV --></div>\n</body>","js":"function getrandom(num , mul) {\n var value = [ ];\n for ( i=0; i <= num; i++ ) {\n var rand = Math.random() * mul;\n value.push(rand);\n }\n return value;\n}\n\nvar trace1 = {\n opacity: 0.5,\n color: 'rgba(255,127,80,0.7)',\n type: 'mesh3d',\n x: getrandom(50 , -75),\n y: getrandom(50 , 75),\n z: getrandom(50 , 75),\n scene: \"scene1\"\n };\n\nvar trace2 = {\n opacity: 0.5,\n color: 'pink',\n type: 'mesh3d',\n x: getrandom(50 , -75),\n y: getrandom(50 , 75),\n z: getrandom(50 , 75),\n scene: \"scene2\"\n };\n\nvar trace3 = {\n opacity:0.4,\n color:'rgb(033,255,100)',\n type: 'mesh3d',\n x: getrandom(50 , -75),\n y: getrandom(50 , -75),\n z: getrandom(50 , -75),\n scene: \"scene3\",\n };\n\nvar trace4 = {\n opacity: 0.5,\n color:'rgb(200,100,200)',\n type: 'mesh3d',\n x: getrandom(50 , -75),\n y: getrandom(50 , 75),\n z: getrandom(50 , 75),\n scene: \"scene4\"\n };\n \nvar trace5 = {\n opacity: 0.5,\n color:'rgb(00,150,200)',\n type: 'mesh3d',\n x: getrandom(50 , 100),\n y: getrandom(50 , 100),\n z: getrandom(50 , 100),\n scene: \"scene5\",\n }\n\nvar layout = {\n scene1: {\n domain: {\n x: [0.0, 0.5],\n y: [0.5, 1.0]\n },},\n scene2: {\n domain: {\n x: [0.5, 1],\n y: [0.5, 1.0]\n }},\n scene3: {\n domain: {\n x: [0.0, 0.33],\n y: [0, 0.5]\n },},\n scene4: {\n domain: {\n x: [0.33, 0.66],\n y: [0, 0.5]\n }},\n scene5: {\n domain: {\n x: [0.66, 0.99],\n y: [0, 0.5]\n },},\n height: 600,\n margin: {\n l: 0,\n r: 0,\n b: 0,\n t: 0,\n pad: 0\n },\n} \n \nPlotly.newPlot('myDiv', [trace1,trace2,trace3,trace4,trace5], layout);"}">