/
index.html
181 lines (143 loc) · 7.61 KB
/
index.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
174
175
176
177
178
179
180
<!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 CCLE Explorer</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;*/
/*max-width: 1000px;*/
width: 1000px;
}
/* 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: 1010px;
height: 750px;
margin-bottom: 10px;
overflow: hidden;
}
#tree_container{
margin-top: 5px;
margin-bottom: 1-px;
margin-left: 10px;
width: 1000px;
height: 565px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: 300;
}
.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: -15px;
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 CCLE Explorer
</div>
<div class='row viz_description' id='clustergram_desc'>
<p>The Clustergrammer CCLE Explorer enables users to browse relative mRNA expression data for cancer cell lines from the <a href="https://software.broadinstitute.org/software/cprg/?q=node/11">Cancer Cell Line Encyclopedia (CCLE)</a> by tissue of origin using Clustergrammer. Click on a tissue type to view a clustergram of the top 250 most variable genes within a tissue - initially Bone tissue expression is shown. These clustergrams can be used to identify sub-category behavior within tissues and are pre-loaded with enrichment analysis from Enrichr for Gene Ontology Biological Process. Also, see the <a href="http://nbviewer.jupyter.org/github/MaayanLab/CCLE_Clustergrammer/blob/master/notebooks/Clustergrammer_CCLE_Notebook.ipynb">Clustergrammer_CCLE_notebook.ipynb</a> for an example of using the <a href="http://clustergrammer.readthedocs.io/clustergrammer_widget.html">Clustergrammer-Widget</a> within a interactive <a href="http://jupyter.org/">Jupyter</a> notebook (rendered using <a href="https://nbviewer.jupyter.org/">NBviewer</a>) to explore CCLE gene expression.</p>
</div>
<div class="row" >
<div id='tree_container'>
</div>
</div>
<div id='tissue_title' class='row viz_title'>
Tissue Expression
</div>
<div class="row" >
<div id='intra_tissue_container' class='clustergrammer_container'>
<div class='wait_message'>Please wait ...</div>
</div>
</div>
<!--
<div class="row" >
<div id='inter_tissue_container' class='clustergrammer_container'>
<div class='wait_message'>Please wait ...</div>
</div>
</div>
-->
<div class='row viz_description' id='col_sim_desc'>
<p>
Above is a heatmap of the top 250 most variable genes within a given tissue in the CCLE. This can be useful for identifying tissue sub-types based on expression. The cells in the matrix represent Z-score normalized expression of a given gene in the tissue. Tissues (columns) and genes (rows) have been hierarchically clustered using average linkage and cosine distance. Cell lines from the CCLE have their meta-data encoded as <a href="http://clustergrammer.readthedocs.io/interacting_with_viz.html#interactive-categories">interactive categories</a> including: tissue, histology, sub-histology, and gender. Often cell lines cluster based on their histology or sub-histology. Click the treemap to bring up different tissues.
</p>
<p>
The clustergram has been pre-loaded with enrichment analysis for Gene Ontology Biological Process from <a href="http://amp.pharm.mssm.edu/Enrichr/">Enrichr</a>. Users can use the <a href="http://clustergrammer.readthedocs.io/biology_specific_features.html#enrichment-analysis">Enrichrgram</a> feature to calculate enrichment using different biological libraries (e.g. find transcription factors that specifically target your set of genes using ChEA) by clicking the red Enrichr logo at the top left of the clustergram or can export their genes to Enrichr using the <a href="http://clustergrammer.readthedocs.io/interacting_with_viz.html#interactive-dendrogram">interactive dendrogram</a>. Please see <a href="http://clustergrammer.readthedocs.io/getting_started.html">Getting Started</a> or <a href="http://clustergrammer.readthedocs.io/interacting_with_viz.html#">Interacting with the Visualization</a> for more information about Clustergrammer.
</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"> <a href="http://amp.pharm.mssm.edu/clustergrammer/">Clustergrammer</a> 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.min.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_ccle_clustergram.js'></script>
<script src='js/ccle_tree.js'></script>
</body>