Skip to content

Commit

Permalink
Added photoswitchable FP visualization
Browse files Browse the repository at this point in the history
  • Loading branch information
Kurt Thorn committed Aug 29, 2013
1 parent fd59875 commit a30d81c
Show file tree
Hide file tree
Showing 6 changed files with 653 additions and 1 deletion.
3 changes: 3 additions & 0 deletions .gitignore
View file
Expand Up @@ -213,3 +213,6 @@ pip-log.txt

#Mr Developer
.mr.developer.cfg

#misc
js/ga.js
84 changes: 84 additions & 0 deletions PSFP.html
View file
@@ -0,0 +1,84 @@
<!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 &lambda;</label>
<input type="radio" id="Xlambda_em" name="Xradio" value="lambda_em"/><label for="Xlambda_em">Emission &lambda;</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 &lambda;</label>
<input type="radio" id="Ylambda_em" name="Yradio" value="lambda_em" checked="checked" /><label for="Ylambda_em">Emission &lambda;</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 begins 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.
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>
16 changes: 16 additions & 0 deletions PSFPs.csv
View file
@@ -0,0 +1,16 @@
"UID","Name","type","lambda_ex","lambda_em","lambda_sw","E","QY","brightness","Aggregation","pka","DOI"
"kaede_1","Kaede","pc",508,518,,98800,0.88,86.9,"Tetramer",5.6,
"kaede_2","Kaede","pc",572,580,,60400,0.33,19.9,"Tetramer",5.6,
"kikgr1_1","KikGR1","pc",507,517,,53700,0.7,37.6,"Tetramer",7.8,
"kikgr1_2","KikGR1","pc",583,593,,35100,0.65,22.8,"Tetramer",5.5,
"pscfp2_1","PS-CFP2","pc",400,468,,43000,0.2,8.6,"Monomer",,
"pscfp2_2","PS-CFP2","pc",490,511,,47000,0.23,10.8,"Monomer",,
"meos2_1","mEos2","pc",506,519,,56000,0.84,47,"Monomer",5.6,
"meos2_2","mEos2","pc",573,584,,46000,0.66,30.4,"Monomer",6.4,
"meos3.2_1","Meos3.2","pc",507,516,,63400,0.7,53,"Monomer",5.4,
"meos3.2_2","Meos3.2","pc",572,580,,32200,0.55,18,"Monomer",5.8,
"psmorange_1","PSmOrange","pc",548,565,,113300,0.51,57.8,"Monomer",6.2,"10.1038/nmeth.1664 "
"psmorange_2","PSmOrange","pc",634,662,,32700,0.28,9.2,"Monomer",5.6,"10.1038/nmeth.1664 "
"PA-GFP","PA-GFP","pa",504,517,400,17400,0.79,13.7,"Monomer",,"10.1126/science.1074952 "
"PAmCherry1","PAmCherry1","pa",564,595,405,18000,0.46,8.3,"Monomer",6.3,"10.1038/nmeth.1298 "
"PATagRFP","PATagRFP","pa",562,595,405,66000,0.38,25.1,"Monomer",5.3,"10.1021/ja100906g "
11 changes: 10 additions & 1 deletion css/style.css
View file
Expand Up @@ -7,6 +7,16 @@ body {
}

/* Graph Styles */
.FP, .PSFP
{
shape-rendering: geometricPrecision;
opacity: 0.7;
}

.PSFP
{
stroke-width: 1.5px;
}

.label
{
Expand Down Expand Up @@ -68,7 +78,6 @@ circle {
line-height: 20px;
}


/* Content */

.left {
Expand Down

0 comments on commit a30d81c

Please sign in to comment.