<!-- 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 = {
     "y" : {
        "data" : [
          [3.6,79],[1.8,54],[3.333,74],[2.283,62],[4.533,85],[2.883,55],[4.7,88],[3.6,85],[1.95,51],[4.35,85],[1.833,54],[3.917,84],[4.2,78],[1.75,47],[4.7,83],[2.167,52],[1.75,62],[4.8,84],[1.6,52],[4.25,79],[1.8,51],[1.75,47],[3.45,78],[3.067,69],[4.533,74],[3.6,83],[1.967,55],[4.083,76],[3.85,78],[4.433,79],[4.3,73],[4.467,77],[3.367,66],[4.033,80],[3.833,74],[2.017,52],[1.867,48],[4.833,80],[1.833,59],[4.783,90],[4.35,80],[1.883,58],[4.567,84],[1.75,58],[4.533,73],[3.317,83],[3.833,64],[2.1,53],[4.633,82],[2,59],[4.8,75],[4.716,90],[1.833,54],[4.833,80],[1.733,54],[4.883,83],[3.717,71],[1.667,64],[4.567,77],[4.317,81],[2.233,59],[4.5,84],[1.75,48],[4.8,82],[1.817,60],[4.4,92],[4.167,78],[4.7,78],[2.067,65],[4.7,73],[4.033,82],[1.967,56],[4.5,79],[4,71],[1.983,62],[5.067,76],[2.017,60],[4.567,78],[3.883,76],[3.6,83],[4.133,75],[4.333,82],[4.1,70],[2.633,65],[4.067,73],[4.933,88],[3.95,76],[4.517,80],[2.167,48],[4,86],[2.2,60],[4.333,90],[1.867,50],[4.817,78],[1.833,63],[4.3,72],[4.667,84],[3.75,75],[1.867,51],[4.9,82],[2.483,62],[4.367,88],[2.1,49],[4.5,83],[4.05,81],[1.867,47],[4.7,84],[1.783,52],[4.85,86],[3.683,81],[4.733,75],[2.3,59],[4.9,89],[4.417,79],[1.7,59],[4.633,81],[2.317,50],[4.6,85],[1.817,59],[4.417,87],[2.617,53],[4.067,69],[4.25,77],[1.967,56],[4.6,88],[3.767,81],[1.917,45],[4.5,82],[2.267,55],[4.65,90],[1.867,45],[4.167,83],[2.8,56],[4.333,89],[1.833,46],[4.383,82],[1.883,51],[4.933,86],[2.033,53],[3.733,79],[4.233,81],[2.233,60],[4.533,82],[4.817,77],[4.333,76],[1.983,59],[4.633,80],[2.017,49],[5.1,96],[1.8,53],[5.033,77],[4,77],[2.4,65],[4.6,81],[3.567,71],[4,70],[4.5,81],[4.083,93],[1.8,53],[3.967,89],[2.2,45],[4.15,86],[2,58],[3.833,78],[3.5,66],[4.583,76],[2.367,63],[5,88],[1.933,52],[4.617,93],[1.917,49],[2.083,57],[4.583,77],[3.333,68],[4.167,81],[4.333,81],[4.5,73],[2.417,50],[4,85],[4.167,74],[1.883,55],[4.583,77],[4.25,83],[3.767,83],[2.033,51],[4.433,78],[4.083,84],[1.833,46],[4.417,83],[2.183,55],[4.8,81],[1.833,57],[4.8,76],[4.1,84],[3.966,77],[4.233,81],[3.5,87],[4.366,77],[2.25,51],[4.667,78],[2.1,60],[4.35,82],[4.133,91],[1.867,53],[4.6,78],[1.783,46],[4.367,77],[3.85,84],[1.933,49],[4.5,83],[2.383,71],[4.7,80],[1.867,49],[3.833,75],[3.417,64],[4.233,76],[2.4,53],[4.8,94],[2,55],[4.15,76],[1.867,50],[4.267,82],[1.75,54],[4.483,75],[4,78],[4.117,79],[4.083,78],[4.267,78],[3.917,70],[4.55,79],[4.083,70],[2.417,54],[4.183,86],[2.217,50],[4.45,90],[1.883,54],[1.85,54],[4.283,77],[3.95,79],[2.333,64],[4.15,75],[2.35,47],[4.933,86],[2.9,63],[4.583,85],[3.833,82],[2.083,57],[4.367,82],[2.133,67],[4.35,74],[2.2,54],[4.45,83],[3.567,73],[4.5,73],[4.15,88],[3.817,80],[3.917,71],[4.45,83],[2,56],[4.283,79],[4.767,78],[4.533,84],[1.85,58],[4.25,83],[1.983,43],[2.25,60],[4.75,75],[4.117,81],[2.15,46],[4.417,90],[1.817,46],[4.467,74]
        ],
        "smps" : ["eruptions","waiting"],
        "vars" : ["R1","R2","R3","R4","R5","R6","R7","R8","R9","R10","R11","R12","R13","R14","R15","R16","R17","R18","R19","R20","R21","R22","R23","R24","R25","R26","R27","R28","R29","R30","R31","R32","R33","R34","R35","R36","R37","R38","R39","R40","R41","R42","R43","R44","R45","R46","R47","R48","R49","R50","R51","R52","R53","R54","R55","R56","R57","R58","R59","R60","R61","R62","R63","R64","R65","R66","R67","R68","R69","R70","R71","R72","R73","R74","R75","R76","R77","R78","R79","R80","R81","R82","R83","R84","R85","R86","R87","R88","R89","R90","R91","R92","R93","R94","R95","R96","R97","R98","R99","R100","R101","R102","R103","R104","R105","R106","R107","R108","R109","R110","R111","R112","R113","R114","R115","R116","R117","R118","R119","R120","R121","R122","R123","R124","R125","R126","R127","R128","R129","R130","R131","R132","R133","R134","R135","R136","R137","R138","R139","R140","R141","R142","R143","R144","R145","R146","R147","R148","R149","R150","R151","R152","R153","R154","R155","R156","R157","R158","R159","R160","R161","R162","R163","R164","R165","R166","R167","R168","R169","R170","R171","R172","R173","R174","R175","R176","R177","R178","R179","R180","R181","R182","R183","R184","R185","R186","R187","R188","R189","R190","R191","R192","R193","R194","R195","R196","R197","R198","R199","R200","R201","R202","R203","R204","R205","R206","R207","R208","R209","R210","R211","R212","R213","R214","R215","R216","R217","R218","R219","R220","R221","R222","R223","R224","R225","R226","R227","R228","R229","R230","R231","R232","R233","R234","R235","R236","R237","R238","R239","R240","R241","R242","R243","R244","R245","R246","R247","R248","R249","R250","R251","R252","R253","R254","R255","R256","R257","R258","R259","R260","R261","R262","R263","R264","R265","R266","R267","R268","R269","R270","R271","R272"]
     }
  }
  
  
  <-- Create the configuration for the graph -->
  var config = {
     "contourType":"normal",
     "graphType":"Scatter2D",
     "showContourDataPoints":"true",
     "showContourLevel":"false"
  }
  

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


  
  <-- Functions after rendering graph -->
  cX.createContour();
  
</script>