Blackbird/preview.html at master · molbiodiv/Blackbird · GitHub

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>
<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/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">

    <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:</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>

        <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&auml;t abgelegt. L&ouml;schen Sie Ihre Cookies in diesem Browser, m&uuml;ssen Sie diesen Link erneut klicken.

            </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>Your browser lacks required features so it does not support the Blackbird framework! Chrome Browser Recommended!</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>

    <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>.&nbsp;&nbsp;
        <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">&nbsp;&nbsp;&nbsp;&nbsp;<a href="https://github.com/molbiodiv/Blackbird" target="_blank"><i class="icon-github icon-large"></i>&nbsp;&nbsp;Github</a></span>
    </section>

    <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>