-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
151 lines (139 loc) · 6.55 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
<!DOCTYPE html>
<html>
<head>
<title>Assignment 5: 3D Visualisation</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimum-scale=1"/>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<link rel="shortcut icon" href="http://cartodb.com/assets/favicon.ico" />
<link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v3/3.15/themes/css/cartodb.css" />
<style>
#header {
font-family: Helvetica;
background-color:rgb(38, 38, 38);
color:white;
text-align:center;
padding:5px;
height: 150px;
width: 100%
position: absolute;
}
#nav {
font-family: Helvetica;
position: fixed;
line-height:30px;
background-color: white;
height:150px;
width:100px;
float:left;
padding:5px;
}
#section {
font-family: Helvetica;
width:80%;
float:left;
padding:10px;
margin-left: 12%;
margin-right: 5%;
background-color: white;
text-align: justify;
}
#layer_selector ul {
padding: 0; margin: 0;
list-style-type: none;
}
#layer_selector li {
border-bottom: 1px solid #999;
padding: 15px 30px;
font-family: "Helvetica", Arial;
font-size: 13px;
color: #444;
cursor: auto;
}
#layer_selector li:hover {
background-color: #F0F0F0;
cursor: pointer;
}
#layer_selector li.selected {
background-color: #EEE;
}
.myButton {
-moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
-webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
box-shadow:inset 0px 1px 0px 0px #ffffff;
background-color:transparent;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
border:1px solid #dcdcdc;
display:inline-block;
cursor:pointer;
color:#666666;
font-family:Arial;
font-size:15px;
font-weight:bold;
padding:6px 24px;
text-decoration:none;
text-shadow:0px 1px 0px #ffffff;
width: 90%;
}
.myButton:hover {
background-color:transparent;
}
.myButton:active {
position:relative;
top:1px;
}
path {
stroke: steelblue;
stroke-width: 2;
fill: none;
}
.selected {
fill: orange;
}
#results {
margin-top: 1200px;
}
img {
display: block;
margin-left: auto;
margin-right: auto
}
</style>
</head>
<body>
<div id="header">
<h1>Assignment 5: 3D Data Visualisation</h1>
<h3>Jose Juan Almagro Armenteros, Joseph Blair & Juan Salamanca Viloria</h3>
</div>
<div id="nav" >
<a href = "#Protein-Visualisation" class="myButton">Protein Vis</a>
<a href = "#MRI-Visualisation" class="myButton">MRI Vis</a>
</div>
<div id="section">
<div id="Protein-Visualisation">
<h2>Protein Visualisation</h2>
<p>
For structural protein analysis, 3D visualization is useful to get an overview of the tertiary stucture of the protein. The visualization gives the user the opportunity to better understand the protein's activity, and to identify any particular domains of interest such as catalityc or regulatory regions which can be used as a active site in pharmaceutical therapies. By clicking the image bellow, you will be able to view the visualisation.
</p>
<a href="protein.html"> <img src="Protein_image.jpg" alt="Still of 2RH1 3D visual" style="width:550px;height:350px;" align="middle"></a>
<p>
For this particular visualization we have used various features to aid the understanding of the protein structure. For instance a "perspective camera" was used to
view the atoms and bonds and give some depth, and size of the molecule. Antother feautre that could have been used was lighting of the scene to again give some depth, and shading of the atoms and bonds. Instead of doing this, an image of a ball was used for each atom, which already depicted some shading. This gives the impression that each atom has a third dimension, and that there is a light source present. In order to navigate the molecule, controls were added, which allowed rotation and translation of the image, as well as movement of the camera position. These were added as a "trackball" feature, so the image could rotate 360 degrees with free movement.
</p>
<p>Colouring of different atoms in the protein was also added, which allows further uderstanding of the structure and possible behaviour of the protein itself. The color of an atom depends on its element: C=gray, N=blue, O=red, S=yellow. No Hydrogens were added as this would have been extremley cluttered on such a large molecule. </p>
</div>
<div id="MRI-Visualisation">
<h2>MRI Visualisation</h2>
<p>
For the second visualization, brain MR images were put on panels to create a 3D scene. A potential use of this visualization will be the medical field, as the user can be able to select and “play” with the brain slices. This tool helps identify a potential explanation for an illness or even an early diagnosis of a neurological illness. By clicking the image bellow, you will be able to view the visualisation.
</p>
<a href="brain.html"><img src="brain_image.jpg" alt="Still of MRI visualisation tool" style="width:550px;height:350px;" align="middle"></a>
<p>
Controls were added to manipulate the visualization and allow rotation and change of camera position. This was enable using "orbit controls" to allow camera movement and navigation of the images, without ever turning the brain upsidwdown. Furthermore we added a GUI to allow the viewing of different slices of the image in coronal, axial and sagittal directions.
Other features as the light and material were added to allowed easy analysis of the medical image and improve its definition. The material chosen was matt to avoid too much reflection of light, which may have distorted the image. Point lights was added in three directions to ensure visibility of the imagesat all angles.
</p>
</div>
</div>
</body>
</html>