| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>RNA Synthesis Optimization</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> |
| <script src="https://unpkg.com/feather-icons"></script> |
| <style> |
| .gradient-bg { |
| background: linear-gradient(135deg, #6b46c1 0%, #805ad5 100%); |
| } |
| .shadow-soft { |
| box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); |
| } |
| .card-hover:hover { |
| transform: translateY(-5px); |
| transition: all 0.3s ease; |
| } |
| </style> |
| </head> |
| <body class="bg-gray-50 font-sans"> |
| |
| <nav class="gradient-bg text-white py-4 px-6 shadow-soft"> |
| <div class="container mx-auto flex justify-between items-center"> |
| <div class="flex items-center space-x-2"> |
| <i data-feather="dna" class="w-8 h-8"></i> |
| <span class="text-xl font-bold">RNA Synthesis Dashboard</span> |
| </div> |
| <div class="hidden md:flex space-x-6"> |
| <a href="#" class="hover:text-gray-200">Overview</a> |
| <a href="#" class="hover:text-gray-200">Data Analysis</a> |
| <a href="#" class="hover:text-gray-200">Conclusions</a> |
| <a href="#" class="hover:text-gray-200">Methodology</a> |
| </div> |
| <button class="md:hidden"> |
| <i data-feather="menu" class="w-6 h-6"></i> |
| </button> |
| </div> |
| </nav> |
|
|
| |
| <div class="gradient-bg text-white py-16 px-6"> |
| <div class="container mx-auto text-center"> |
| <h1 class="text-4xl md:text-5xl font-bold mb-4">RNA Synthesis Optimization Analysis</h1> |
| <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> |
| <button class="bg-white text-purple-700 font-semibold py-3 px-6 rounded-lg hover:bg-gray-100 transition duration-300"> |
| Explore Data |
| </button> |
| </div> |
| </div> |
|
|
| |
| <div class="container mx-auto py-12 px-6"> |
| |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8 mb-12"> |
| <div class="bg-white rounded-xl p-6 shadow-soft card-hover"> |
| <div class="flex items-center mb-4"> |
| <div class="bg-purple-100 p-3 rounded-full mr-4"> |
| <i data-feather="trending-up" class="text-purple-600 w-6 h-6"></i> |
| </div> |
| <h3 class="text-lg font-semibold">Highest Yield</h3> |
| </div> |
| <p class="text-3xl font-bold text-purple-600 mb-2">2.027 µg/µL</p> |
| <p class="text-gray-600">Achieved on 9/11/2025 with 1.5µg DNA</p> |
| </div> |
| |
| <div class="bg-white rounded-xl p-6 shadow-soft card-hover"> |
| <div class="flex items-center mb-4"> |
| <div class="bg-blue-100 p-3 rounded-full mr-4"> |
| <i data-feather="activity" class="text-blue-600 w-6 h-6"></i> |
| </div> |
| <h3 class="text-lg font-semibold">Average Yield</h3> |
| </div> |
| <p class="text-3xl font-bold text-blue-600 mb-2">0.492 µg/µL</p> |
| <p class="text-gray-600">Across all successful experiments</p> |
| </div> |
| |
| <div class="bg-white rounded-xl p-6 shadow-soft card-hover"> |
| <div class="flex items-center mb-4"> |
| <div class="bg-green-100 p-3 rounded-full mr-4"> |
| <i data-feather="check-circle" class="text-green-600 w-6 h-6"></i> |
| </div> |
| <h3 class="text-lg font-semibold">Optimal DNA Input</h3> |
| </div> |
| <p class="text-3xl font-bold text-green-600 mb-2">1.5µg</p> |
| <p class="text-gray-600">Consistently produced highest yields</p> |
| </div> |
| </div> |
|
|
| |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-12"> |
| <div class="bg-white rounded-xl p-6 shadow-soft"> |
| <h2 class="text-xl font-bold mb-4">RNA Yield Over Time</h2> |
| <div class="h-80"> |
| <canvas id="yieldOverTimeChart"></canvas> |
| </div> |
| </div> |
| |
| <div class="bg-white rounded-xl p-6 shadow-soft"> |
| <h2 class="text-xl font-bold mb-4">DNA Input vs RNA Yield</h2> |
| <div class="h-80"> |
| <canvas id="dnaVsRnaChart"></canvas> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="bg-white rounded-xl p-6 shadow-soft mb-12"> |
| <h2 class="text-xl font-bold mb-6">Experimental Data</h2> |
| <div class="overflow-x-auto"> |
| <table class="min-w-full divide-y divide-gray-200"> |
| <thead class="bg-gray-50"> |
| <tr> |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Date</th> |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Sample</th> |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">DNA (µg)</th> |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">A260</th> |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">A260/280</th> |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">RNA (µg/µL)</th> |
| </tr> |
| </thead> |
| <tbody class="bg-white divide-y divide-gray-200"> |
| |
| </tbody> |
| </table> |
| </div> |
| </div> |
|
|
| |
| <div class="bg-white rounded-xl p-6 shadow-soft"> |
| <h2 class="text-xl font-bold mb-6">Key Findings & Recommendations</h2> |
| <div class="space-y-4"> |
| <div class="p-4 bg-purple-50 rounded-lg"> |
| <h3 class="font-semibold text-purple-700 mb-2">1. Optimal DNA Input</h3> |
| <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> |
| </div> |
| |
| <div class="p-4 bg-blue-50 rounded-lg"> |
| <h3 class="font-semibold text-blue-700 mb-2">2. Time Course Analysis</h3> |
| <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> |
| </div> |
| |
| <div class="p-4 bg-green-50 rounded-lg"> |
| <h3 class="font-semibold text-green-700 mb-2">3. Extraction Method Impact</h3> |
| <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> |
| </div> |
| |
| <div class="p-4 bg-yellow-50 rounded-lg"> |
| <h3 class="font-semibold text-yellow-700 mb-2">4. Protocol Recommendations</h3> |
| <ul class="list-disc pl-5 text-gray-700 space-y-1"> |
| <li>Use 1.5µg DNA template for consistent high yields</li> |
| <li>Standardize reaction time to ≥16 hours</li> |
| <li>Evaluate alternative purification methods for consistency</li> |
| <li>Monitor A260/280 ratios for quality control (ideal range 1.8-2.1)</li> |
| </ul> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <footer class="bg-gray-800 text-white py-8 px-6"> |
| <div class="container mx-auto"> |
| <div class="flex flex-col md:flex-row justify-between items-center"> |
| <div class="mb-6 md:mb-0"> |
| <div class="flex items-center space-x-2"> |
| <i data-feather="dna" class="w-6 h-6"></i> |
| <span class="text-lg font-bold">RNA Synthesis Dashboard</span> |
| </div> |
| <p class="mt-2 text-gray-400">Visualizing optimization data for better protocols</p> |
| </div> |
| <div class="flex space-x-6"> |
| <a href="#" class="hover:text-purple-300"> |
| <i data-feather="github" class="w-5 h-5"></i> |
| </a> |
| <a href="#" class="hover:text-purple-300"> |
| <i data-feather="twitter" class="w-5 h-5"></i> |
| </a> |
| <a href="#" class="hover:text-purple-300"> |
| <i data-feather="mail" class="w-5 h-5"></i> |
| </a> |
| </div> |
| </div> |
| <div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400"> |
| <p>© 2023 RNA Synthesis Optimization Dashboard. All rights reserved.</p> |
| </div> |
| </div> |
| </footer> |
|
|
| <script> |
| |
| feather.replace(); |
| |
| |
| const data1 = [ |
| {date: '7/23/2025', sample: 'ptc1a', dna: 2, a260: 2.598, ratio: 2.04, rna: 0.10392}, |
| {date: '7/23/2025', sample: 'ptc1b', dna: 2, a260: 2.39, ratio: 1.94, rna: 0.0956}, |
| {date: '7/25/2025', sample: 'ptc1a (4h)', dna: 5, a260: 1.02, ratio: 2.088, rna: 0.0408}, |
| {date: '7/26/2025', sample: 'ptc1a', dna: 5, a260: 1.064, ratio: 2.11, rna: 0.04256}, |
| {date: '7/26/2025', sample: 'ptc1b', dna: 5, a260: 19.85, ratio: 1.87, rna: 0.794}, |
| {date: '9/15/2025', sample: 'ptc1b', dna: 2, a260: 3.11, ratio: 2.07, rna: 0.1244}, |
| {date: '9/16/2025', sample: 'ptc1b', dna: 2, a260: 3.15, ratio: 2.041, rna: 0.126}, |
| {date: '9/18/2025', sample: 'ptc1b', dna: 2, a260: 1.77, ratio: 1.32, rna: 0.0708}, |
| {date: '9/19/2025', sample: 'ptc1a', dna: 2, a260: 1.59, ratio: 2.053, rna: 0.0636}, |
| {date: '9/19/2025', sample: 'ptc1b', dna: 2, a260: 2.94, ratio: 2.093, rna: 0.1176}, |
| {date: '9/22/2025', sample: 'ptc1a', dna: 2, a260: 16.5, ratio: 1.884, rna: 0.66}, |
| {date: '9/22/2025', sample: 'ptc1b', dna: 2, a260: 32.5, ratio: 1.932, rna: 1.3} |
| ]; |
| |
| const data2 = [ |
| {date: '8/1/2025', sample: 'Standard', dna: 1.5, a260: 4.6, ratio: 1.95, rna: 0.184}, |
| {date: '8/1/2025', sample: 'T7 pol', dna: 1.5, a260: 0.66, ratio: 1.882, rna: 0.0264}, |
| {date: '8/4/2025', sample: 'Standard', dna: 1.5, a260: 10.45, ratio: 1.94, rna: 0.418}, |
| {date: '8/5/2025', sample: 'Standard', dna: 1.5, a260: 24.28, ratio: 2.012, rna: 0.9712}, |
| {date: '8/6/2025', sample: 'T7 pol', dna: 2.0, a260: 0.163, ratio: 2.32, rna: 0.00652}, |
| {date: '8/8/2025', sample: 'Standard', dna: 1.5, a260: 12.06, ratio: 1.804, rna: 0.4824}, |
| {date: '8/12/2025', sample: 'Standard', dna: 1.5, a260: 17.95, ratio: 2.048, rna: 0.718}, |
| {date: '8/15/2025', sample: 'Standard', dna: 1.5, a260: 17.884, ratio: 1.803, rna: 0.71536}, |
| {date: '8/21/2025', sample: 'Standard', dna: 1.5, a260: 16.93, ratio: 2.127, rna: 0.6772}, |
| {date: '9/11/2025', sample: '0.5µg', dna: 0.5, a260: 42.47, ratio: 2.28, rna: 1.6988}, |
| {date: '9/11/2025', sample: '1.0µg', dna: 1.0, a260: 43.1962, ratio: 2.315, rna: 1.727848}, |
| {date: '9/11/2025', sample: '1.5µg', dna: 1.5, a260: 50.6832, ratio: 2.291, rna: 2.027328}, |
| {date: '9/11/2025', sample: 'Phenol 0.5µg', dna: 0.5, a260: 21.495, ratio: 2.24, rna: 0.8598}, |
| {date: '9/11/2025', sample: 'Phenol 1.0µg', dna: 1.0, a260: 4.46, ratio: 1.884, rna: 0.1784}, |
| {date: '9/11/2025', sample: 'Phenol 1.5µg', dna: 1.5, a260: 38.82, ratio: 2.27, rna: 1.5528} |
| ]; |
| |
| |
| const allData = [...data1, ...data2].sort((a, b) => new Date(a.date) - new Date(b.date)); |
| |
| |
| const tableBody = document.querySelector('tbody'); |
| allData.forEach(item => { |
| const row = document.createElement('tr'); |
| row.innerHTML = ` |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${item.date}</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${item.sample}</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${item.dna}</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${item.a260}</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${item.ratio}</td> |
| <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> |
| `; |
| tableBody.appendChild(row); |
| }); |
| |
| |
| const timeCtx = document.getElementById('yieldOverTimeChart').getContext('2d'); |
| new Chart(timeCtx, { |
| type: 'line', |
| data: { |
| labels: allData.map(item => `${item.date} (${item.sample})`), |
| datasets: [{ |
| label: 'RNA Yield (µg/µL)', |
| data: allData.map(item => item.rna), |
| backgroundColor: 'rgba(99, 102, 241, 0.2)', |
| borderColor: 'rgba(99, 102, 241, 1)', |
| borderWidth: 2, |
| tension: 0.1, |
| pointRadius: 4, |
| pointBackgroundColor: 'rgba(99, 102, 241, 1)' |
| }] |
| }, |
| options: { |
| responsive: true, |
| maintainAspectRatio: false, |
| scales: { |
| y: { |
| beginAtZero: true, |
| title: { |
| display: true, |
| text: 'RNA Concentration (µg/µL)' |
| } |
| }, |
| x: { |
| ticks: { |
| maxRotation: 45, |
| minRotation: 45 |
| } |
| } |
| }, |
| plugins: { |
| tooltip: { |
| callbacks: { |
| label: function(context) { |
| return `RNA: ${context.parsed.y.toFixed(4)} µg/µL`; |
| }, |
| afterLabel: function(context) { |
| const item = allData[context.dataIndex]; |
| return `DNA: ${item.dna}µg\nA260/280: ${item.ratio}`; |
| } |
| } |
| } |
| } |
| } |
| }); |
| |
| |
| const dnaRnaCtx = document.getElementById('dnaVsRnaChart').getContext('2d'); |
| new Chart(dnaRnaCtx, { |
| type: 'scatter', |
| data: { |
| datasets: [ |
| { |
| label: '0.5µg DNA', |
| data: allData.filter(item => item.dna === 0.5).map(item => ({ |
| x: item.dna, |
| y: item.rna, |
| sample: item.sample, |
| date: item.date |
| })), |
| backgroundColor: 'rgba(239, 68, 68, 0.7)', |
| pointRadius: 8 |
| }, |
| { |
| label: '1.0µg DNA', |
| data: allData.filter(item => item.dna === 1.0).map(item => ({ |
| x: item.dna, |
| y: item.rna, |
| sample: item.sample, |
| date: item.date |
| })), |
| backgroundColor: 'rgba(16, 185, 129, 0.7)', |
| pointRadius: 8 |
| }, |
| { |
| label: '1.5µg DNA', |
| data: allData.filter(item => item.dna === 1.5).map(item => ({ |
| x: item.dna, |
| y: item.rna, |
| sample: item.sample, |
| date: item.date |
| })), |
| backgroundColor: 'rgba(99, 102, 241, 0.7)', |
| pointRadius: 8 |
| }, |
| { |
| label: '2.0µg DNA', |
| data: allData.filter(item => item.dna === 2.0).map(item => ({ |
| x: item.dna, |
| y: item.rna, |
| sample: item.sample, |
| date: item.date |
| })), |
| backgroundColor: 'rgba(245, 158, 11, 0.7)', |
| pointRadius: 8 |
| }, |
| { |
| label: '5.0µg DNA', |
| data: allData.filter(item => item.dna === 5.0).map(item => ({ |
| x: item.dna, |
| y: item.rna, |
| sample: item.sample, |
| date: item.date |
| })), |
| backgroundColor: 'rgba(139, 92, 246, 0.7)', |
| pointRadius: 8 |
| } |
| ] |
| }, |
| options: { |
| responsive: true, |
| maintainAspectRatio: false, |
| scales: { |
| y: { |
| beginAtZero: true, |
| title: { |
| display: true, |
| text: 'RNA Yield (µg/µL)' |
| } |
| }, |
| x: { |
| title: { |
| display: true, |
| text: 'DNA Input (µg)' |
| }, |
| ticks: { |
| stepSize: 0.5 |
| } |
| } |
| }, |
| plugins: { |
| tooltip: { |
| callbacks: { |
| label: function(context) { |
| return `RNA: ${context.parsed.y.toFixed(4)} µg/µL`; |
| }, |
| afterLabel: function(context) { |
| const item = allData.find(item => |
| item.dna === context.parsed.x && |
| item.rna === context.parsed.y && |
| item.date === context.raw.date |
| ); |
| return `Sample: ${item.sample}\nDate: ${item.date}\nA260/280: ${item.ratio}`; |
| } |
| } |
| } |
| } |
| } |
| }); |
| </script> |
| </body> |
| </html> |
|
|
