/
viz.html
309 lines (263 loc) · 21.5 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
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
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Blackbird - Fork of Phinch</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">
<script src="lib/jquery-1.10.1.min.js"></script>
<!-- Google Analytics -->
<script>
var gaProperty = 'UA-83792433-2';
// Disable tracking if the opt-out cookie exists.
var disableStr = 'ga-disable-' + gaProperty;
if (document.cookie.indexOf(disableStr + '=true') > -1) {
window[disableStr] = true;
$('document').ready(function () {
$('#ga-optout').hide();
$('#ga-optedout').show();
});
}
function openGaDialog() {
$('#dialog-ga').show();
$('#dialog-ga').dialog({ modal: true });
$('.ui-button-text').html('<i class="icon-remove icon-large"></i>');
}
// Opt-out function
function gaOptout() {
document.cookie = disableStr + '=true; expires=Thu, 31 Dec 2099 23:59:59 UTC; path=/';
window[disableStr] = true;
$('#ga-optout').hide();
$('#ga-optedout').show();
}
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-83792433-2', 'auto', {
anonymizeIp: true
});
ga('send', 'pageview');
</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" style="position: relative">
<a href="index.html"><img src="img/blackbird_logo.png" height="50px"></a>
<b id="blackbird_version">1.2.2</b>
</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>
<div id="dialog-ga" style="display:none; overflow-y:auto">
<h2>Google Analytics</h2>
<p>
<h4>English</h4>
This website uses Google Analytics, a web analytics service provided by Google, Inc. (“Google”). Google Analytics uses “cookies”, which are text files placed on your computer, to help the website analyze how users use the site. The information generated by the cookie about your use of the website will be transmitted to and stored by Google on servers in the United States .
In case IP-anonymisation is activated on this website, your IP address will be truncated within the area of Member States of the European Union or other parties to the Agreement on the European Economic Area. Only in exceptional cases the whole IP address will be first transfered to a Google server in the USA and truncated there. The IP-anonymisation is active on this website.
Google will use this information on behalf of the operator of this website for the purpose of evaluating your use of the website, compiling reports on website activity for website operators and providing them other services relating to website activity and internet usage.
The IP-address, that your Browser conveys within the scope of Google Analytics, will not be associated with any other data held by Google. You may refuse the use of cookies by selecting the appropriate settings on your browser, however please note that if you do this you may not be able to use the full functionality of this website. You can also opt-out from being tracked by Google Analytics with effect for the future by downloading and installing Google Analytics Opt-out Browser Addon for your current web browser: <a href="http://tools.google.com/dlpage/gaoptout?hl=en">http://tools.google.com/dlpage/gaoptout?hl=en</a>.
As an alternative to the browser Addon or within browsers on mobile devices, you can <a href="javascript:gaOptout()">click this link</a> in order to opt-out from being tracked by Google Analytics within this website in the future (the opt-out applies only for the browser in which you set it and within this domain). - See more at: http://rechtsanwalt-schwenke.de/google-analytics-rechtssicher-nutzen-anleitung-fuer-webmaster/#sthash.jLLgpAZg.dpuf. An opt-out cookie will be stored on your device, which means that you'll have to click this link again, if you delete your cookies.
<h4>German</h4>
Diese Website benutzt Google Analytics, einen Webanalysedienst der Google Inc. („Google“). Google Analytics verwendet sog. „Cookies“, Textdateien, die auf Ihrem Computer gespeichert werden und die eine Analyse der Benutzung der Website durch Sie ermöglichen. Die durch den Cookie erzeugten Informationen über Ihre Benutzung dieser Website werden in der Regel an einen Server von Google in den USA übertragen und dort gespeichert.
Im Falle der Aktivierung der IP-Anonymisierung auf dieser Webseite, wird Ihre IP-Adresse von Google jedoch innerhalb von Mitgliedstaaten der Europäischen Union oder in anderen Vertragsstaaten des Abkommens über den Europäischen Wirtschaftsraum zuvor gekürzt. Nur in Ausnahmefällen wird die volle IP-Adresse an einen Server von Google in den USA übertragen und dort gekürzt. Die IP-Anonymisierung ist auf dieser Website aktiv. Im Auftrag des Betreibers dieser Website wird Google diese Informationen benutzen, um Ihre Nutzung der Website auszuwerten, um Reports über die Websiteaktivitäten zusammenzustellen und um weitere mit der Websitenutzung und der Internetnutzung verbundene Dienstleistungen gegenüber dem Websitebetreiber zu erbringen.
Die im Rahmen von Google Analytics von Ihrem Browser übermittelte IP-Adresse wird nicht mit anderen Daten von Google zusammengeführt. Sie können die Speicherung der Cookies durch eine entsprechende Einstellung Ihrer Browser-Software verhindern; wir weisen Sie jedoch darauf hin, dass Sie in diesem Fall gegebenenfalls nicht sämtliche Funktionen dieser Website vollumfänglich werden nutzen können. Sie können darüber hinaus die Erfassung der durch das Cookie erzeugten und auf Ihre Nutzung der Website bezogenen Daten (inkl. Ihrer IP-Adresse) an Google sowie die Verarbeitung dieser Daten durch Google verhindern, indem sie das unter dem folgenden Link verfügbare Browser-Plugin herunterladen und installieren: <a href="http://tools.google.com/dlpage/gaoptout?hl=de">http://tools.google.com/dlpage/gaoptout?hl=de</a>.
Alternativ zum Browser-Add-On oder innerhalb von Browsern auf mobilen Geräten, <a title="Google Analytics Opt-Out-Cookie setzen" href="javascript:gaOptout()">klicken Sie bitte diesen Link</a>, um die Erfassung durch Google Analytics innerhalb dieser Website zukünftig zu verhindern (das Opt Out funktioniert nur in dem Browser und nur für diese Domain). Dabei wird ein Opt-Out-Cookie auf Ihrem Gerät abgelegt. Löschen Sie Ihre Cookies in diesem Browser, müssen Sie diesen Link erneut klicken.
</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 SVG <i class="icon-chart icon-large"></i></button>
<button class="orange_btn" id="export_png">EXPORT PNG <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>Your browser lacks required features so it does not support the Blackbird framework! Chrome Browser Recommended!</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="max-width: 600px; max-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>
<h3>This will upload your biom file to the server. A link to your data with visualization settings will be created. You can send this link to anyone you want to share this with.</h3>
Warning: Due to capacity reasons old shares are deleted regularly.
<div style="display: none">
<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>
</div>
<input type="button" value="Share" class="shareButton orange_btn" />
</div>
</div>
</section>
<section class = "footer_copyright">
Blackbird is a fork of Phinch (Copyright © 2014 Phinch, phinch.org).
This content is released under <a href="http://opensource.org/licenses/BSD-2-Clause" target="_blank">The BSD 2-Clause License</a>.
<a id="ga-optout" href="javascript:openGaDialog()">This site uses Google Analytics. Click here to learn more or opt-out.</a>
<span id="ga-optedout" style="display: none">Google Analytics is disabled for you.</span>
<span id="footer_github"> <a href="https://github.com/molbiodiv/Blackbird" target="_blank"><i class="icon-github icon-large"></i> Github</a></span>
</section>
<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>