-
Notifications
You must be signed in to change notification settings - Fork 3
/
main.html
89 lines (87 loc) · 3.55 KB
/
main.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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="lodash.min.js"></script>
<link rel="stylesheet" type="text/css" href="sievestyles.css">
<title>S.I.E.V.E.</title>
</head>
<body>
<div id="parent">
<div class="title">
<strong>S.I.E.V.E.</strong>
<span class="subtitle">Statistical Interactive Explorer of Vaccine Efficacy</span>
<span class="help" id="sievehelplink">help
<span id="generaltoolhelp">
<h3>How to use this tool:</h3>
<ul>
<li>Use the vaccine sequence in the shaded area to select sites</li>
<li>Scroll and double-click to zoom</li>
<li>Click and drag to pan</li>
<li>Hold shift and click+drag to select sites</li>
</ul>
</span>
</span>
<!--<script src = "sievehelp.js"></script>-->
</div>
<div id="overview"></div>
<div id="drilldown">
<div id="group"></div>
<div id="sites">
<div id="options">
<table>
<tr><td></td><td><button id="clear_selection_button">Clear Selection</button></td><td></td></tr>
<tr><td></td><td><button id="export_button">Export SVG image</button></td><td class="help">?
<span>
Opens new window with the stacked bar charts for individual sites. Ctrl-S or similar to save in SVG format, which can be edited/converted in Inkscape or other editors or converted using an online tool such as CloudConvert.com.
</span></td></tr>
<tr><td>Distribution Chart</td><td><select id="mismatch_selector">
<option value="pyramid">Pyramid</option>
<option value="box">Box and Whisker</option>
</select></td></tr>
<tr><td>Overview Bar Height:</td><td><select id="yscale_selector">
<option value="pvalue">p-value</option>
<option value="entropy">Entropy</option>
<option value="constant">Constant</option>
</select></td></tr>
<tr><td>Color scheme:</td><td><select id="color_selector">
<option value="taylor">Taylor</option>
<option value="hydrophobicity">Hydrophobicity</option>
<option value="chemistry">Chemistry</option>
<option value="d3">D3</option>
</select></td><td class="help">?
<span>
Choose amino acid color encoding. <br>
Taylor: W. Taylor, Protein Engineering, Vol 10 , 743-746 (1997) <br>
Hydrophobicity: blue = hydrophilic, green = neutral, black = hydrophobic (WebLogo 3 default)<br>
Chemistry: green = polar, purple = neutral, blue = basic, red = acidic, black = hydrophobic (Weblogo 1 and 2 and makelogo default)<br>
D3: D3's default 20 category color scheme
</span>
</td></tr>
<tr><td>Bar Sorting:</td><td><select id="sort_selector">
<option value="joint_prev">Joint Prevalence</option>
<option value="alpha">Alphabetical</option>
</select></td><td></td></tr>
<tr><td>Select by HXB2:</td><td><input type="text" id="hxb2_select" size="13"></input></td><td class="help">?
<span>
Select and append sites by HXB2 position, in a comma-separted list with single sites or ranges; e.g., 2, 5, 7-13, 506d.
</span></td></tr>
<tr><td>Select by p-value</td><td><input type="text" id="pvalue_select" size="13"></input></td><td class="help">?
<span>
Select all sites with p-value less than the threshold given.
</span>
</input></tr>
</table>
</div><div id="sitessvg"></div></div>
</div>
</div>
<script src="entropy.js"></script>
<script src="colors.js"></script>
<script src="summarystats.js"></script>
<script src="parseinput_nested.js"></script>
<script src="sieve.js"></script>
<script src="stackedbars.js"></script>
<script src="pyramid.js"></script>
</body>
</html>