-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
131 lines (105 loc) · 5.18 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="description" content="Two-photon cross-section interactive graph">
<meta name="author" content="Rob Campbell">
<link rel="stylesheet" href="xsection.css" />
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>
<body>
<div style="position: relative; display: inline-block; width: 90%; height: 85vh;" id="chart"></div>
<br />
<button onclick="removeAllTraces()">Remove All</button>
<button onclick="showAllTraces()">Show All</button>
<button onclick="enableAlexa()">Show only Alexa dyes</button>
<button onclick="enableZipfel()">Show only Zipfel data</button>
<button onclick="enableDrobizhev()">Show only Drovizhev data</button>
<div>
<p>
These curves show the two-photon absorption cross-sections of commonly used dyes.
The units are in Goeppert-Mayers (GM), named after Maria Goeppert-Mayer, the discoverer of the 2-photon effect.
You can toggle individual curves by clicking on their entries in the legend.
</p>
<p>
Data come from the <a href="http://www.drbio.cornell.edu/cross_sections.html">Zipfel Lab</a> and from papers by Mikhail Drobizhev.
Mikhail kindly provided CSV files.
In general the data from Zipfel yield larger GM values than those from Drobizhev.
Likely this is due to preparation differences.
Care must be taken in comparing across datasets and so the origin of each cruve is indicated by an initial.
For example "eGFP (Z)" comes from the Zipfel lab and "eGFP (D)" is from Drobizhev.
</p>
<p>
The code underlying this page <a href="https://github.com/raacampbell/2p_crosssection_viewer">can be found here</a>.
The curves are stored in named sub-directories so their origin is clear.
</p>
<h3>Using the data</h3>
Note that the tunable Ti Saph lasers commonly used for multi-photon microscopy produce most of their power around 800 nm.
Typically power output at 1050 nm drops to about 15% of that at 800 nm.
<h3>Emission spectra</h3>
<ul>
<li><a href="https://www.chroma.com/spectra-viewer?fluorochromes=27215%2C10392%2C27065&parts=26208%2C25306%2C24198%2C25704">eBFP2, eGFP, tdTomato. With emission filters</a></li>
<li><a href="https://www.chroma.com/spectra-viewer?fluorochromes=27215%2C10392%2C27060%2C27065&parts=26208%2C25306%2C24198%2C25704">eBFP2, eGFP, tdTomato, mCherry. With emission filters</a></li>
</ul>
<h3>References</h3>
<ul>
<li><a href="https://www.ncbi.nlm.nih.gov/pmc/articles/PMC4772972/?report=reader">Drobizhev, 2011</a></li>
</ul>
<p>
</p>
</div>
<script src="js/functions.js"></script>
<script type="text/javascript">
// Files to read, their names, and colors
const files = [
{ filename: 'data/zipfel/Alexa488.csv', name: 'AF488 (Z)', marker: 'circle', color: 'rgb(49,130,189)' },
{ filename: 'data/zipfel/Alexa568.csv', name: 'AF568 (Z)', marker: 'circle', color: 'rgb(255,127,14)' },
{ filename: 'data/zipfel/Alexa594.csv', name: 'AF594 (Z)', marker: 'circle', color: 'rgb(255,127,14)' },
{ filename: 'data/zipfel/eGFP.csv', name: 'eGFP (Z)', marker: 'circle', color: 'rgb(44,160,44)' },
{ filename: 'data/zipfel/YFP.csv', name: 'YFP (Z)', marker: 'circle', color: 'rgb(230,220,10)' },
{ filename: 'data/zipfel/dsRED.csv', name: 'dsRED (Z)', marker: 'circle', color: 'rgb(200,20,44)' },
{ filename: 'data/drobizhev/EBFP2_0_w.csv', name: 'eBFP (D)', marker: 'square', color: 'rgb(0,0,230)' },
{ filename: 'data/drobizhev/EGFP_average_w.csv', name: 'eGFP (D)', marker: 'square', color: 'rgb(44,160,44)' },
{ filename: 'data/drobizhev/ECFP_w.csv', name: 'eCFP (D)', marker: 'square', color: 'rgb(10,190,194)' },
{ filename: 'data/drobizhev/citrine_w.csv', name: 'citrine_w (D)', marker: 'square', color: 'rgb(0,190,44)' },
{ filename: 'data/drobizhev/tdTomato_w.csv', name: 'tdTomato (D)', marker: 'square', color: 'rgb(200,50,44)' },
{ filename: 'data/drobizhev/mCherry_w.csv', name: 'mCherry (D)', marker: 'square', color: 'rgb(255, 192, 203)' },];
// Plot properties
var layout = {
title: '2-p cross sections of commonly used dyes',
xaxis: {
title: {
text: 'Wavelength (nm)',
},
mirror: true,
showline: true,
range: [750, 1110],
tickangle: -45,
ticks:'outside',
},
yaxis: {
title: {
text: 'GM',
},
mirror: true,
showline: true,
range: [0,250],
ticks:'outside',
},
showlegend: true,
};
// Read in the data using the dictionary and build new dictionary containing data
// from all files
DATA = readAllFilesIntoStructure(files)
Promise.all(DATA)
.then(traces => {
// Plot all the traces
Plotly.newPlot('chart', traces, layout);
})
.catch(error => {
console.error('Error reading data:', error);
});
</script>
</body>
</html>