-
Notifications
You must be signed in to change notification settings - Fork 3
/
Copy pathindex.html
239 lines (211 loc) · 15.1 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta http-equiv="X-UA-Compatible" content="chrome=1" />
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>3D C. elegans Development</title>
<!-- Bootstrap core CSS -->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/color/jquery.color.plus-names-2.1.2.min.js"></script>
<script type="text/javascript" src="libraries/chosen_v1.4.2/chosen.jquery.min.js"></script>
<script src="libraries/bootstrap/js/bootstrap.min.js"></script>
<link href="libraries/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>
<script type="text/javascript" src="http://x3dom.org/download/1.6.2/x3dom-full.js"></script>
<script type="text/javascript" src="http://bgrins.github.io/spectrum/spectrum.js"></script>
<script type="text/javascript" src="http://cdn.jsdelivr.net/jstat/1.2.1/jstat.min.js"></script>
<script type="text/javascript" src="js/development_visualization.js"></script>
<script type="text/javascript" src="libraries/Color_mixer-master/color_mixer.js"></script>
<script type="text/javascript" src="libraries/tablesorter-master/js/jquery.tablesorter.js"></script>
<script type="text/javascript" src="libraries/tablesorter-master/js/jquery.tablesorter.widgets.js"></script>
<script type="text/javascript" src="js/fisheye.js"></script>
<!--Add IntroJs js-->
<script type="text/javascript" src="js/intro.js"></script>
<!-- Add IntroJs styles -->
<link href="css/introjs.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="http://www.x3dom.org/download/dev/x3dom.css"/>
<link rel="stylesheet" type="text/css" href="http://bgrins.github.io/spectrum/spectrum.css"/>
<link rel="stylesheet" type="text/css" href="libraries/chosen_v1.4.2/chosen.min.css"/>
<link rel="stylesheet" type="text/css" href="css/styles.css"/>
<link rel="stylesheet" type="text/css" href="libraries/tablesorter-master/css/theme.blue.css"/>
<script type="text/javascript">
$(document).ready(function() {
//see http://stackoverflow.com/questions/4126206/javascript-parsefloat-1-23e-7-gives-1-23e-7-when-need-0-000000123
// add parser to handle scientific notation through the tablesorter addParser method
$.tablesorter.addParser({
// set a unique id
id: 'scinot',
is: function(s) {
return /[+\-]?(?:0|[1-9]\d*)(?:\.\d*)?(?:[eE][+\-]?\d+)?/.test(s);
},
format: function(s) {
return $.tablesorter.formatFloat(s);
},
type: 'numeric'
});
$("#gene_report").tablesorter({theme: 'blue',
//widgets: ['zebra'],
//widgetOptions: {
// zebra: ["odd", "even"]
//}
});
scatterPlot3d( d3.select('#divPlot'));
});
</script>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="navbar-title"><b>EPICViz:</b> Expression Patterns in <i>Caenorhabditis elegans</i> Visualization</div>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li><a href="" data-toggle="modal" data-target="#aboutModal">About</a></li>
<li><a href="" data-toggle="modal" data-target="#helpModal">Help</a></li>
<li><a href="javascript:void(0);" onclick="javascript:introJs().start();">Tour</a></li>
</ul>
</div>
</div>
</nav>
<div id="divPlot" class="divPlot" >
<div id="top_display_panel">
<div id="three_d_plot">
<input type="button" id="hide-controls" value="<" class="divPlot" data-intro="<b>Collapse: </b>Click to collapse or expand the control panel to make more space for viewing." data-step="3" data-position='right'>
<input type="button" id="reset-button" class="divPlot" value="Reset View" data-intro="<b>Reset: </b>Reset 3D plot to default position if the view gets all turned around." data-step="5">
<x3d data-intro="<b>Cell Positions: </b>3D-plot of cell positions during <i>C. elegans</i> development. Drag to rotate in any direction and scroll to zoom." data-step="4">
</x3d>
<div id="small_multiples" data-intro="<b>Small Multiples: </b>Small multiples of the 3D view. Clicking on a small multiple rotates the 3D view to that position." data-step="6">
</div>
</div>
<!-- Tab interface for expression plots -->
<div id='expressionPlotTabs' role="tabpanel" data-intro="<b>Gene Expression: </b>Summaries of gene expression in heatmap and PCA form. Click on a highlighted group to generate a summary of differential gene expression." data-step="7" data-position='left'>
<!-- Nav tabs -->
<ul id='tabs' class="nav nav-tabs" role="tablist" data-tabs="tabs">
<li role="presentation" class='active'><a href="#pcaDiv" data-toggle="tab">PCA</a></li>
<li role="presentation"><a href="#exprDiv" data-toggle="tab">Heatmap</a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div id="pcaDiv" class="tab-pane active" ></div>
<div id='exprDiv' class="tab-pane"></div>
</div>
</div>
</div>
<div class="lineage_tree" data-intro="<b>Lineage Tree: </b><i>C. elegans</i> has stereotyped cell divisions and development. Divisions are represented as a binary tree that populates as the embryo develops. Drag the slider to navigate." data-step="8" data-position='top'>
</div>
</div>
<div id="divControls" class="divControls">
<div id="playback" class="control-section" data-intro="<b>Playback: </b>Development can be played back at various speeds." data-step="1" data-position='right'>
<h4>Playback</h4>
<button id="playpause" >Play</button>
<input type="range" id="timerange" defaultvalue="0" min="0" step="1" value="0" max="242">
<div id="speed" class="select-style" >
<select>
<option>slow</option>
<option>medium</option>
<option>fast</option>
</select>
</div>
</div>
<div id="highlighting" class="control-section" data-intro="<b>Highlighting: </b>Highlight up to four groups of cells in different colors. Set operations like AND and OR are also supported for complex queries over multiple groups." data-step="2" data-position='right'>
<h4>Highlighting</h4>
</div>
<!--
<div id="expression" class="control-section" data-intro="Placeholder." data-step="3" data-position='right'>
<h4>Expression</h4>
...Placeholder...
</div>
-->
</div>
<!-- About modal dialog -->
<div class="modal fade" id="aboutModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">About</h4>
</div>
<div class="modal-body">
<h1>3D <i>C. elegans</i> Embryogenesis and Gene Expression</h1>
<h2>Melissa Chiasson, Timothy Durham, Andrew Hill, and Ning Li, UW Genome Sciences and Statistics</h2>
<h4><p><i>Caenorhabditis elegans</i> (<i>C. elegans</i>) is a small roundworm used widely as a model organism in genetics and genomics. Its development has been well studied; each worm takes around 14 hours to grow from a single fertilized cell to a hatched larvae with 558 cells. Embryonic development proceeds due to the tightly choreographed expression of several genes. These patterns of gene expression contribute to cell identity. Location of cells during embryogenesis is also important, as cell-cell interactions can influence gene regulation. </p>
<p>The Expression Patterns In <i>C. elegans</i> (EPIC – http://epic2.gs.washington.edu/Epic2) project has generated a dataset that describes the spatial orientation of every cell during <i>C. elegans</i> embryogenesis, its developmental lineage and cell fate, and expression measurements for a set of about 227 genes. These data provide an expansive view of gene expression in the <i>C. elegans</i> embryo; however, to derive insights into gene expression patterns in different cells across time we need a tool to integrate and allow interactive exploration of the data.</p>
<figure>
<img src="https://github.com/CSE512-15S/fp-tdurham-ajh24-chiasson-ningli30/blob/master/img/hnd-1.png?raw=true" alt="hnd-1 expression through embryogenesis" width="25%">
<figcaption> hnd-1 expression as measured by red fluorescence in embryogenesis, from EPIC.</figcaption>
</figure>
<br>
<p>We seek to address this lack of resource by developing an interactive visualization that includes a 3D plot of the <i>C. elegans</i> developing embryo, a lineage tree that is synched to the 3D plot, and plots of gene expression patterns. Users will be able to explore data using filters for lineage, cell type, and time point. In this way we hope to build a tool that <i>C. elegans</i> researchers can use to easily investigate patterns of gene expression during worm embryogenesis.</p></h4>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- Help modal dialog -->
<div class="modal fade" id="helpModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Help</h4>
</div>
<div class="modal-body">
<p>Confused about where to start? We have two compelling examples of how this visualization can be used to better understand the development and gene expression patterns of specific lineages and cell types.</p>
<p>For the first example, select "intestine," from the dropdown menu. Hit play on the time slider, and those cells that will form the intestine will then be highlighted in the color of your choice (the default is red). At the gastrulation stage of development these cells migrate dorsally from ventral locations on the outside of the embryo to locations inside the embryo, with other cells migrating ventrally to fill in the space left by their migration. When the intestinal cell type is highlighted in our 3D plot, this migration can be observed clearly from any orientation, and other interacting lineages and cell types can be identified by using the multiple lineage highlighting feature. These cells also exhibit unique gene expression patterns, as evidenced by their grouping in the gene expression PCA plot.</p>
<img src="https://github.com/CSE512-15S/fp-tdurham-ajh24-chiasson-ningli30/blob/master/img/intestine_example.png?raw=true" width="75%">
<p>For the second example, select "C" from the dropdown menu. By the end of our time series, cells from the C lineage migrate to the posterior-dorsal edge of the embryo, forming a complex curvature around the back of the embryo from left to right. Patterns like this are hard to understand in two-dimensions (as seen in our 2D small multiple plots), but our 3D plot provides a more natural way to gain this insight. In addition, you will see in the gene expression PCA that these cells have a distinct gene expression pattern.</p>
<img src="https://github.com/CSE512-15S/fp-tdurham-ajh24-chiasson-ningli30/blob/master/img/c_example.png?raw=true" width="75%">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- Gene report modal dialog -->
<div class="modal fade" id="geneModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Gene Expression Report</h4>
</div>
<div class="modal-body">
<h5>Gene expression specificity for all genes within the selected population. Gene specificity p-values were calculated using a hypergeometric test for the number of cells expressing each gene in the highlighted selection vs the total population. The p-values are Bonferroni corrected based on the number of genes.</h5>
<table id="gene_report" cellspacing="1" class="tablesorter">
<thead>
<tr>
<th>Gene Name</th>
<th>Wormbase ID</th>
<th>Fraction Expressing</th>
<th>Fraction Expressing Selected</th>
<th>Gene Specificity p-val</th>
</tr>
</thead>
<tbody id="gene_report_body">
</tbody>
</table>
</div>
</div>
</div>
</div>
</body>
</html>