anchor.diff:                          <br><select id='data_type_copy_no'></select>
                           <br><br><br>
                           <button onclick="generateScatterPlots()" style='width:80px;height:30px;border-radius:15px;'>
  -                            <font style='font-size: 14px;color:white;font-weight: 5px;'> GO >> </font>
  +                           <font style='font-size: 14px;color:white;font-weight: 5px;'> GO >> </font>
                           </button>
                       </td>
                       <tr><td style='height:150px;'></td>
  
positive.code: 
  <script>
  
  function fetchData() {
      gene = document.getElementById("genes").value;
      data_type_copy_no = document.getElementById("data_type_copy_no").value;
      data_type_mrna = document.getElementById("data_type_mrna").value;
  
      var url_base = "webservice.do?cmd=getProfileData&case_set_id=<% out.print(case_set_id); %>&gene_list=" + gene + "&genetic_profile_id=";
      var urls = [
          url_base + "<% out.print(cancer_study_id); %>_" + genetic_profile_mutations[0], //mutations
          url_base + "<% out.print(cancer_study_id); %>_" + data_type_copy_no, //copy no
          url_base + "<% out.print(cancer_study_id); %>_" + data_type_mrna, //mrna
          url_base + "<% out.print(cancer_study_id); %>_" + genetic_profile_rppa[0], //rppa
          url_base + "<% out.print(cancer_study_id); %>_" + genetic_profile_dna_methylation[0] //dna methylation
      ];
  
      for (var i = 0; i < urls.length; i++) {
          $.ajax({
              url: urls[i],
              type: 'get',
              dataType: 'text',
              async: false,
              success: function(data) {
                  if (data != "") {
                      if ( data.indexOf("No genetic profile available") == -1) {  //Profile Exists
                          tmp_sections = data.split(/\n/);
                          //Get Case Set
                          tmp_case_set = String(tmp_sections[3]).trim().split(/\s+/);
                          for (var j = 0 ; j < tmp_case_set.length; j ++ ) {
                              case_set[j] = tmp_case_set[j + 2];
                          }
                          //Get profile data (Filter the headers)
                          var profile_data = [];
                          var tmp_profile_data = String(tmp_sections[4]).trim().split(/\s+/);
                          for (var profileDataIndex = 0 ; profileDataIndex < tmp_profile_data.length; profileDataIndex ++ ) {
                              profile_data[profileDataIndex] = tmp_profile_data[profileDataIndex + 2];
                          }
                          //Fill in Result Data Set
                          copyData(result_set[i], profile_data);
                      }
                  } else {
                      alert("ERROR Fetching Data.");
                  }
              }
          });
      }
      //Distribute Data
      copyData(mutations, result_set[0]);
      copyData(copy_no, result_set[1]);
      copyData(mrna, result_set[2]);
      copyData(rppa, result_set[3]);
      copyData(dna_methylation, result_set[4]);
  }
  
  
  function drawSideBar() {
      //Plot Type
      for ( var m = 0; m < plot_type_list.length; m++) {
          $('#plot_type').append("<option value='" + plot_type_list[m][0] + "'>" + plot_type_list[m][1] + "</option>");
      }
      //Copy Number Type
      for ( var j = 0; j < genetic_profile_copy_no.length; j++ ) {
          $('#data_type_copy_no').append("<option value='" + genetic_profile_copy_no[j][0] + "'>" + genetic_profile_copy_no[j][1] + "</option>");
      }
      //mRNA Type
      for ( var k = 0; k < genetic_profile_mrna.length; k++ ) {
          $('#data_type_mrna').append("<option value='" + genetic_profile_mrna[k][0] + "'>" + genetic_profile_mrna[k][1] + "</option>");
      }
      fetchData();
      drawScatterPlots(copy_no, mrna, mutations, 1);
  }
  
  
  function generateScatterPlots() {
      fetchData();
      var tmp_plot_type = document.getElementById("plot_type").value;
      if (tmp_plot_type == plot_type_list[0][0]) {    //"mrna_vs_copy_no"
          drawScatterPlots(copy_no, mrna, mutations, 1);
      } else if (tmp_plot_type == plot_type_list[1][0]) {  //"mrna_vs_dna_mythelation"
          drawScatterPlots(dna_methylation, mrna, copy_no, 2);
      } else if (tmp_plot_type == plot_type_list[2][0]) {  //"rppa_protein_level_vs_mrna"
          drawScatterPlots(mrna, rppa, copy_no, 3);
      }
  }
  
  function drawScatterPlots(xData, yData, zData, type) {
      //Create Canvas
      $('#plots_tab').empty();
      var w = 700;
      var h = 600;
      var svg = d3.select("#plots_tab")
              .append("svg")
              .attr("width", w)
              .attr("height", h);
      //Prepare DataSet
      var xLegend;
      var yLegend;
      var dataset = [];
  
      if (type == 1) {    //mrna_vs_copy_no
          var index = 0;
          for( var i = 0; i<xData.length; i++) {
              //Skip NaN entries
              if ((xData[i] == "NaN") || (yData[i] == "NaN")) {
                  continue;
              }
              //TODO: Mutations Mapping
              if (zData[i] != "NaN") {
                  zData[i] = "type1";
              } else {
                  zData[i] = "non";
              }
              dataset[index] = [xData[i], yData[i], zData[i]];
              index += 1;
          }
      } else if (type == 2) {  // mrna_vs_dna_mythelation
          var index = 0;
          for( var i = 0; i<xData.length; i++) {
              //Skip NaN entries
              if ((xData[i] == "NaN") || (yData[i] == "NaN")) {
                  continue;
              }
              dataset[index] = [xData[i], yData[i], zData[i]];
              index += 1;
          }
      } else if (type == 3) {  //rppa_protein_level_vs_mrna
          var index = 0;
          for( var i = 0; i<xData.length; i++) {
              //Skip NaN entries
              if ((xData[i] == "NaN") || (yData[i] == "NaN")) {
                  continue;
              }
              dataset[index] = [xData[i], yData[i], zData[i]];
              index += 1;
          }
      }
  
      //-----------------tmp------//d3 min and max do NOT function well???
      var tmp_xData = [];
      var tmp_xIndex = 0;
      for (var j=0; j< xData.length; j++){
          if (xData[j] != "NaN") {
              tmp_xData[tmp_xIndex] = xData[j];
              tmp_xIndex += 1;
          }
      }
      var min_x = Math.min.apply(Math, tmp_xData);
      var max_x = Math.max.apply(Math, tmp_xData);
      var edge_x = (max_x - min_x) * 0.2;
  
      var tmp_yData = [];
      var tmp_yIndex = 0;
      for (var j=0; j< yData.length; j++){
          if (yData[j] != "NaN") {
              tmp_yData[tmp_yIndex] = yData[j];
              tmp_yIndex += 1;
          }
      }
      var min_y = Math.min.apply(Math, tmp_yData);
      var max_y = Math.max.apply(Math, tmp_yData);
      var edge_y = (max_y - min_y) * 0.2;
      //-------------------tmp---------------------------
  
      //Define scale functions
      var padding = 200;
      var xScale = d3.scale.linear()
              .domain([min_x - edge_x, max_x + edge_x])
              .range([100, 600]);
      var yScale = d3.scale.linear()
              .domain([min_y - edge_y, max_y + edge_y])
              .range([520, 20]);
      //Define Axis
      var xAxis = d3.svg.axis()
              .scale(xScale)
              .orient("bottom")
      //.ticks(5)
  
      var yAxis = d3.svg.axis()
              .scale(yScale)
              .orient("left");
      //.ticks(10);
      //Create SVG Axis
  
      //Axis Annotation for GISTIC
      if ( type == 1 && data_type_copy_no == "gistic") {
          var textSet = ["Homdel", "Hetloss", "Diploid", "Gain", "Amp"];
          var ticksTextSet = [];
          var tmp_ticks_text_index = 0;
          for (var i = min_x + 2; i < max_x + 3; i++) {
              ticksTextSet[tmp_ticks_text_index] = textSet[i];
              tmp_ticks_text_index += 1;
          }
          svg.append("g")
                  .attr("class","axis")
                  .attr("transform", "translate(0, 520)")
                  .call(xAxis.ticks(ticksTextSet.length))
                  .selectAll("text")
                  .data(ticksTextSet)
                  .style("text-anchor", "end")
                  .attr("dx", "-.8em")
                  .attr("dy", ".15em")
                  .attr("transform", function(d) {return "rotate(-65)"})
                  .text(function(d){return d})
      } else {
          svg.append("g")
                  .attr("class","axis")
                  .attr("transform", "translate(0, 520)")
                  .call(xAxis);
      }
  
      svg.append("g")
              .attr("class","axis")
              .attr("transform", "translate(0, 20)")
              .call(xAxis.orient("bottom").ticks(0));
  
      svg.append("g")
              .attr("class","axis")
              .attr("transform", "translate(100, 0)")
              .call(yAxis)
  
      svg.append("g")
              .attr("class","axis")
              .attr("transform", "translate(600, 0)")
              .call(yAxis.orient("left").ticks(0));
  
      //Create SVG dots
      var symbol = d3.scale.ordinal().range(["circle", "triangle-up", "cross", "diamond", "square"]);
      var mutationTypes = ["non", "type1"];
      var gisticTypes = ["Homdel", "Hetloss", "Diploid", "Gain", "Amp"];
      var fillTypes = ["none", "#F78181", "#04B4AE", "#585858", "#FFBF00"];
      var strokeTypes = ["#2E9AFE", "#F78181", "#04B4AE", "#585858", "#FFBF00"];
  
      svg.selectAll("path")
              .data(dataset)
              .enter()
              .append("svg:path")
              .attr("transform", function(d) { return "translate(" + (xScale(d[0]) + (Math.random() * (20))) + ", " + yScale(d[1]) + ")";})
              .attr("d", d3.svg.symbol()
                      .size(40)
                      .type( function (d) {
                          switch (d[2]) {
                              case mutationTypes[0]: return symbol(0);
                              case mutationTypes[1]: return symbol(1);
                              default: return "circle";
                          }
                      }
              ))
              .attr("fill", function(d) {
                  switch (d[2]) {
                      //Mutations
                      case mutationTypes[0]: return fillTypes[0];
                      case mutationTypes[1]: return fillTypes[1];
                      default: return "none";
                  }
              })
              .attr("stroke", function(d) {
                  switch (d[2]) {
                      case mutationTypes[0]: return strokeTypes[0];
                      case mutationTypes[1]: return strokeTypes[1];
                      case "-2": return strokeTypes[0];
                      case "-1": return strokeTypes[1];
                      case "0": return strokeTypes[2];
                      case "1": return strokeTypes[3];
                      case "2": return strokeTypes[4];
                      default: return "black";
                  }
              })
              .attr("stroke-width", function(d) {
                  if (type == 1) {
                      return "1";
                  } else {
                      return "1.2";
                  }
              });
  
      //Create the legend
      if (type == 1) {  //Legend for Mutations
          var legend = svg.selectAll(".legend")
                  .data(mutationTypes)
                  .enter().append("g")
                  .attr("class", "legend")
                  .attr("transform", function(d, i) { return "translate(110, " + (30 + i * 15) + ")"; });
          legend.append("path")
                  .attr("width", 18)
                  .attr("height", 18)
                  .attr("d", d3.svg.symbol()
                          .size(40)
                          .type(function(d, i) {
                              switch(i) {
                                  case 0: return symbol(0);
                                  case 1: return symbol(1);
                              };
                          })
                  )
                  .attr("fill", function (d, i) {
                      switch (i) {
                          case 0: return fillTypes[0];
                          case 1: return fillTypes[1];
                      }
                  })
                  .attr("stroke", function (d, i) {
                      switch (i) {
                          case 0: return strokeTypes[0];
                          case 1: return strokeTypes[1];
                      }
                  })
          legend.append("text")
                  .attr("dx", ".75em")
                  .attr("dy", ".35em")
                  .style("text-anchor", "front")
                  .text(function(d, i) {
                      switch (i) {
                          case 0: return mutationTypes[0];
                          case 1: return mutationTypes[1];
                      }
                  });
      } else {  //Legend for Gistic Copy Number
          var legend = svg.selectAll(".legend")
                  .data(gisticTypes)
                  .enter().append("g")
                  .attr("class", "legend")
                  .attr("transform", function(d, i) { return "translate(110, " + (30 + i * 15) + ")"; });
          legend.append("path")
                  .attr("width", 18)
                  .attr("height", 18)
                  .attr("d", d3.svg.symbol()
                          .size(40)
                          .type(function(d, i) {
                              return "circle";
                          })
                  )
                  .attr("fill", function (d, i) {
                      return "none";
                  })
                  .attr("stroke", function (d, i) {
                      switch (i) {
                          case 0: return strokeTypes[0];
                          case 1: return strokeTypes[1];
                          case 2: return strokeTypes[2];
                          case 3: return strokeTypes[3];
                          case 4: return strokeTypes[4];
                      }
                  })
                  .attr("stroke-width", function (d, i) {
                      return 1.2;
                  })
          legend.append("text")
                  .attr("dx", ".75em")
                  .attr("dy", ".35em")
                  .style("text-anchor", "front")
                  .text(function(d, i) {
                      switch (i) {
                          case 0: return gisticTypes[0];
                          case 1: return gisticTypes[1];
                          case 2: return gisticTypes[2];
                          case 3: return gisticTypes[3];
                          case 4: return gisticTypes[4];
                      }
                  });
      }
  
  }
  
  function copyData( desArray, oriArray) {
      var desArrayIndex = 0;
      for ( var tmpIndex = 0; tmpIndex < oriArray.length; tmpIndex ++ ){
          if (oriArray[tmpIndex] != "" && oriArray[tmpIndex] != null ) {
              desArray[desArrayIndex] = oriArray[tmpIndex];
              desArrayIndex += 1;
          }
      }
  }
  window.onload=drawSideBar();
  </script>
  
  <%!
  
negative.code:     ];
  </script>
  
      <%
          String cancer_study_id = (String)request.getParameter("cancer_study_id");
          String case_set_id = (String)request.getParameter("case_set_id");
          String[] gene_list = ((String)request.getParameter("gene_list")).split("\\s+");
      %>
  
  <div class="section" id="plots">
      <table >
  