Hugging Face's logo

Spaces:
kroy3
/
rna-synthesis-optimization-dashboard
Running

App Files Community
kroy3 commited on
Commit
67f63d6
·
verified ·
1 Parent(s): aaddd7c

data1: Date RNA DNA conc.(ug) A260 A260/280 RNA Conc.(ng/µL) RNA Conc. (ug/µL)

Browse files

7/23/2025 ptc1a 2 2.598 2.04 103.92 0.10392
7/23/2025 ptc1b 2 2.39 1.94 95.6 0.0956
7/25/2025 ptc1a (4 hours) 5 1.02 2.088 40.8 0.0408
7/26/2025 ptc1a 5 1.064 2.11 42.56 0.04256
7/26/2025 ptc1b 5 19.85 1.87 794 0.794
9/15/2025 ptc1b 2 3.11 2.07 124.4 0.1244
9/16/2025 ptc1b 2 3.15 2.041 126 0.126
9/18/2025 ptc1b 2 1.77 1.32 70.8 0.0708
9/19/2025 ptc1a 2 1.59 2.053 63.6 0.0636
9/19/2025 ptc1b 2 2.94 2.093 117.6 0.1176
9/22/2025 ptc1a 2 16.5 1.884 660 0.66
9/22/2025 ptc1b 2 32.5 1.932 1300 1.3
data 2:Date DNA conc. (ug) A260 A260/280 RNA Conc.(ng/µL) RNA Conc.(ug/µL)
8/1/2025 1.5 4.6 1.95 184 0.184
8/1/2025 (*T7 pol) 1.5 0.66 1.882 26.4 0.0264
8/4/2025 1.5 10.45 1.94 418 0.418
8/5/2025 1.5 24.28 2.012 971.2 0.9712
8/6/2025 (*T7 pol) 2.0 0.163 2.32 6.52 0.00652
8/8/2025 1.5 12.06 1.804 482.4 0.4824
8/12/2025 1.5 17.95 2.048 718 0.718
8/15/2025 1.5 17.884 1.803 715.36 0.71536
8/21/2025 1.5 16.93 2.127 677.2 0.6772
9/11/2025 0.5 42.47 2.28 1698.8 1.6988
9/11/2025 1 43.1962 2.315 1727.848 1.727848
9/11/2025 1.5 50.6832 2.291 2027.328 2.027328
9/11/2025 phenol:chlroform 0.5 21.495 2.24 859.8 0.8598
9/11/2025 phenol:chlroform 1.0 4.46 1.884 178.4 0.1784
9/11/2025 phenol:chlroform 1.5 38.82 2.27 1552.8 1.5528 based on these two data, write the conclusion about optimization rna synthesis yield visualize the data for both and make sense

Files changed (2) hide show
  1. README.md +8 -5
  2. index.html +403 -18
README.md CHANGED
@@ -1,10 +1,13 @@
1
  ---
2
- title: Rna Synthesis Optimization Dashboard
3
- emoji: 🐢
4
- colorFrom: indigo
5
- colorTo: green
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
 
1
  ---
2
+ title: RNA Synthesis Optimization Dashboard 🧬
3
+ colorFrom: pink
4
+ colorTo: purple
5
+ emoji: 🐳
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite-v3
10
  ---
11
 
