-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
260 lines (252 loc) · 13.8 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
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
<!DOCTYPE html>
<html>
<head><link rel="stylesheet" type="text/css" href="lib/styles.css"></head>
<meta charset="utf-8">
<title>Assignment 3 Testing Centre</title>
<body>
<div id="wrap">
<div id="top">
<h1>Plotting Time Series Data From Protein Simulations Using Time Curves</h1>
<p>
Inspired by a recent paper about <a href="http://www.aviz.fr/~bbach/timecurves/">Time Curves</a>, I made an interactive visualization to study data derived from protein folding simulations in my research lab.
The motive of this project is to understand distributions in variables and correlations between variables that are not apparent in simple line graphs of variables changing over time.
This can also be a replacement to watching protein simulation movies where keeping note of several changing variables at the same time can be a formidable task (<a href="https://www.youtube.com/watch?v=S52tG1-64E8&list=PL418E1C62DD9FC8BA&index=34">Sample Protein Simulation video</a>).
</p>
<p>
<h3>Data Source</h3>
This data come from a protein simulation - 4 proteins (shown below) in water (not shown).
<img src="lib/protein_image.png" alt="Pictorial description of protein simulation" width="550" height="500"> </p>
<p> The size of the protein (radius of gyration), inter-protein distance and other association parameters have been tracked during the simulation.
</p>
<p>
<h3>Visualization Features</h3>
Selected data is plotted in a two dimensional space. The location of each point depends on its similarity or dissimilarity with other points.
Data points which are similar are grouped together spatially and have the same color. Lines connecting data points show you the flow of time - lighter shades stand for earlier times and darker shades for later.
Look out for these <b>interactions</b>:
<ul>
<li>Information about each data point as you bring your mouse over</li>
<li>Paths highlight and show you their direction when you bring your mouse over</li>
<li>Zoom in and out using the touchpad or scroll keys</li>
<li>Drag the figure to focus on the areas of interest</li>
<li>Radio buttons to select number of variables for plotting</li>
<li>Drop down menus to select the variables of interest</li>
</ul>
</p>
<p>
<h3>Variable Descriptions</h3>
<ul style="list-style-type: none">
<li><b>Energy</b> - Value for the energy of the whole system (in kJ)</li>
<li><b>Coordination</b> - Distance between all four proteins</li>
<li><b>SS total</b> - Hydrogen bonding between proteins</li>
<li><b>Distance</b> - Distance between two proteins (in Angstrom)</li>
<li><b>Radius of Gyration</b> - Length of the protein (in Angstrom)</li>
</ul>
<h3>Interaction legend</h3>
<ul style="list-style-type: none">
<li><b>Line Color</b> - Light colors signify early time, and darker colors stand for later times</li>
<li><b>Circle Color</b> - Shows points with similar values of variables</li>
<li><b>Line on Mouseover</b> - Highlighted with an arrow pointing to the next point in the time series</li>
<li><b>Tooltip</b> - On moving mouse over circles it displays the data linked with each point</li>
<li><b>Zooming</b> - Scroll or use the touch pad to zoom in and move around the space</li>
</ul>
</p>
</div>
<div>
<h3>Time Curve Visualization</h3>
<label>Plot 1 Variable</label>
<input id="plot1" type="radio" name="enable" checked onclick="updateplot1()">
<select name="plot1_list" id="plot1_list" onchange="updateData(value)">
<option value="1">Energy</option>
<option value="2">Coordination</option>
<option value="3">SS Total</option>
<option value="4">Distance between 1 and 2</option>
<option value="5">Distance between 1 and 3</option>
<option value="6">Distance between 1 and 4</option>
<option value="7">Distance between 2 and 3</option>
<option value="8">Distance between 2 and 4</option>
<option value="9">Distance between 3 and 4</option>
<option value="10">Radius of Gyration 1</option>
<option value="11">Radius of Gyration 2</option>
<option value="12">Radius of Gyration 3</option>
<option value="13">Radius of Gyration 4</option>
</select>
</div>
<div>
<label>Plot 2 Variables</label>
<input id="plot2" type="radio" name="enable" onclick="updateplot2()">
<select name="plot2_list1" id="plot2_list1" disabled onchange="updateData(value)">
<option value="1">Energy</option>
<option value="2">Coordination</option>
<option value="3">SS Total</option>
<option value="4">Distance between 1 and 2</option>
<option value="5">Distance between 1 and 3</option>
<option value="6">Distance between 1 and 4</option>
<option value="7">Distance between 2 and 3</option>
<option value="8">Distance between 2 and 4</option>
<option value="9">Distance between 3 and 4</option>
<option value="10">Radius of Gyration 1</option>
<option value="11">Radius of Gyration 2</option>
<option value="12">Radius of Gyration 3</option>
<option value="13">Radius of Gyration 4</option>
</select>
<select name="plot2_list2" id="plot2_list2" disabled onchange="updateData(value)">
<option value="1">Energy</option>
<option value="2">Coordination</option>
<option value="3">SS Total</option>
<option value="4">Distance between 1 and 2</option>
<option value="5">Distance between 1 and 3</option>
<option value="6">Distance between 1 and 4</option>
<option value="7">Distance between 2 and 3</option>
<option value="8">Distance between 2 and 4</option>
<option value="9">Distance between 3 and 4</option>
<option value="10">Radius of Gyration 1</option>
<option value="11">Radius of Gyration 2</option>
<option value="12">Radius of Gyration 3</option>
<option value="13">Radius of Gyration 4</option>
</select>
</div>
<div>
<label>Plot 3 Variables</label>
<input id="plot3" type="radio" name="enable" onclick="updateplot3()">
<select name="plot3_list1" id="plot3_list1" disabled onchange="updateData(value)">
<option value="1">Energy</option>
<option value="2">Coordination</option>
<option value="3">SS Total</option>
<option value="4">Distance between 1 and 2</option>
<option value="5">Distance between 1 and 3</option>
<option value="6">Distance between 1 and 4</option>
<option value="7">Distance between 2 and 3</option>
<option value="8">Distance between 2 and 4</option>
<option value="9">Distance between 3 and 4</option>
<option value="10">Radius of Gyration 1</option>
<option value="11">Radius of Gyration 2</option>
<option value="12">Radius of Gyration 3</option>
<option value="13">Radius of Gyration 4</option>
</select>
<select name="plot3_list2" id="plot3_list2" disabled onchange="updateData(value)">
<option value="1">Energy</option>
<option value="2">Coordination</option>
<option value="3">SS Total</option>
<option value="4">Distance between 1 and 2</option>
<option value="5">Distance between 1 and 3</option>
<option value="6">Distance between 1 and 4</option>
<option value="7">Distance between 2 and 3</option>
<option value="8">Distance between 2 and 4</option>
<option value="9">Distance between 3 and 4</option>
<option value="10">Radius of Gyration 1</option>
<option value="11">Radius of Gyration 2</option>
<option value="12">Radius of Gyration 3</option>
<option value="13">Radius of Gyration 4</option>
</select>
<select name="plot3_list3" id="plot3_list3" disabled onchange="updateData(value)">
<option value="1">Energy</option>
<option value="2">Coordination</option>
<option value="3">SS Total</option>
<option value="4">Distance between 1 and 2</option>
<option value="5">Distance between 1 and 3</option>
<option value="6">Distance between 1 and 4</option>
<option value="7">Distance between 2 and 3</option>
<option value="8">Distance between 2 and 4</option>
<option value="9">Distance between 3 and 4</option>
<option value="10">Radius of Gyration 1</option>
<option value="11">Radius of Gyration 2</option>
<option value="12">Radius of Gyration 3</option>
<option value="13">Radius of Gyration 4</option>
</select>
</div>
</div>
<script src="lib/d3.min.js"></script>
<script src="lib/papaparse.min.js"></script>
<script src="lib/numeric-1.2.6.min.js"></script>
<script src="lib/utils.js"></script>
<script>
var filename ="COLVAR.csv";
var state = [1,0,0,0,0,0,0,0,0,0,0,0,0]; // Default only energy selected
d3.csv(filename, function(data){
return [data['time'],data['energy'],data['cmmt'],data['sstot'], data['d12'], data['d13'], data['d14'],data['d23'],data['d24'],data['d34'],data['rg1'],data['rg2'],data['rg3'],data['rg4']];
}, function(error, rows) {
console.log(rows);
plotd3(MDScalculate(rows,state),rows,state);
});
// Keeping track of which variables to keep up with
function updateData(value){
var state = [0,0,0,0,0,0,0,0,0,0,0,0,0];
if (plot1.checked) {
// update for plotting 1 variable at a time
state[Number(plot1_list.value)-1]=1;
}
else if (plot2.checked) {
state[Number(plot2_list1.value)-1]=1;
state[Number(plot2_list2.value)-1]=1;
}
else if (plot3.checked) {
state[Number(plot3_list1.value)-1]=1;
state[Number(plot3_list2.value)-1]=1;
state[Number(plot3_list3.value)-1]=1;
}
loadData(filename,state);
}
function loadData(filename,state) {
d3.csv(filename, function(data){
return [data['time'],data['energy'],data['cmmt'],data['sstot'], data['d12'], data['d13'], data['d14'],data['d23'],data['d24'],data['d34'],data['rg1'],data['rg2'],data['rg3'],data['rg4']];
}, function(error, rows) {
console.log(rows);
updatePlotd3(MDScalculate(rows,state),rows,state);
});}
function updateplot1() {
if ( plot1.checked) {
plot1_list.disabled=false;
plot2_list1.disabled=true;
plot2_list2.disabled=true;
plot3_list1.disabled=true;
plot3_list2.disabled=true;
plot3_list3.disabled=true;
var state = [0,0,0,0,0,0,0,0,0,0,0,0,0];
state[Number(plot1_list.value)-1]=1;
loadData(filename,state);
}
else {
plot1_list.disabled=true;
}
}
function updateplot2() {
if (plot2.checked) {
plot2_list1.disabled=false;
plot2_list2.disabled=false;
plot3_list1.disabled=true;
plot3_list2.disabled=true;
plot3_list3.disabled=true;
plot1_list.disabled=true;
var state = [0,0,0,0,0,0,0,0,0,0,0,0,0];
state[Number(plot2_list1.value)-1]=1;
state[Number(plot2_list2.value)-1]=1;
loadData(filename,state);
}
else {
plot2_list1.disabled=true;
plot2_list2.disabled=true;
}
}
function updateplot3() {
if ( plot3.checked) {
plot3_list1.disabled=false;
plot3_list2.disabled=false;
plot3_list3.disabled=false;
plot1_list.disabled=true;
plot2_list1.disabled=true;
plot2_list2.disabled=true;
var state = [0,0,0,0,0,0,0,0,0,0,0,0,0];
state[Number(plot3_list1.value)-1]=1;
state[Number(plot3_list2.value)-1]=1;
state[Number(plot3_list3.value)-1]=1;
loadData(filename,state);
}
else {
plot3_list1.disabled=true;
plot3_list2.disabled=true;
plot3_list3.disabled=true;
}
}
</script>
</body>
</html>