<!-- 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" : {
        "CellType" : ["CT1","CT2","CT1","CT2","CT1","CT2","CT1","CT2","CT1","CT2"],
        "Dose" : [40,40,20,20,15,30,50,15,30,50],
        "Drug" : ["A","B","A","B","A","B","A","B","A","B"],
        "Time" : ["t1","t2","t3","t4","t5","t1","t2","t3","t4","t5"]
     },
     "y" : {
        "data" : [
          [2.82,-0.06,1.94,-2.35,4.19,-0.13,2.55,1.49,3.02,-0.7],
          [3.001,0.3289,2.55,-0.552,3.766,-0.28,4.153,-1.759,3.363,2.09],
          [2.82,-0.53,2.87,-0.89,4.84,-1.12,3.11,-1.26,1.58,0.19],
          [2.5,0.86,4.89,1.7,2.54,0.95,2.65,1.22,1.82,0.64],
          [2.81,0.64,3.47,-0.74,3.17,0.85,1.66,0.89,4.18,-0.17],
          [2.23,0.18,3.27,-1.53,4.3,-1.49,2.16,-0.48,2.93,2.26],
          [2.98,-2.8,3.1,-0.03,1.89,-0.48,3.53,0.68,3.71,0.04],
          [3.49,-0.79,2.36,0.62,5.25,-1.51,2.65,-0.99,2.21,1.18],
          [3.35,0.47,3.58,-0.5,2.15,-0.7,1.74,-0.82,2.76,1.1],
          [3.72,0.27,2.91,-0.82,1.42,1.44,4.32,-1.72,2.8,-0.15],
          [2.53,1.33,-1.41,2.36,-1.2,1.48,0.56,1.48,-0.81,1.39],
          [-2.23,3.04,-1.05,1.43,0.53,1.14,1.09,2.57,0.37,3.53],
          [-1.3,1.48,-1.1,1.99,0.25,1.91,-1.11,1.99,-0.62,0.76],
          [0.4,2.37,0.49,1.07,1.03,2.06,0.11,0.1,1.08,2.02],
          [-0.42,6.68,0.19,6.96,-0.01,6.49,0.33,5.97,0.24,6.17],
          [-0.24,6.11,-0.69,6.6,0.2,6.23,0.13,6.6,-0.48,7.22],
          [0.8,7.04,0.46,5.7,-1.68,6.41,0.48,6.2,-0.36,6.04],
          [0.02,5.44,0.65,5.03,2.4,6.52,-1.02,6.13,1.16,6.5],
          [0.01,7.7,1.17,5.98,-2.31,5.01,0.6,4.81,0.25,5.74],
          [1.28,3.76,0.08,5.34,1.1,5,0.46,6.59,-1.98,7.75]
        ],
        "data2" : [[3.41,0.78,3.53,0.95,3.91,0.92,3.32,0.63,3.57,0.66],
          [3.58,0.82,3.42,0.03,3.25,0.91,3.48,0.3,3.3,0.65],
          [3,0.48,3.03,0.28,3.8,0.4,3.38,1,3.11,0.93],
          [3.61,0.72,3.04,0.97,3.54,0.71,3.58,0.05,3.34,0.13],
          [3.81,0.47,3.73,0.78,3.96,0.2,3.24,0.61,3.16,0.76],
          [0.54,0.47,0.83,0.78,0.92,0.99,0.54,0.64,0.74,0.37],
          [0.22,0.71,0.1,0.57,0.96,0.31,0.8,0.17,0.44,0.7],
          [0.58,0.09,0.21,0.84,0.3,0.05,0.5,0.77,0.85,0.66],
          [0.56,0.42,0.34,0.4,0.6,0.56,0.05,0.59,0.43,0.7],
          [0.3,4.24,0.89,4.28,0.78,4.26,0.21,4.26,0.39,4.37],
          [3.74,0.36,3.54,0.22,3.54,0.74,3.79,0.42,3.15,0.75],
          [3.4,0.46,3.19,0.46,3.77,0.5,3.67,0.54,3.9,0.01],
          [3.28,0.68,3.48,0.62,3.57,0.32,3.55,0.49,3.43,0.5],
          [3.62,0.68,3.37,0.51,3.36,0.15,3.13,0.53,3.44,0.95],
          [3.7,0.41,3.92,0.86,3.42,0.7,3.62,0.03,3.85,0.4],
          [0.9,4.83,0.74,4.16,0.9,4.46,0.71,4.2,0.72,4.55],
          [0.97,4.81,0.65,4.62,0.88,4.49,0.17,4.57,0.9,4.1],
          [0.24,4.02,0.83,4.52,0.96,4.62,0.02,4.9,0.07,4.25],
          [0.11,4.1,0.33,4.56,0.4,4.77,0.24,4.48,0.49,4.9],
          [0.48,4.36,0.67,4.93,0.25,4.67,0.29,4.01,0.02,4.94]
        ],
        "smps" : ["Sample1","Sample2","Sample3","Sample4","Sample5","Sample6","Sample7","Sample8","Sample9","Sample10"],
        "vars" : ["Var1","Var2","Var3","Var4","Var5","Var6","Var7","Var8","Var9","Var10","Var11","Var12","Var13","Var14","Var15","Var16","Var17","Var18","Var19","Var20"]
     },
     "z" : {
        "GeneClass" : ["Path1","Path1","Path1","Path1","Path1","Path1","Path1","Path1","Path1","Path1","Path2","Path2","Path2","Path2","Path3","Path3","Path3","Path3","Path3","Path3"],
        "ProteinA" : [2.82,0.32,4.89,3.27,5.7,6.41,0.48,1.98,7.04,4.18,2.31,3.52,1.72,6.51,5.44,1.28,0.46,4.32,1.39,7.77]
     }
  }
  
  
  <-- Create the configuration for the graph -->
  var config = {
     "dendrogramHeight":"50",
     "graphType":"Heatmap",
     "guides":"true",
     "heatmapIndicatorPosition":"top",
     "legendKeyBackgroundBorderColor":"rgba(255,255,255,0)",
     "legendKeyBackgroundColor":"rgba(255,255,255,0)",
     "objectBorderColor":"rgb(0,0,0)",
     "samplesClustered":"true",
     "showSmpDendrogram":"false",
     "showVarDendrogram":"false",
     "sizeBy":"Size",
     "sizeByData":"data2",
     "title":"Bubble Heatmap Plot",
     "variablesClustered":"true"
  }
  

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


</script>