-
Notifications
You must be signed in to change notification settings - Fork 30
/
Copy pathviz.html
246 lines (210 loc) · 14.4 KB
/
viz.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
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>PHINCH - A framework for visualizing bio data</title>
<meta name="description" content="Phinch is an open-source framework for visualizing biological data. Whether it's genes, proteins, or microbial species, Phinch provides an interactive visualization tool that allows users to explore and manipulate large biological datasets." />
<meta name="keywords" content="data viz, data visualization, sloan founcation, uc davis, biom, biological data, open-source, framework" />
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="css/utility.css">
<link rel="stylesheet" href="css/viz.css">
<!-- Facebook Meta Tags -->
<meta property="og:title" content="PHINCH - A framework for visualizing bio data">
<meta property="og:image" content="img/phinch-logo.jpg">
<meta property="og:site_name" content="PHINCH">
<!-- Google Analytics -->
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-50346302-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
<!-- Disable Console Msg -->
<script type="text/javascript">
if (!(window.console && console.log)) {(function() {
var noop = function() {};
var methods = ['assert', 'clear', 'count', 'debug', 'dir', 'dirxml', 'error', 'exception', 'group', 'groupCollapsed', 'groupEnd', 'info', 'log', 'markTimeline', 'profile', 'profileEnd', 'markTimeline', 'table', 'time', 'timeEnd', 'timeStamp', 'trace', 'warn'];
var length = methods.length;
var console = window.console = {};
while (length--) { console[methods[length]] = noop;}
}()); }
</script>
</head>
<body>
<section id = "head_sec">
<p class = "logo"><a href="index.html"><img src="img/phinch.png" height="50px"></a><!-- <img alt="Chrome" src="img/chrome_logo_2x.png" height="20px" style="margin-top: 20px;"> --></p>
<p id="help">HELP</p>
<div id="dialog-modal">
<h2>How to Use</h2>
<p class="descPara">
<span>Instructions</span></br></br>
This visualization framework aims to address current bottlenecks in the analysis of large sequence datasets (rRNA amplicons, metagenomes), helping researchers analyze high-throughput datasets more efficiently. Phich takes advantage of standard outputs from computational pipelines in order to bridge the gap between biological software (e.g. QIIME) and existing data visualization capabilities (harnessing the scalability of WebGL and HTML5 in a browser-based tool). </br></br>
Phinch currently supports downstream analyses of <b>.biom files</b> ( <a href="http://biom-format.org/" target="_blank">Biological Observation Matrix</a>, a JSON-formatted file type typically used to represent marker gene OTUs or metagenomic data). <b>All sample metadata and taxonomy/ontology information MUST be embedded in the .biom file before being uploaded into Phinch</b>.</br></br>
In QIIME (version 1.7 or later), users can prepare the .biom file by executing the following commands:</br></br>
First, construct an OTU table:</br></br>
<code>make_otu_table.py -i final_otu_map_mc2.txt -o otu_table_mc2_w_tax.biom -t rep_set_tax_assignments.txt</code></br></br>
Where your input file (-i) is your OTU Map (defining clusters of raw sequences reads), and taxonomy file (-t) contains the taxonomy or gene ontology strings that correspond to each OTU.</br></br>
Second, add your sample metadata to your .biom file. In QIIME version 1.8 this can be done using the following command:</br></br>
<code>biom add-metadata -i otu_table_mc2_w_tax.biom -o otu_table_mc2_w_tax_and_metadata.biom -m sample_metadata_mapping_file.txt</code></br></br>
In QIIME version 1.7 or below, you can add metadata with the following command:</br></br>
<code>add_metadata.py -i otu_table_mc2_w_tax.biom -o otu_table_mc2_w_tax_and_metadata.biom -m sample_metadata_mapping_file.txt</code></br></br>
Where your input file (-i) is your .biom file from the previous step, and your mapping file (-m) is a tab-delimited file containing sample metadata (<a href="http://qiime.org/documentation/file_formats.html#metadata-mapping-files" target="_blank">formatted according to these QIIME instructions</a>).</br></br>
After these two steps, you're ready to upload.</br></br>
If you want to visualize biological data currently formatted as a tab-delimited text file (e.g. the style of OTU tables produced by older versions of QIIME, or any other type of genomic data that can be reprsented in matrix format), <a href="https://github.com/biom-format/biom-format/blob/df81277857a553e7e5c9679924e09861d8a5f61f/doc/documentation/biom_conversion.rst" target="_blank">please refer to this documentation for conversion instructions</a>. Phinch supports both "sparse" and "dense" BIOM formats (although <b>sparse .biom files are highly recommended, since the file size is much smaller</b>). </br></br>
<span>Some important notes on metadata</span></br></br>
In order to be properly detected, all date/time metadata must be standardized according to MIxS standardized format (<a href="http://wiki.gensc.org/index.php?title=MIxS" target="_blank">more information at the Genomic Standards Consortium wiki</a>), and entered into one column in your original sample metadata mapping file, as follows:</br></br>
[YYYY]-[MM]-[DD]T[hh]:[mm]:[ss]-[Z]</br>
This date format lists the year, month, and day, followed by a 24hr timestamp with a UTC offset (Z). Inclusion of timestamp and UTC offset are both optional; metadata columns can include date only. For example, metadata for a sample collected at 2:30pm EST on May 4, 2007 would be entered as: 2007-04-05T14:30:00-05:00</br></br>
Similarly, any geographic coordinates or GPS data must be entered as <a href="http://en.wikipedia.org/wiki/Decimal_degrees" target="_blank"></a>decimal degrees (the format used by GoogleMaps, e.g. -90.017926). We recommend using separate columns labeled “Latitude” and “Longitude” in your original sample metadata mapping file, to ensure that GPS metadata is correctly detected.</br></br>
To label your samples in Phinch and export graphics with human-readable IDs, include a column in your metadata mapping file with the header labelled as “phinchID” (these entries can be the same or different as the first SampleID column). The phinchID values will be pulled through into the visualizations to populate graph axes. If this column is not included, an arbitrary numerical ID will be assigned to each sample.</br></br>
</p>
</div>
</section>
<section id = "up_sec" style="display:none;">
<button class="orange_btn" id="share">SHARE</button>
<button class="orange_btn" id="export">EXPORT <i class="icon-chart icon-large"></i></button>
<button class="orange_btn" id="downloadFile">FILES <i class="icon-download icon-large"></i></button>
<a href="viz.html"><button id="goBackGallery" class="orange_btn">BACK TO GALLERY</button></a>
<p id = "file_details"></p>
<select id = "attributes_dropdown" style="display: none;"></select>
</section>
<section id = "NotSupported">
<br /> <br />
<h1>NOT SUPPORTED</h1>
<p>Chrome Browser Recommended! Your browser does not support the Phinch framework!</p>
</section>
<section id = "graphNameCont">
<p class="pageName">GRAPH GALLERY</p>
<a href="preview.html"><button id="goBackFilter" class="orange_btn">FILTER DATA</button></a>
</section>
<section id="GraphGallery">
<div class="col3">
<p class = "graphGalleryTitle"><span>Taxonomy Bar Chart</span></p>
<img src="img/gallery_1.png">
</div>
<div class="col3">
<p class = "graphGalleryTitle"><span>Bubble Chart</span></p>
<img src="img/gallery_2.png">
</div>
<div class="col3">
<p class = "graphGalleryTitle"><span>Sankey Diagram</span></p>
<img src="img/gallery_3.png">
</div>
<div class="col3">
<p class = "graphGalleryTitle"><span>Donut Partition</span></p>
<img src="img/gallery_4.png">
</div>
<div class="col3">
<p class = "graphGalleryTitle"><span>Attributes Column Chart</span></p>
<img src="img/gallery_5.png">
</div>
<!-- <div class="col3">
<p class = "graphGalleryTitle"><span>Bubble Chart By OTU</span></p>
<img src="img/gallery_6.png">
</div> -->
</section>
<section id = "share_box">
<div class="info">shared filename: <span></span></div>
<div class="info">shared file first uploaded: <span></span></div>
<div class="info">shared file has been viewed: <span></span></div>
<div class="info">shared visualization: <span></span></div>
<div class="info">shared layer: <span></span></div>
<button class="orange_btn" id="shareGO"><i class="icon-spinner icon-spin icon-2x"></i></button>
</section>
<section id = "viz_container">
<div id="layerSwitch">
<div class="rectLayer selectedLayer" id="layer_1">Kingdom</div>
<div class="cntline selectedLine"></div>
<div class="rectLayer selectedLayer" id="layer_2">Phylum</div>
<div class="cntline"></div>
<div class="rectLayer" id="layer_3">Class</div>
<div class="cntline"></div>
<div class="rectLayer" id="layer_4">Order</div>
<div class="cntline"></div>
<div class="rectLayer" id="layer_5">Family</div>
<div class="cntline"></div>
<div class="rectLayer" id="layer_6">Genus</div>
<div class="cntline"></div>
<div class="rectLayer" id="layer_7">Species</div>
<div id="PercentValue" class="switchGroup">
<button id = "valueBtn" class="clicked">VALUE</button>
<button id = "percentBtn">%</button>
</div>
<div id="IdNameSort" class="switchGroup">
<button id = "nameBtn" class="clicked">Name <i class="icon-sort-amount-asc"></i></button>
<button id = "idBtn">ID <i class="icon-sort-amount-asc"></i></button>
</div>
<div id="ListBubble" class="switchGroup">
<button id = "bubbleBtn" class="clicked">BUBBLE</button>
<button id = "listBtn">LIST</button>
</div>
<div id="MsgBox"></div>
</div>
<div id="bubbleSliderContainer">
<div class="sliderIcons">
<i class="icon-circle "></i>
<i class="icon-circle icon-large "></i>
<i class="icon-circle icon-large icon-15x"></i>
</div>
<div id="bubbleSliderLeft"></div>
<div id="bubbleSliderRight"></div>
<div id="bubbleSlider"></div>
</div>
<div id="taxonomy_container"></div>
<div id="loadingIcon"><i class="icon-spinner icon-spin icon-large icon-4x"></i></div>
<input type="text" name="search" placeholder=" search..." id = 'tags'>
<div id = "autoCompleteList"></div>
<div id="fake_taxonomy_container"></div>
<div id="legend_header">TOP SEQS</div>
<div id="legend_container"></div>
<div id="count_header">SAMPLE DIST</div>
<div id="count_container"></div>
<div id="exportShareDiv"><i class="icon-remove icon-large" style=" float: right; margin: 10px 10px;"></i>
<span id="exportLoading"><i class="icon-spinner icon-spin icon-large icon-4x"></i></span>
<div id="exportHeader">Preview Image, click to download!</div>
<div id="downloadPreview">
<a href="" download><img src="" style="height: 500px; margin: 10px 0 0 20px;"></a>
</div>
</div>
<div id="sharingInfo" class="basicTooltip">
<div class="loading">
<i class="icon-spinner icon-spin icon-large icon-4x"></i>
<div class="loadingText"></div>
</div>
<div class="shareForm">
<i class="icon-remove icon-large" style=" float: right;"></i>
<label for="shareFromName">From Name:</label>
<input type="text" name="shareFromName" id="shareFromName" />
<label for="shareFromEmail">From Email:</label>
<input type="text" name="shareFromEmail" id="shareFromEmail" />
<label for="shareToName">To Name:</label>
<input type="text" name="shareToName" id="shareToName" />
<label for="shareToEmail">To Email:</label>
<input type="text" name="shareToEmail" id="shareToEmail" />
<label for="shareNotes">Message:</label>
<textarea rows="3" cols="58" name="shareNotes" id="shareNotes" placeholder="Type an optional message "></textarea>
<input type="button" value="Send" class="shareButton orange_btn" />
</div>
</div>
</section>
<script src="lib/jquery-1.10.1.min.js"></script>
<script src="lib/jquery-ui-1.10.3.custom.min.js"></script>
<script src="lib/jquery.fracs-0.12.0.min.js"></script>
<script src="lib/jquery.outline-0.12.0.min.js"></script>
<script src="lib/indexedDB.polyfill.js"></script>
<script src="lib/db.js"></script>
<script src="lib/d3.v3.min.js"></script>
<script src="lib/d3.layout.min.js"></script>
<script src="lib/d3.sankey.js"></script>
<script src="lib/lodash.min.js"></script>
<script src="lib/FileSaver.js"></script>
<script src="lib/naturalSort.js"></script>
<script src="scripts/taxonomyViz.js"></script>
<script src="scripts/init.js"></script>
<script> var app; window.onload = function() { app = new init('viz');} </script>
</body>
</html>