<!-- Include the CanvasXpress library in your HTML file -->
<link rel="stylesheet" href="https://www.canvasxpress.org/dist/canvasXpress.css" type="text/css"/>
<script src="https://www.canvasxpress.org/canvasXpress.min.js"></script>


<!-- Create a canvas element for the chart with the desired dimensions -->
<div>
  <canvas id="canvasId" width="600" height="600"</canvas>
</div>


<!-- Create a script to initialize the chart -->
<script>

  <!-- Create the data for the graph -->
  var data = {
     "x" : {
        "Factor1" : ["Lev : 1","Lev : 2","Lev : 3","Lev : 1","Lev : 2","Lev : 3"],
        "Factor2" : ["Lev : A","Lev : B","Lev : A","Lev : B","Lev : A","Lev : B"],
        "Factor3" : ["Lev : X","Lev : X","Lev : Y","Lev : Y","Lev : Z","Lev : Z"]
     },
     "y" : {
        "data" : [
          [5,10,25,40,45,50],
          [95,80,75,70,55,40],
          [25,30,45,60,65,70],
          [55,40,35,30,15,1],
          [10,20,35,50,55,65],
          [80,70,65,60,45,35],
          [30,40,55,70,75,85],
          [60,50,45,40,25,15]
        ],
        "desc" : ["Magnitude1","Magnitude2"],
        "smps" : ["S1","S2","S3","S4","S5","S6"],
        "vars" : ["V1","V2","V3","V4","V5","V6","V7","V8"]
     },
     "z" : {
        "Annt1" : ["Desc : 1","Desc : 2","Desc : 3","Desc : 4","Desc : 5","Desc : 6","Desc : 7","Desc : 8"],
        "Annt2" : ["Desc : A","Desc : B","Desc : A","Desc : B","Desc : A","Desc : B","Desc : A","Desc : B"],
        "Annt3" : ["Desc : X","Desc : X","Desc : Y","Desc : Y","Desc : X","Desc : X","Desc : Y","Desc : Y"]
     }
  }
  
  
  <-- Create the configuration for the graph -->
  var config = {
     "colorBy":"Annt1",
     "graphType":"Scatter3D",
     "legendKeyBackgroundBorderColor":"rgba(255,255,255,0)",
     "legendKeyBackgroundColor":"rgba(255,255,255,0)",
     "shapeBy":"Annt2",
     "sizeBy":"Annt3",
     "theme":"CanvasXpress",
     "xAxis":[
        "S1"
     ],
     "yAxis":[
        "S2"
     ],
     "zAxis":[
        "S3"
     ]
  }
  

  <!-- Call the CanvasXpress function to create the graph -->
  var cX = new CanvasXpress("canvasId", data, config);


</script>