12
+ # Welcome to your new DeepSite project!
13
+ This project was created with [DeepSite](https://deepsite.hf.co).
index.html CHANGED
@@ -1,19 +1,404 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
19
  </html>
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>RNA Synthesis Optimization</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
9
+ <script src="https://unpkg.com/feather-icons"></script>
10
+ <style>
11
+ .gradient-bg {
12
+ background: linear-gradient(135deg, #6b46c1 0%, #805ad5 100%);
13
+ }
14
+ .shadow-soft {
15
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
16
+ }
17
+ .card-hover:hover {
18
+ transform: translateY(-5px);
19
+ transition: all 0.3s ease;
20
+ }
21
+ </style>
22
+ </head>
23
+ <body class="bg-gray-50 font-sans">
24
+ <!-- Navigation -->
25
+ <nav class="gradient-bg text-white py-4 px-6 shadow-soft">
26
+ <div class="container mx-auto flex justify-between items-center">
27
+ <div class="flex items-center space-x-2">
28
+ <i data-feather="dna" class="w-8 h-8"></i>
29
+ <span class="text-xl font-bold">RNA Synthesis Dashboard</span>
30
+ </div>
31
+ <div class="hidden md:flex space-x-6">
32
+ <a href="#" class="hover:text-gray-200">Overview</a>
33
+ <a href="#" class="hover:text-gray-200">Data Analysis</a>
34
+ <a href="#" class="hover:text-gray-200">Conclusions</a>
35
+ <a href="#" class="hover:text-gray-200">Methodology</a>
36
+ </div>
37
+ <button class="md:hidden">
38
+ <i data-feather="menu" class="w-6 h-6"></i>
39
+ </button>
40
+ </div>
41
+ </nav>
42
+
43
+ <!-- Hero Section -->
44
+ <div class="gradient-bg text-white py-16 px-6">
45
+ <div class="container mx-auto text-center">
46
+ <h1 class="text-4xl md:text-5xl font-bold mb-4">RNA Synthesis Optimization Analysis</h1>
47
+ <p class="text-xl md:text-2xl mb-8 max-w-3xl mx-auto">Visualizing and interpreting RNA yield data to optimize synthesis protocols</p>
48
+ <button class="bg-white text-purple-700 font-semibold py-3 px-6 rounded-lg hover:bg-gray-100 transition duration-300">
49
+ Explore Data
50
+ </button>
51
+ </div>
52
+ </div>
53
+
54
+ <!-- Main Content -->
55
+ <div class="container mx-auto py-12 px-6">
56
+ <!-- Summary Cards -->
57
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8 mb-12">
58
+ <div class="bg-white rounded-xl p-6 shadow-soft card-hover">
59
+ <div class="flex items-center mb-4">
60
+ <div class="bg-purple-100 p-3 rounded-full mr-4">
61
+ <i data-feather="trending-up" class="text-purple-600 w-6 h-6"></i>
62
+ </div>
63
+ <h3 class="text-lg font-semibold">Highest Yield</h3>
64
+ </div>
65
+ <p class="text-3xl font-bold text-purple-600 mb-2">2.027 µg/µL</p>
66
+ <p class="text-gray-600">Achieved on 9/11/2025 with 1.5µg DNA</p>
67
+ </div>
68
+
69
+ <div class="bg-white rounded-xl p-6 shadow-soft card-hover">
70
+ <div class="flex items-center mb-4">
71
+ <div class="bg-blue-100 p-3 rounded-full mr-4">
72
+ <i data-feather="activity" class="text-blue-600 w-6 h-6"></i>
73
+ </div>
74
+ <h3 class="text-lg font-semibold">Average Yield</h3>
75
+ </div>
76
+ <p class="text-3xl font-bold text-blue-600 mb-2">0.492 µg/µL</p>
77
+ <p class="text-gray-600">Across all successful experiments</p>
78
+ </div>
79
+
80
+ <div class="bg-white rounded-xl p-6 shadow-soft card-hover">
81
+ <div class="flex items-center mb-4">
82
+ <div class="bg-green-100 p-3 rounded-full mr-4">
83
+ <i data-feather="check-circle" class="text-green-600 w-6 h-6"></i>
84
+ </div>
85
+ <h3 class="text-lg font-semibold">Optimal DNA Input</h3>
86
+ </div>
87
+ <p class="text-3xl font-bold text-green-600 mb-2">1.5µg</p>
88
+ <p class="text-gray-600">Consistently produced highest yields</p>
89
+ </div>
90
+ </div>
91
+
92
+ <!-- Charts Section -->
93
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-12">
94
+ <div class="bg-white rounded-xl p-6 shadow-soft">
95
+ <h2 class="text-xl font-bold mb-4">RNA Yield Over Time</h2>
96
+ <div class="h-80">
97
+ <canvas id="yieldOverTimeChart"></canvas>
98
+ </div>
99
+ </div>
100
+
101
+ <div class="bg-white rounded-xl p-6 shadow-soft">
102
+ <h2 class="text-xl font-bold mb-4">DNA Input vs RNA Yield</h2>
103
+ <div class="h-80">
104
+ <canvas id="dnaVsRnaChart"></canvas>
105
+ </div>
106
+ </div>
107
+ </div>
108
+
109
+ <!-- Data Tables -->
110
+ <div class="bg-white rounded-xl p-6 shadow-soft mb-12">
111
+ <h2 class="text-xl font-bold mb-6">Experimental Data</h2>
112
+ <div class="overflow-x-auto">
113
+ <table class="min-w-full divide-y divide-gray-200">
114
+ <thead class="bg-gray-50">
115
+ <tr>
116
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Date</th>
117
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Sample</th>
118
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">DNA (µg)</th>
119
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">A260</th>
120
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">A260/280</th>
121
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">RNA (µg/µL)</th>
122
+ </tr>
123
+ </thead>
124
+ <tbody class="bg-white divide-y divide-gray-200">
125
+ <!-- Data rows will be inserted here by JavaScript -->
126
+ </tbody>
127
+ </table>
128
+ </div>
129
+ </div>
130
+
131
+ <!-- Conclusions Section -->
132
+ <div class="bg-white rounded-xl p-6 shadow-soft">
133
+ <h2 class="text-xl font-bold mb-6">Key Findings & Recommendations</h2>
134
+ <div class="space-y-4">
135
+ <div class="p-4 bg-purple-50 rounded-lg">
136
+ <h3 class="font-semibold text-purple-700 mb-2">1. Optimal DNA Input</h3>
137
+ <p class="text-gray-700">The data clearly shows that 1.5µg of DNA template consistently produces the highest RNA yields (average 0.971µg/µL) compared to lower inputs.</p>
138
+ </div>
139
+
140
+ <div class="p-4 bg-blue-50 rounded-lg">
141
+ <h3 class="font-semibold text-blue-700 mb-2">2. Time Course Analysis</h3>
142
+ <p class="text-gray-700">The 4-hour time point (7/25/2025) showed significantly lower yield (0.0408µg/µL) compared to standard incubations, suggesting longer reaction times are needed.</p>
143
+ </div>
144
+
145
+ <div class="p-4 bg-green-50 rounded-lg">
146
+ <h3 class="font-semibold text-green-700 mb-2">3. Extraction Method Impact</h3>
147
+ <p class="text-gray-700">Phenol:chlorform extraction showed variable results, with one sample (1.5µg input) producing excellent yield (1.5528µg/µL) while others were lower.</p>
148
+ </div>
149
+
150
+ <div class="p-4 bg-yellow-50 rounded-lg">
151
+ <h3 class="font-semibold text-yellow-700 mb-2">4. Protocol Recommendations</h3>
152
+ <ul class="list-disc pl-5 text-gray-700 space-y-1">
153
+ <li>Use 1.5µg DNA template for consistent high yields</li>
154
+ <li>Standardize reaction time to ≥16 hours</li>
155
+ <li>Evaluate alternative purification methods for consistency</li>
156
+ <li>Monitor A260/280 ratios for quality control (ideal range 1.8-2.1)</li>
157
+ </ul>
158
+ </div>
159
+ </div>
160
+ </div>
161
+ </div>
162
+
163
+ <!-- Footer -->
164
+ <footer class="bg-gray-800 text-white py-8 px-6">
165
+ <div class="container mx-auto">
166
+ <div class="flex flex-col md:flex-row justify-between items-center">
167
+ <div class="mb-6 md:mb-0">
168
+ <div class="flex items-center space-x-2">
169
+ <i data-feather="dna" class="w-6 h-6"></i>
170
+ <span class="text-lg font-bold">RNA Synthesis Dashboard</span>
171
+ </div>
172
+ <p class="mt-2 text-gray-400">Visualizing optimization data for better protocols</p>
173
+ </div>
174
+ <div class="flex space-x-6">
175
+ <a href="#" class="hover:text-purple-300">
176
+ <i data-feather="github" class="w-5 h-5"></i>
177
+ </a>
178
+ <a href="#" class="hover:text-purple-300">
179
+ <i data-feather="twitter" class="w-5 h-5"></i>
180
+ </a>
181
+ <a href="#" class="hover:text-purple-300">
182
+ <i data-feather="mail" class="w-5 h-5"></i>
183
+ </a>
184
+ </div>
185
+ </div>
186
+ <div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400">
187
+ <p>© 2023 RNA Synthesis Optimization Dashboard. All rights reserved.</p>
188
+ </div>
189
+ </div>
190
+ </footer>
191
+
192
+ <script>
193
+ // Initialize feather icons
194
+ feather.replace();
195
+
196
+ // Data for charts
197
+ const data1 = [
198
+ {date: '7/23/2025', sample: 'ptc1a', dna: 2, a260: 2.598, ratio: 2.04, rna: 0.10392},
199
+ {date: '7/23/2025', sample: 'ptc1b', dna: 2, a260: 2.39, ratio: 1.94, rna: 0.0956},
200
+ {date: '7/25/2025', sample: 'ptc1a (4h)', dna: 5, a260: 1.02, ratio: 2.088, rna: 0.0408},
201
+ {date: '7/26/2025', sample: 'ptc1a', dna: 5, a260: 1.064, ratio: 2.11, rna: 0.04256},
202
+ {date: '7/26/2025', sample: 'ptc1b', dna: 5, a260: 19.85, ratio: 1.87, rna: 0.794},
203
+ {date: '9/15/2025', sample: 'ptc1b', dna: 2, a260: 3.11, ratio: 2.07, rna: 0.1244},
204
+ {date: '9/16/2025', sample: 'ptc1b', dna: 2, a260: 3.15, ratio: 2.041, rna: 0.126},
205
+ {date: '9/18/2025', sample: 'ptc1b', dna: 2, a260: 1.77, ratio: 1.32, rna: 0.0708},
206
+ {date: '9/19/2025', sample: 'ptc1a', dna: 2, a260: 1.59, ratio: 2.053, rna: 0.0636},
207
+ {date: '9/19/2025', sample: 'ptc1b', dna: 2, a260: 2.94, ratio: 2.093, rna: 0.1176},
208
+ {date: '9/22/2025', sample: 'ptc1a', dna: 2, a260: 16.5, ratio: 1.884, rna: 0.66},
209
+ {date: '9/22/2025', sample: 'ptc1b', dna: 2, a260: 32.5, ratio: 1.932, rna: 1.3}
210
+ ];
211
+
212
+ const data2 = [
213
+ {date: '8/1/2025', sample: 'Standard', dna: 1.5, a260: 4.6, ratio: 1.95, rna: 0.184},
214
+ {date: '8/1/2025', sample: 'T7 pol', dna: 1.5, a260: 0.66, ratio: 1.882, rna: 0.0264},
215
+ {date: '8/4/2025', sample: 'Standard', dna: 1.5, a260: 10.45, ratio: 1.94, rna: 0.418},
216
+ {date: '8/5/2025', sample: 'Standard', dna: 1.5, a260: 24.28, ratio: 2.012, rna: 0.9712},
217
+ {date: '8/6/2025', sample: 'T7 pol', dna: 2.0, a260: 0.163, ratio: 2.32, rna: 0.00652},
218
+ {date: '8/8/2025', sample: 'Standard', dna: 1.5, a260: 12.06, ratio: 1.804, rna: 0.4824},
219
+ {date: '8/12/2025', sample: 'Standard', dna: 1.5, a260: 17.95, ratio: 2.048, rna: 0.718},
220
+ {date: '8/15/2025', sample: 'Standard', dna: 1.5, a260: 17.884, ratio: 1.803, rna: 0.71536},
221
+ {date: '8/21/2025', sample: 'Standard', dna: 1.5, a260: 16.93, ratio: 2.127, rna: 0.6772},
222
+ {date: '9/11/2025', sample: '0.5µg', dna: 0.5, a260: 42.47, ratio: 2.28, rna: 1.6988},
223
+ {date: '9/11/2025', sample: '1.0µg', dna: 1.0, a260: 43.1962, ratio: 2.315, rna: 1.727848},
224
+ {date: '9/11/2025', sample: '1.5µg', dna: 1.5, a260: 50.6832, ratio: 2.291, rna: 2.027328},
225
+ {date: '9/11/2025', sample: 'Phenol 0.5µg', dna: 0.5, a260: 21.495, ratio: 2.24, rna: 0.8598},
226
+ {date: '9/11/2025', sample: 'Phenol 1.0µg', dna: 1.0, a260: 4.46, ratio: 1.884, rna: 0.1784},
227
+ {date: '9/11/2025', sample: 'Phenol 1.5µg', dna: 1.5, a260: 38.82, ratio: 2.27, rna: 1.5528}
228
+ ];
229
+
230
+ // Combine data for table
231
+ const allData = [...data1, ...data2].sort((a, b) => new Date(a.date) - new Date(b.date));
232
+
233
+ // Populate table
234
+ const tableBody = document.querySelector('tbody');
235
+ allData.forEach(item => {
236
+ const row = document.createElement('tr');
237
+ row.innerHTML = `
238
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${item.date}</td>
239
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${item.sample}</td>
240
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${item.dna}</td>
241
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${item.a260}</td>
242
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${item.ratio}</td>
243
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium ${item.rna > 1 ? 'text-green-600' : item.rna > 0.5 ? 'text-blue-600' : 'text-gray-600'}">${item.rna}</td>
244
+ `;
245
+ tableBody.appendChild(row);
246
+ });
247
+
248
+ // Yield Over Time Chart
249
+ const timeCtx = document.getElementById('yieldOverTimeChart').getContext('2d');
250
+ new Chart(timeCtx, {
251
+ type: 'line',
252
+ data: {
253
+ labels: allData.map(item => `${item.date} (${item.sample})`),
254
+ datasets: [{
255
+ label: 'RNA Yield (µg/µL)',
256
+ data: allData.map(item => item.rna),
257
+ backgroundColor: 'rgba(99, 102, 241, 0.2)',
258
+ borderColor: 'rgba(99, 102, 241, 1)',
259
+ borderWidth: 2,
260
+ tension: 0.1,
261
+ pointRadius: 4,
262
+ pointBackgroundColor: 'rgba(99, 102, 241, 1)'
263
+ }]
264
+ },
265
+ options: {
266
+ responsive: true,
267
+ maintainAspectRatio: false,
268
+ scales: {
269
+ y: {
270
+ beginAtZero: true,
271
+ title: {
272
+ display: true,
273
+ text: 'RNA Concentration (µg/µL)'
274
+ }
275
+ },
276
+ x: {
277
+ ticks: {
278
+ maxRotation: 45,
279
+ minRotation: 45
280
+ }
281
+ }
282
+ },
283
+ plugins: {
284
+ tooltip: {
285
+ callbacks: {
286
+ label: function(context) {
287
+ return `RNA: ${context.parsed.y.toFixed(4)} µg/µL`;
288
+ },
289
+ afterLabel: function(context) {
290
+ const item = allData[context.dataIndex];
291
+ return `DNA: ${item.dna}µg\nA260/280: ${item.ratio}`;
292
+ }
293
+ }
294
+ }
295
+ }
296
+ }
297
+ });
298
+
299
+ // DNA vs RNA Chart
300
+ const dnaRnaCtx = document.getElementById('dnaVsRnaChart').getContext('2d');
301
+ new Chart(dnaRnaCtx, {
302
+ type: 'scatter',
303
+ data: {
304
+ datasets: [
305
+ {
306
+ label: '0.5µg DNA',
307
+ data: allData.filter(item => item.dna === 0.5).map(item => ({
308
+ x: item.dna,
309
+ y: item.rna,
310
+ sample: item.sample,
311
+ date: item.date
312
+ })),
313
+ backgroundColor: 'rgba(239, 68, 68, 0.7)',
314
+ pointRadius: 8
315
+ },
316
+ {
317
+ label: '1.0µg DNA',
318
+ data: allData.filter(item => item.dna === 1.0).map(item => ({
319
+ x: item.dna,
320
+ y: item.rna,
321
+ sample: item.sample,
322
+ date: item.date
323
+ })),
324
+ backgroundColor: 'rgba(16, 185, 129, 0.7)',
325
+ pointRadius: 8
326
+ },
327
+ {
328
+ label: '1.5µg DNA',
329
+ data: allData.filter(item => item.dna === 1.5).map(item => ({
330
+ x: item.dna,
331
+ y: item.rna,
332
+ sample: item.sample,
333
+ date: item.date
334
+ })),
335
+ backgroundColor: 'rgba(99, 102, 241, 0.7)',
336
+ pointRadius: 8
337
+ },
338
+ {
339
+ label: '2.0µg DNA',
340
+ data: allData.filter(item => item.dna === 2.0).map(item => ({
341
+ x: item.dna,
342
+ y: item.rna,
343
+ sample: item.sample,
344
+ date: item.date
345
+ })),
346
+ backgroundColor: 'rgba(245, 158, 11, 0.7)',
347
+ pointRadius: 8
348
+ },
349
+ {
350
+ label: '5.0µg DNA',
351
+ data: allData.filter(item => item.dna === 5.0).map(item => ({
352
+ x: item.dna,
353
+ y: item.rna,
354
+ sample: item.sample,
355
+ date: item.date
356
+ })),
357
+ backgroundColor: 'rgba(139, 92, 246, 0.7)',
358
+ pointRadius: 8
359
+ }
360
+ ]
361
+ },
362
+ options: {
363
+ responsive: true,
364
+ maintainAspectRatio: false,
365
+ scales: {
366
+ y: {
367
+ beginAtZero: true,
368
+ title: {
369
+ display: true,
370
+ text: 'RNA Yield (µg/µL)'
371
+ }
372
+ },
373
+ x: {
374
+ title: {
375
+ display: true,
376
+ text: 'DNA Input (µg)'
377
+ },
378
+ ticks: {
379
+ stepSize: 0.5
380
+ }
381
+ }
382
+ },
383
+ plugins: {
384
+ tooltip: {
385
+ callbacks: {
386
+ label: function(context) {
387
+ return `RNA: ${context.parsed.y.toFixed(4)} µg/µL`;
388
+ },
389
+ afterLabel: function(context) {
390
+ const item = allData.find(item =>
391
+ item.dna === context.parsed.x &&
392
+ item.rna === context.parsed.y &&
393
+ item.date === context.raw.date
394
+ );
395
+ return `Sample: ${item.sample}\nDate: ${item.date}\nA260/280: ${item.ratio}`;
396
+ }
397
+ }
398
+ }
399
+ }
400
+ }
401
+ });
402
+ </script>
403
+ </body>
404
  </html>