/
preview.html
123 lines (103 loc) · 8.41 KB
/
preview.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
<!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/preview.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:</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), <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>
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 with human-readable IDs in the visualizations, include a column in your metadata mapping file with the header labelled as “phinch”. These IDs 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">
<p class="pageName">FILTER DATA</p>
<p id = "file_details"></p>
<button class="orange_btn" id="goGallery">PROCEED TO GALLERY</button>
<button class="orange_btn" id="goExport">EXPORT</button>
</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 = "bottom_sec">
<section id = "left_control_panel">
<p class = "att_head" id = "att_head_dates">DATES</p>
<div id = "dates" class="att_block"></div></br>
<p class = "att_head" id = "att_head_numeric">NUMERIC RANGE</p>
<div id = "numeric_att" class="att_block"></div></br>
<p class = "att_head" id = "att_head_groupable">GROUPABLE</p>
<div id = "groupable_att" class="att_block"></div></br>
<p class = "att_head" id = "att_head_descriptive">DESCRIPTIVE</p>
<div id = "non_numeric_att" class="att_block"></div>
</section>
<section id = "right_live_panel">
<i class="icon-spinner icon-spin icon-large icon-4x" style="float:right;"></i>
</section>
</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/indexedDB.polyfill.js"></script>
<script src="lib/db.js"></script>
<script src="lib/FileSaver.js"></script>
<script src="lib/moment.min.js"></script>
<script src="lib/d3.v3.min.js"></script>
<script src="lib/jquery.dataTables.min.js"></script>
<script src="scripts/filter.js"></script>
<script src="scripts/init.js"></script>
<script> var app; window.onload = function() { app = new init('preview');} </script>
</body>
</html>