forked from kthorn/FPvisualization
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathPSFP.html
87 lines (79 loc) · 5.12 KB
/
PSFP.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
<!DOCTYPE html>
<html>
<head>
<title>Fluorescent protein properties</title>
<meta charset='utf-8'>
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/jquery-ui-1.10.3.custom.min.css">
<link rel="stylesheet" type="text/css" href="css/sliders.css">
<script src="http://code.jquery.com/jquery-1.9.1.js" charset="utf-8"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js" charset="utf-8"></script>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script type="text/javascript" src="js/jQRangeSlider-min.js"></script>
<script type="text/javascript" async="" src="http://www.google-analytics.com/ga.js"></script>
<script src="js/ga.js"></script>
</head>
<body>
<h1 align="middle">Photoswitchable Fluorescent Protein Properties</h1>
<div class="cf">
<div class="left">
<div id="graph"></div>
<div id="tooltip" class="hidden">
<h3>FPname</h3>
<p>Ex: <span id="exvalue"></span>nm</p>
<p>Em: <span id="emvalue"></span>nm</p>
<p>EC: <span id="ecvalue"></span></p>
<p>QY: <span id="qyvalue"></span></p>
<p>Brightness: <span id="brightnessvalue"></span></p>
</div>
</div>
<div class="right">
<div id="sliders"></div>
<div class="cf">
<div class="radioboxes">
<h2> X Axis </h2>
<div id="Xradio">
<input type="radio" id="Xlambda_ex" name="Xradio" value="lambda_ex" checked="checked" /><label for="Xlambda_ex">Excitation λ</label>
<input type="radio" id="Xlambda_em" name="Xradio" value="lambda_em"/><label for="Xlambda_em">Emission λ</label>
<input type="radio" id="Xstokes" name="Xradio" value="stokes"/><label for="Xstokes">Stokes Shift</label>
<input type="radio" id="XEC" name="Xradio" value="E"/><label for="XEC">EC</label>
<input type="radio" id="XQY" name="Xradio" value="QY"/><label for="XQY">QY</label>
<input type="radio" id="Xbrightness" name="Xradio" value="brightness"/><label for="Xbrightness">Brightness</label>
<input type="radio" id="Xpka" name="Xradio" value="pka"/><label for="Xpka">pKa</label>
<input type="radio" id="Xbleach" name="Xradio" value="bleach"/><label for="Xbleach">Stability</label>
<input type="radio" id="Xmature" name="Xradio" value="mature"/><label for="Xmature">Maturation</label>
</div>
</div>
<div class="radioboxes">
<h2> Y Axis </h2>
<div id="Yradio">
<input type="radio" id="Ylambda_ex" name="Yradio" value="lambda_ex"/><label for="Ylambda_ex">Excitation λ</label>
<input type="radio" id="Ylambda_em" name="Yradio" value="lambda_em" checked="checked" /><label for="Ylambda_em">Emission λ</label>
<input type="radio" id="Ystokes" name="Yradio" value="stokes"/><label for="Ystokes">Stokes Shift</label>
<input type="radio" id="YEC" name="Yradio" value="E"/><label for="YEC">EC</label>
<input type="radio" id="YQY" name="Yradio" value="QY"/><label for="YQY">QY</label>
<input type="radio" id="Ybrightness" name="Yradio" value="brightness"/><label for="Ybrightness">Brightness</label>
<input type="radio" id="Ypka" name="Yradio" value="pka"/><label for="Ypka">pKa</label>
<input type="radio" id="Ybleach" name="Yradio" value="bleach"/><label for="Ybleach">Stability</label>
<input type="radio" id="Ymature" name="Yradio" value="mature"/><label for="Ymature">Maturation</label>
</div>
</div>
</div>
</div>
</div>
<p id="blurb">Each fluorescent protein state is initially plotted with excitation wavelength on the x-axis and emission wavelength on the y-axis. The color is set
based on its emission wavelength, and fades to gray as the brightness (product of exctinction coefficient and quantum yield) decreases.
Photoconvertible proteins (e.g. green to red) are drawn as sqaures, with the different states connected by arrows. The color of the arrow corresponds to the switching wavelength.
Photoactivatible proteins (e.g. off to on) are drawn as circles; the circle boundary is colored according to the switching wavelength. Dashed boundaries indicate
proteins that are reversibly photoswitchable (e.g. off to on to off).
Mouseover each circle to see info on that protein or click on any datapoint to see the corresponding reference on PubMed. You can zoom using the mouse scroll wheel and pan by clicking and dragging. Use the filter sliders at the top right to select a subset of fluorescent proteins based on certain criteria. Use the X and Y axis toggle boxes to change what is plotted on each axis.</p>
<div id="table"></div>
<h4>Bibliography</h4>
<div id="bibliography" class="bibliography"></div>
<div class="footer">
<p>Developed by Talley Lambert and Kurt Thorn</p>
<a rel="license" href="http://creativecommons.org/licenses/by/3.0/deed.en_US"><img alt="Creative Commons License" style="border-width:0" src="http://i.creativecommons.org/l/by/3.0/88x31.png" /></a><br />This work is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by/3.0/deed.en_US">Creative Commons Attribution 3.0 Unported License</a>.
</div>
</body>
<script type="text/javascript" src="js/psfpvis.js"></script>
</html>