-
Notifications
You must be signed in to change notification settings - Fork 22
/
documentation.html
394 lines (369 loc) · 16.4 KB
/
documentation.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
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport"
content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1">
<title>Morpheus - Documentation</title>
<link rel="stylesheet" href="css/morpheus-latest.min.css">
<script type="text/javascript" src="js/morpheus-external-latest.min.js"></script>
<script src="js/morpheus-latest.min.js"></script>
<script src="js/morpheus.js"></script>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<style>
ul {
margin: 0;
padding-left: 4px;
list-style-type: none;
}
.bar {
fill: steelblue;
}
.axis path, .axis line {
fill: none;
stroke: black;
shape-rendering: crispEdges;
}
.tick {
font-size: 12px;
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-xs-12 col-lg-8 col-lg-offset-1">
<svg width="32px" height="32px">
<g>
<rect x="0" y="0" width="32" height="14" style="fill:#ca0020;stroke:none"/>
<rect x="0" y="18" width="32" height="14" style="fill:#0571b0;stroke:none"/>
</g>
</svg>
<h2 style="padding-left: 4px; display:inline-block;">Documentation</h2>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-lg-8 col-lg-offset-1">
The core interface in Morpheus is a heat map, in which a matrix of values is mapped to a
matrix of colors. Heat maps are one of the most widely used visualizations in the
sciences
because they allow you to find patterns in your data, compact a large amount of
information
into a small space, and are a natural representation of a matrix.
</div>
</div>
<div class="row">
<div class="col-xs-12 col-lg-8 col-lg-offset-1">
<h3 id="import">Import Data</h3>
<p>Select File > Open to import data.
<h4>Matrices</h4>
Matrices can be imported from
GCT 1.3, <a target="_blank"
href="http://www.broadinstitute.org/cancer/software/genepattern/gp_guides/file-formats/sections/gct">GCT
1.2</a>, <a target="_blank"
href="https://wiki.nci.nih.gov/display/TCGA/Mutation+Annotation+Format+%28MAF%29+Specification">MAF</a>,
<a target="_blank"
href="http://www.broadinstitute.org/cancer/software/gsea/wiki/index.php/Data_formats#GMT:_Gene_Matrix_Transposed_file_format_.28.2A.gmt.29">GMT</a>,
a text file, an Excel spreadsheet, or the system clipboard.
<h4>Annotations</h4>Add row/column annotations from a text file, Excel file, GMT file, or the system clipboard.
<h4>Sessions</h4>
Load saved Morpheus sessions or create a configuration file as described <a
href="configuration.html">here</a>.
<h4>Dendrograms</h4>
Dendrograms created by external programs can be imported in Newick format.
</p>
<h3 id="color-scheme">Color Scheme</h3>
<p>Select View > Options to edit the color scale. Typically with gene expression data,
values in the heat map are mapped to colors
using the minimum and maximum of each row independently.
With z-scored data, categorical, or ratio data, a fixed scale should be used.
<br/><a target="_blank" href="https://youtu.be/zIEHPaz7PhY">Video <i
class="fa fa-video-camera" aria-hidden="true"></i></a>
</p>
<p>
Color schemes can also be customized to easily view multiple data types.
<br/><a target="_blank" href="https://youtu.be/8gfhXvANNtE">Video <i
class="fa fa-video-camera" aria-hidden="true"></i></a>
</p>
<p>
An additional matrix can be overlayed on top of the existing matrix by opening a new
matrix and selecting "Overlay onto current dataset." Data from the new matrix
can be viewed with additional parameters such as size or shape by selecting
conditional rendering.
</p>
<h3 id="annotation-display">Annotation Display</h3>
<p>Right-click on a annotation header to change how an annotation is displayed.
Annotations can be displayed as text, colors, or bar charts.</p>
<h3 id="calculated-annotation">Calculated Annotation</h3>
<p>Select Tools > Create Calculated Annotation to create a calculated annotation along
the rows or columns. For example: Enter "MAD" for the
"Annotation name". Enter "MAD()"
for
"Formula" and click "OK". A new row annotation named "MAD" will appear to the right
of
the heat map. <br/><a target="_blank" href="https://youtu.be/-qWn0zDC4iA">Video <i
class="fa fa-video-camera" aria-hidden="true"></i></a>
</p>
<h3 id="filter">Filter</h3>
<p>Rows and columns can be filtered to display a subset of the data by clicking the
Tools > Filter. For numeric data, you can keep the top highest or lowest values
for an annotation or a range of values.
<br/><a target="_blank" href="https://youtu.be/BnPqHi3Qs_A">Video <i
class="fa fa-video-camera" aria-hidden="true"></i></a>
</p>
<h3 id="hierarchical-clustering">Hierarchical Clustering</h3>
<p>
Hierarchical clustering recursively merges objects based on their pair-wise
distance. Objects closest together are merged first, objects furthest apart are
merged last. The result is a tree structure, referred to as a dendrogram, where the
leaf nodes represent the original items and internal (higher) nodes represent the
merges that occurred.
Once the dendrogram is generated, a dotted line will appear that can be clicked and
dragged to adjust the cut of the clusters. Gaps (white space) are introduced in the heat
map between clusters that are created when cutting the dendrogram.
When there are lots of singleton clusters, the width of the heat
map can become too large. One way to solve this issue is by
"squishing" singleton clusters together as shown <a href="#" data-toggle="modal"
data-target="#dendrogramModal">here</a>.
<br/><a target="_blank" href="https://youtu.be/_3JX9BeQcIg">Video <i
class="fa fa-video-camera" aria-hidden="true"></i></a>
</p>
<h3 id="search">Search</h3>
<p>Type one or more search terms in
the
row/column search box. Blue tick marks will appear along the side or bottom scroll
bar indicating where the matches in the heat map are.
Hover the cursor over a tick mark to view the heat map at that data point without
having to scroll. To move the matching rows/columns to the top or side of the
matrix, click the
"Matches To Top" button next to
the search box.
<br/><a target="_blank" href="https://youtu.be/W1j8VSFle-8">Video <i
class="fa fa-video-camera" aria-hidden="true"></i></a>
</p>
<h3 id="new-heat-map">New Heat Map</h3>
<p>Slices of the selected data can be isolated from the rest of the
matrix to be viewed and manipulated independently. The sliced data will
appear in a new tab of the Morpheus window. Select Tools > New Heat Map to access
this functionality.
<br/><a target="_blank" href="https://youtu.be/-oQ62D30AEY">Video <i
class="fa fa-video-camera" aria-hidden="true"></i></a>
</p>
<h3 id="export">Export</h3>
<p>The dataset can be saved as a GCT file by selected File > Save Dataset.
An image can be saved as a PNG or SVG file by selecting File > Save Image.
A Morpheus session which saves the current state of your view can be saved by
selecting File > Save
Session.
Annotations or your selected dataset can also be copied from Morpheus.</p>
<h3 id="sort-group">Sort/Group</h3>
<p>Click on a column or row annotation header to sort by annotations. Shift-click to
add to existing sort. Double click
once along the rows/columns in the heat map to sort by
the matrix values in descending order,
double click twice to sort ascending, and
double click three times to order the data in <a href="#" data-toggle="modal"
data-target="#sortOrderModal">alternating
groups of ten</a> of most
similar and dissimilar items.</p>
<p>Select Tools > Sort/Group to group annotations in the heat map or to lock sort levels. Groupings add
whitespace to visually
separate distinct values of an annotation.
<br/><a target="_blank" href="https://youtu.be/ntWMLexeDMo">Video <i
class="fa fa-video-camera" aria-hidden="true"></i></a>
</p>
<p>Locking a sort level allows you to preserve a sort level even when other changes to sorting are made.</p>
<h3 id="zoom">Zoom</h3>
<p>
The matrix can be viewed with various degrees of detail by utilizing the Zoom
features
as well as the Fit To Window button which will allow the entire matrix to be viewed
within the designated window size.
<br/><a target="_blank" href="https://youtu.be/nZpwAk6VLWc">Video <i
class="fa fa-video-camera" aria-hidden="true"></i></a>
</p>
<h3 id="link">Link Rows And Columns</h3>
<p>
For square matrices, you can link the rows and columns so that whatever happens to
the rows, happens to the columns and vice versa.
<br/><a target="_blank" href="https://youtu.be/Ee31Phof6qE">Video <i
class="fa fa-video-camera" aria-hidden="true"></i></a>
</p>
<h3 id="charts">Charts</h3>
<p>Select rows and columns in the heat map to display charts that are linked to the
heat map selection by selecting Tools >
Chart. Various chart
types and parameters can be selected. The selected rows and columns can be changed
while
the chart window is open.</p>
<h3 id="nearest-neighbors">Nearest Neighbors</h3>
<p>Use Nearest Neighbors to find rows/columns that are similar to rows/columns of
interest.</p>
</div>
</div>
<div id="dendrogramModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="dendrogramModalLabel">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
aria-hidden="true">×</span></button>
<h4 class="modal-title" id="dendrogramModalLabel">"Squish" singleton clusters</h4>
</div>
<div class="modal-body">
<img style="width:100%;" src="doc-data/squished.gif">
</div>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div>
<div id="sortOrderModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="sortOrderModalLabel">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
aria-hidden="true">×</span></button>
<h4 class="modal-title" id="sortOrderModalLabel">A New Sort Order</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-xs-12">
<p>One way users navigate large tables or charts is by sorting.
Typically, users can sort data in ascending or descending order by
one or more variables of interest. But what if the user is
interested in seeing the bottom and the top of the sorted data
simultaneously? One way to achieve this is to define a "sliding
window" sort order in which we alternate between the top n most
similar and dissimilar items.</p>
<small>Infant mortality rate from
https://www.cia.gov/library/publications/the-world-factbook/rankorder/2091rank.html
</small>
<br/>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<label> <input name="sort" type="radio" value="asc"> Ascending</label>
<label><input
name="sort" type="radio" value="desc" checked> Descending </label>
<label><input
name="sort" type="radio" value="wind"> Sliding Window</label>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<div id="sortOrderChart"></div>
</div>
</div>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<div class="row">
<div class="col-xs-12 morpheus-footer"></div>
</div>
</div>
<script type="text/javascript">
new morpheus.HelpMenu().$el.appendTo($('.morpheus-footer'));
var sortOrderChart = function () {
var margin = {
top: 10,
right: 1,
bottom: 20,
left: 300
}, width = 700 - margin.left - margin.right, height = 2500 - margin.top
- margin.bottom;
$('sortOrderChart').empty();
var svg = d3.select('#sortOrderChart').append('svg').attr('width',
width + margin.left + margin.right).attr('height',
height + margin.top + margin.bottom).append('g').attr(
'transform',
'translate(' + margin.left + ',' + margin.top + ')');
d3.text('doc-data/rawdata_2091.txt', function (text) {
var data = d3.tsv.parseRows(text).map(function (row) {
return {
country: row[1],
rate: parseFloat(row[2])
};
});
var y = d3.scale.ordinal().rangeRoundBands([0, height], .1)
.domain(data.map(function (d) {
return d.country;
}));
var x = d3.scale.linear().range([0, width]).domain(
[
d3.min(data, function (d) {
return d.rate;
}), d3.max(data, function (d) {
return d.rate;
})]);
var xAxis = d3.svg.axis().scale(x).orient('bottom');
var yAxis = d3.svg.axis().scale(y).orient('left');
svg.append('g').attr('class', 'x axis').attr('transform',
'translate(0,' + height + ')').call(xAxis);
svg.append('g').attr('class', 'y axis').call(yAxis);
var bar = svg.selectAll('.bar').data(data);
bar.enter().append('rect').attr('class', 'bar');
bar.attr('height', y.rangeBand()).attr('width', function (d) {
return x(d.rate);
}).attr('y', function (d) {
return y(d.country);
});
var sortData = function (order) {
if (order == 'asc') {
data.sort(function (a, b) {
return (a.rate === b.rate ? 0 : (a.rate < b.rate ? -1
: 1));
});
} else if (order == 'desc') {
data.sort(function (a, b) {
return (a.rate === b.rate ? 0 : (a.rate < b.rate ? 1
: -1));
});
} else { // sliding window
data.sort(function (a, b) {
return (a.rate === b.rate ? 0 : (a.rate < b.rate ? 1
: -1));
});
var array = [];
var windowSize = 10;
var topIndex = 0;
var half = Math.floor(data.length / 2);
var bottomIndex = data.length - 1;
while (array.length < data.length) {
for (var i = 0; i < windowSize && topIndex < half; i++, topIndex++) {
array.push(data[topIndex]);
}
for (var i = 0; i < windowSize && bottomIndex >= half; i++, bottomIndex--) {
array.push(data[bottomIndex]);
}
}
data = array;
}
y.domain(data.map(function (d) {
return d.country;
}));
svg.selectAll('.bar').data(data, function (d) {
return d.country;
}).transition().duration(1000)
.attr('y', function (d) {
return y(d.country);
});
svg.select('.y').transition().duration(1000).call(yAxis);
};
$('[name=sort]').on('change', function (d) {
sortData($(this).filter(':checked').val());
});
setTimeout(function () {
$('[name=sort]').filter('[value=wind]').prop('checked', true);
sortData('wind');
}, 1500);
});
// data from https://www.cia.gov/library/publications/the-world-factbook/rankorder/2091rank.html
};
$('#sortOrderModal').on('show.bs.modal', function (e) {
sortOrderChart();
});
</script>
</body>
</html>