multiple_clustergrams.html

<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <!-- <base href='/clustergrammer/'> -->

    <title>Clustergrammer</title>

    <link rel="shortcut icon" href="static/icons/graham_cracker.ico"  type="image/x-icon">

    <link rel="stylesheet" href="lib/css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="lib/css/bootstrap.css">
    <link rel="stylesheet" type="text/css" href="css/custom.css">

    <style type="text/css">

      /* Sticky footer styles
      -------------------------------------------------- */
      html, body {
        max-width: 100%;
        overflow-x:hidden;
      }

      /* Wrapper for page content to push down footer */
      /* Negative indent footer by its height */
      /* Pad bottom by footer height */
      #wrap {
        min-height: 100%;
        min-width: 800px;
      }

      /* Set the fixed height of the footer here */
      #footer {
        height: 60px;
        background-color: #f5f5f5;
        text-align: center;
        background-color: #f5f5f5;
        font-size: 13px;
        padding-left:10px;
        padding-right:10px;
        margin-top: 50px;
      }

      #footer_text_container{
        margin-top: 10px;
        margin-bottom: 0px;
        min-width: 950px;
      }

      .clustergrammer_container{
        width: 1140px;
        height: 750px;
        margin-bottom: 10px;
        overflow: hidden;
      }

      .viz_title{
        width: 100%;
        font-size: 30px;
        font-weight: 300;
        /*margin-left: -10px;*/
        margin-top: 10px;
        margin-bottom: 20px;
        border-bottom: 1px solid #DEDEDE;
      }

      .viz_description{
        font-size: 16px;
        font-weight: 300;
        margin-top: 10px;
        margin-left: 5px;
        margin-right: 20px;
        text-align: justify;
        margin-bottom: 30px;
      }

    </style>

</head>

<body>

  <div id="wrap" class='container'>

    <div class='row viz_title' id='clustergram_title'>
    Clustergrammer
    </div>

    <div class="row" >
      <div id='container-id-1' class='clustergrammer_container'>
          <div class='wait_message'>Please wait ...</div>
      </div>
    </div>

    <div class='row viz_description' id='clustergram_desc'>
      <p>Above is a clustergram/heatmap visualization of your input matrix. The rows and columns have been hierarchically clustered, using the Scipy library in Python, using cosine distance and average linkage. Red/blue cells in the matrix represent positive/negative values in your matrix. The visualization interactive (zoomable, reorderable, filterable) and shareable - the current URL is permanent and shareable.</p>
    </div>


    <div class='row viz_title' id='col_sim_title'>
      Column Similarity Matrix
    </div>

    <div class="row" >
      <div id='container-id-2' class='clustergrammer_container sim_mat_container'>
          <div class='wait_message'>Please wait ...</div>
      </div>
    </div>

    <div class='row viz_description' id='col_sim_desc'>
      <p>Above is a similarity matrix of the columns in your input matrix. The cells in the matrix represent the similarity between columns, where red/blue represent positive/negative similarity (measured as 1 - cosine-distance). Similarity matrices offer a more detailed view of the similarities and differences between rows/columms, e.g. blue cells indicate data points that behave 'oppositely' and this can not be easily seen in a clustergram/heatmap view.</p>
    </div>


    <div class='row viz_title' id='row_sim_title'>
      Row Similarity Matrix
    </div>

    <div class="row" >
      <div id='container-id-3' class='clustergrammer_container sim_mat_container'>
          <div class='wait_message'>Please wait ...</div>
      </div>
    </div>

    <div class='row viz_description' id='row_sim_desc'>
      <p>Above is a similarity matrix of the rows in your input matrix. The cells in the matrix represent the similarity between rows, where red/blue represent positive/negative similarity (measured as 1 - cosine-distance). </p>
    </div>


  </div>

  <div id='footer'>
    <div class="row" >
      <div id='footer_text_container' class="col-xs-12 footer_section">
        <div class="text-muted footer_text">Clustergrammer is being developed by the <a class='blue_links' target="_blank"  href="http://icahn.mssm.edu/research/labs/maayan-laboratory">Ma'ayan Lab</a> at the <a class='blue_links' target="_blank"   href="http://icahn.mssm.edu/">Icahn School of Medicine at Mount Sinai</a>  for the <a target="_blank" href="http://lincs-dcic.org/">BD2K-LINCS DCIC</a> and the <a target="_blank" href="http://commonfund.nih.gov/idg/overview">KMC-IDG</a>  </div>
        <!-- DCIC, BD2K, KMC, and GitHub -->
        <div class="text-muted footer_text">
        and is an open source project available on GitHub: <a class='blue_links' target="_blank"  href="https://github.com/MaayanLab/clustergrammer">Clustergrammer</a> and <a class='blue_links' target="_blank"  href="https://github.com/cornhundred/clustergrammer.js">Clustergrammer.js</a>

        </div>

      </div>
    </div>
  </div>


  <!-- Required JS Libraries -->
  <script src="lib/js/d3.js"></script>
  <script src="lib/js/jquery-1.11.2.min.js"></script>
  <script src="lib/js/underscore-min.js"></script>
  <script src="lib/js/bootstrap.min.js"></script>

  <!-- Clustergrammer JS -->
  <script src='clustergrammer.js'></script>


  <!-- optional modules -->
  <script src='js/Enrichrgram.js'></script>
  <script src='js/hzome_functions.js'></script>
  <script src='js/send_to_Enrichr.js'></script>

  <!-- make clustergrams -->
  <script src='js/load_multiple_clustergrams.js'></script>

</body>