-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
207 lines (192 loc) · 9.96 KB
/
index.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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="css/header.css" />
<link href="c3/c3.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="jquery/jquery-3.5.1.min.js"></script>
<script src="d3/d3.min.js" charset="utf-8"></script>
<script src="c3/c3.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/demo.css">
<link rel="stylesheet" type="text/css" href="css/index.css" />
<script type="text/javascript" src="js/download2.js"></script>
<script type="text/javascript" src="js/pearsonCorrelation.js"></script>
<script type="text/javascript" src="js/pvalue.js"></script>
<link rel="stylesheet" href="css/jquery.datatables.min.css" />
<link rel="stylesheet" href="css/buttons.dataTables.min.css" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Gene Expression Scatter Plot</title>
</head>
<body bgcolor="#f9f9f9">
<header class="header-navigation" id="header">
<nav> <a class="link" href="javascript:location.reload();" title="File choose">输入数据</a> <a class="link" href="#"
title="Guide for use" onclick="switchToUse()">使用指南</a> </nav>
</header>
<div class="topCenter" id="guide_1">使用指南</div>
<div class="topCenter" id="plot_1">散点图</div>
<div class="topCenter" id="UIchoose_1">输入数据</div>
<hr size="2px" width="90%" align="left" color="#000000" />
<div class="guide-box" id="guide-box">
<div class="download_block" style="height:27%;" id="guide_2">
<div class="introduce_word">1.示范文件格式如下</div>
<table width="1000" border="0" height="180">
<tr>
<td width="605">g1.json基因1的格式： "样本编号A":结果数值B;</td>
<td width="385"><a href="#" onclick="download_g1()">样例下载g1.json</a></td>
</tr>
<tr>
<td>g2.json基因2的格式： "样本编号A":结果数值B</td>
<td><a href="#" onclick="download_g2()">样例下载g2.json</a></td>
</tr>
<tr>
<td>info.json基因类型与详细信息的格式： "样本编号X":{"类型名":"Type","详细信息":"detail"}</td>
<td><a href="#" onclick="download_info()">样例下载info.json</a></td>
</tr>
</table>
</div>
<div class="download_block" style="height:67%; margin-bottom:50px;" id="guide_3">
<div class="introduce_word">2.使用及细节说明</div>
<table width="800" border="0">
<tr>
<td class="detailexplain">1）散点的呈现以及各个类型点的细节说明
<br />
<b>1. 提交说明。</b>在将g1,g2,以及info文件提交前请您保证文件的正确性，若g1,g2为空文件，或其中某些数据类型出现问题时会进行相应报错并要求重传，若info文件为空则所有的点都显示为未知点，要求必须上传三个对应的文件，否则无法提交。在文件成功上传后会进行所有散点的呈现。<br />
<b>2. 散点以及信息细节呈现。</b>在.json中的所有合法散点均会在屏幕左侧显示，右侧上方会显示点的最终呈现百分比。为优化视觉效果，坐标轴将根据点的分布自动分配。将鼠标移至某一类型的散点上，右侧灰框中会呈现该类散点的类型名、数量以及细节说明等信息。鼠标旁也能显示该点的横纵坐标。<br />
<b>3. 散点类型单独显示。</b>为方便您查找同一类型的散点，所有散点类型会按照字典序于散点图下方呈现，点击相应类型的开关，可以实现对应类型点的暂时显示和隐藏，便于特定点的查询。同时提供了全部隐藏以及全部显示开关便于您灵活处理，若您需要查看某一类型的散点，可先关闭所有散点的显示后打开特定散点即可。</td>
</tr>
<tr>
<td class="detailexplain"><br />2）g1和g2的相关性系数及p-value等表格数据的操作说明
<br />
<b>1.表格字段。</b>基因表达相关性分析结果在散点图下方的表格中，共有4个字段：tissue(植物器官类型)，number(属于该tissue的样本个数)，correlation(g1和g2的相关性系数)，p-value(双尾P值)。<br />
<b>2.排序。</b>用鼠标点击您要排序的字段，如correlation即可对相关性系数进行排序，点击奇数次实现从小到大排序，点击偶数次实现从大到小排序。<br />
<b>3.检索。</b>如您要查找数据，可在表格右上方的检索框内输入检索数据，后台会自动在所有字段内查找包含了检索数据的内容，并时时地在表格中呈现所有匹配到的记录。<br />
<b>4.导出。</b>点击表格左上方的按钮即能复制、打印数据，或导出为相应的 .xlsx，.csv 格式文件，便于您后期数据的处理。</td>
<br />
</tr>
<tr>
<td>
<br />
<br />
<p> 如果您在使用中有任何建议或疑问，欢迎通过邮箱94516876@qq.com联系我们，感谢您的信赖与支持。</p>
</td>
</tr>
</table>
</div>
</div>
<div class="container_choose" id="container_choose">
<div id="chart"> </div>
<div class="cancel_block" onclick="cancel_choose()">
<div class="pic_block"></div>hide all
</div>
<div class="cancel_block" onclick="appear_choose()">
<div class="pic_block" style="background-color:#39C"></div>show all
</div>
</div>
<div class="useRate" id="useRate">
<p class="words" style="margin-left:-10px;">信息使用率</p>
<p>g1.json <span id="g1_use"></span>/<span id="g1_all"></span></p>
<p>g2.json <span id="g2_use"></span>/<span id="g2_all"></span></p>
<p>info.json <span id="info_use"></span>/<span id="info_all"></span>
</p>
</div>
<div class="plot_right" id="explain">
<table width="100%" height="220px" border="0" cellpadding="20px">
<caption class="cap">类型描述</caption>
<tr>
<td width="39%" class="head">类型名：</td>
<td width="61%" id="type_name"> </td>
</tr>
<tr>
<td width="39%" class="head">数量：</td>
<td width="61%" id="type_number"> </td>
</tr>
<tr>
<td class="head">相关性系数：</td>
<td id="type_cof"> </td>
</tr>
<tr>
<td class="head">P-value：</td>
<td id="type_pvalue"> </td>
</tr>
<tr>
<td class="head">细节说明：</td>
<td id="type_detail"> </td>
</tr>
</table>
</div>
<div class="noteblock" id="UIchoose_2">
<form name="one">
<table width="400" height="200" border="0">
<tr>
<td width="192" class="words">选择g1.json</td>
<td><input type="file" id="fi1" style="display:none;" onchange="Deal_data1()" />
<a href="#">
<div class="btn" onclick="document.one.fi1.click()">g1.json</div>
</a></td>
</tr>
<tr>
<td class="words">选择g2.json</td>
<td><input type="file" id="fi2" style="display:none;" onchange="Deal_data2()" />
<a href="#">
<div class="btn" onclick="document.one.fi2.click()">g2.json</div>
</a></td>
</tr>
<tr>
<td class="words">选择info.json</td>
<td width="198">
<input type="file" id="fi3" style="display:none;" onchange="Deal_data3()" />
<a href="#">
<div class="btn" onclick="document.one.fi3.click()">info.json</div>
</a></td>
</tr>
</table>
</form>
<div class="ribtn" id="UIchoose_7" onclick="switchToPlot()"><a href="#">提交</a></div>
<div class="words" style=" font-size:20px; font-weight:500; margin-left:-32px;" id="UIchoose_4">
<p> </p>
<p>注意：</p>
</div>
<div class="note_word" style="padding-left:5px; line-height:25px;" id="UIchoose_5"> 请按照实际情况进行选择，并保证数据的可行性。若有疑问或初次使用，请点击使用指南。
</div>
</div>
<div class="for_cont" id="for_conte">
<table width="400" border="0">
<tr><td><div class="expl">g1.json</div><textarea rows="5" cols="90" id="cont_g1"></textarea></td></tr>
<tr><td><div class="expl">g2.json</div><textarea rows="5" cols="90" id="cont_g2"></textarea></td></tr>
<tr><td><div class="expl">info.json</div><textarea rows="5" cols="90" id="cont_info"></textarea></td></tr>
</table>
</div>
<script type="text/javascript">
var new_scroll_position = 0;
var last_scroll_position;
var header = document.getElementById("header");
window.addEventListener('scroll', function(e) {
last_scroll_position = window.scrollY;
if (new_scroll_position < last_scroll_position && last_scroll_position > 80) {
header.classList.remove("slideDown");
header.classList.add("slideUp");
} else if (new_scroll_position > last_scroll_position) {
header.classList.remove("slideUp");
header.classList.add("slideDown");
}
new_scroll_position = last_scroll_position;
});
</script>
<div id="TableInfo">
<table id="example" class="display" role="grid" aria-describedby="example_info">
<thead></thead>
<tbody></tbody>
</table>
</div>
<div class="footer"><a>Copyright © 2020 tiger and rabbit</a></div>
</body>
<script src="tablejs/jquery.datatables.min.js"></script>
<script src="tablejs/dataTables.buttons.min.js"></script>
<script src="tablejs/jszip.min.js"></script>
<script src="tablejs/buttons.html5.min.js"></script>
<script src="tablejs/buttons.flash.min.js"></script>
<script src="tablejs/pdfmake.min.js"></script>
<script src="tablejs/vfs_fonts.js"></script>
<script src="tablejs/buttons.print.min.js"></script>
<script type="text/javascript" src="js/OMG.js"></script>
</html>