/
multiple_clustergrams.html
174 lines (131 loc) · 5.78 KB
/
multiple_clustergrams.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
<!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>