clustergrammer
Version:
This is a clustergram implemented in D3.js. I started from the example http://bost.ocks.org/mike/miserables/ and added the following features
174 lines (130 loc) • 5.88 kB
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="lib/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>
<!-- make clustergrams -->
<script src='js/load_multiple_clustergrams.js'></script>
</body>