| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Genomic Data Explorer</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet"> |
| <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script> |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> |
| <script src="https://unpkg.com/feather-icons"></script> |
| <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> |
| <style> |
| .dna-pattern { |
| background-image: url('http://static.photos/science/1200x630/42'); |
| background-size: cover; |
| background-position: center; |
| background-blend-mode: overlay; |
| } |
| .gene-card:hover { |
| transform: translateY(-5px); |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); |
| } |
| .chromosome-tab.active { |
| border-bottom: 3px solid #3b82f6; |
| } |
| </style> |
| </head> |
| <body class="bg-gray-50"> |
| |
| <div class="dna-pattern bg-blue-600 text-white"> |
| <div class="container mx-auto px-6 py-24 bg-black bg-opacity-50"> |
| <div class="max-w-3xl mx-auto text-center" data-aos="fade-up"> |
| <h1 class="text-4xl md:text-5xl font-bold mb-6">Genomic Data Explorer</h1> |
| <p class="text-xl md:text-2xl mb-8">Visualizing SNP data with interactive charts and comprehensive analysis</p> |
| <div class="flex justify-center space-x-4"> |
| <a href="#data-table" class="px-6 py-3 bg-white text-blue-600 font-semibold rounded-lg hover:bg-gray-100 transition">Explore Data</a> |
| <a href="#visualizations" class="px-6 py-3 border-2 border-white text-white font-semibold rounded-lg hover:bg-white hover:text-blue-600 transition">View Charts</a> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="bg-white shadow-sm sticky top-0 z-10"> |
| <div class="container mx-auto px-6 py-4 overflow-x-auto"> |
| <div class="flex space-x-8"> |
| <button class="chromosome-tab active px-4 py-2 font-medium text-gray-700 whitespace-nowrap" data-chr="all">All Chromosomes</button> |
| <button class="chromosome-tab px-4 py-2 font-medium text-gray-500 whitespace-nowrap" data-chr="1">Chr 1</button> |
| <button class="chromosome-tab px-4 py-2 font-medium text-gray-500 whitespace-nowrap" data-chr="5">Chr 5</button> |
| <button class="chromosome-tab px-4 py-2 font-medium text-gray-500 whitespace-nowrap" data-chr="6">Chr 6</button> |
| <button class="chromosome-tab px-4 py-2 font-medium text-gray-500 whitespace-nowrap" data-chr="13">Chr 13</button> |
| <button class="chromosome-tab px-4 py-2 font-medium text-gray-500 whitespace-nowrap" data-chr="20">Chr 20</button> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="container mx-auto px-6 py-12"> |
| |
| <section id="data-table" class="mb-20" data-aos="fade-up"> |
| <div class="flex justify-between items-center mb-8"> |
| <h2 class="text-2xl font-bold text-gray-800">SNP Dataset</h2> |
| <div class="flex space-x-3"> |
| <button class="px-4 py-2 bg-blue-100 text-blue-600 rounded-lg flex items-center"> |
| <i data-feather="download" class="mr-2 w-4 h-4"></i> Download CSV |
| </button> |
| <button class="px-4 py-2 bg-gray-100 text-gray-600 rounded-lg flex items-center"> |
| <i data-feather="filter" class="mr-2 w-4 h-4"></i> Filter |
| </button> |
| </div> |
| </div> |
| |
| <div class="bg-white rounded-xl shadow-md overflow-hidden"> |
| <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">RSID</th> |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Chromosome</th> |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Position</th> |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Genotype</th> |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Gene</th> |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Description</th> |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Source</th> |
| </tr> |
| </thead> |
| <tbody class="bg-white divide-y divide-gray-200"> |
| <tr> |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-blue-600">rs3768046</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">1</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">43,766,426</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"><span class="px-2 py-1 bg-green-100 text-green-800 rounded-full">GG</span></td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">TIE1 locus</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">-</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Frontiers in Psychiatry</td> |
| </tr> |
| <tr> |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-blue-600">rs1199039</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">1</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">43,784,956</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"><span class="px-2 py-1 bg-blue-100 text-blue-800 rounded-full">AA</span></td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Unknown</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">-</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Scientific literature</td> |
| </tr> |
| <tr> |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-blue-600">rs11210892</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">1</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">44,100,084</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"><span class="px-2 py-1 bg-green-100 text-green-800 rounded-full">GG</span></td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">intron</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">-</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Frontiers in Psychiatry</td> |
| </tr> |
| <tr> |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-blue-600">rs12741964</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">1</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">44,254,586</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"><span class="px-2 py-1 bg-green-100 text-green-800 rounded-full">GG</span></td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Unknown</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">-</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Scientific literature</td> |
| </tr> |
| <tr> |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-blue-600">rs2906457</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">1</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">44,338,575</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"><span class="px-2 py-1 bg-purple-100 text-purple-800 rounded-full">AC</span></td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">ST3GAL3 locus</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">-</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Frontiers in Psychiatry</td> |
| </tr> |
| <tr> |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-blue-600">rs27048</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">5</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">1,412,645</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"><span class="px-2 py-1 bg-yellow-100 text-yellow-800 rounded-full">CT</span></td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Unknown</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">-</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Scientific literature</td> |
| </tr> |
| <tr> |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-blue-600">rs2652511</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">5</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">1,446,389</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"><span class="px-2 py-1 bg-green-100 text-green-800 rounded-full">GG</span></td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">SLC6A3 locus</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">-</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Frontiers in Psychiatry</td> |
| </tr> |
| <tr> |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-blue-600">rs10044618</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">5</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">87,781,168</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"><span class="px-2 py-1 bg-red-100 text-red-800 rounded-full">TT</span></td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Unknown</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">-</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Scientific literature</td> |
| </tr> |
| <tr> |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-blue-600">rs4916723</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">5</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">87,854,395</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"><span class="px-2 py-1 bg-blue-100 text-blue-800 rounded-full">AA</span></td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">LINC00461 locus</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">-</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Frontiers in Psychiatry</td> |
| </tr> |
| <tr> |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-blue-600">rs6296</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">6</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">78,172,260</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"><span class="px-2 py-1 bg-indigo-100 text-indigo-800 rounded-full">CC</span></td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">HTR1B</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">associated with inattention</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">PMC5690554</td> |
| </tr> |
| <tr> |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-blue-600">rs1410739</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">13</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">78,813,140</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"><span class="px-2 py-1 bg-red-100 text-red-800 rounded-full">TT</span></td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">OBI1-AS1 locus</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">-</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Frontiers in Psychiatry</td> |
| </tr> |
| <tr> |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-blue-600">rs3746544</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">20</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">10,287,084</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"><span class="px-2 py-1 bg-teal-100 text-teal-800 rounded-full">GT</span></td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">SNAP-25</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">associated with hyperactivity-impulsivity</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">PMC5690554</td> |
| </tr> |
| </tbody> |
| </table> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="visualizations" class="mb-20"> |
| <h2 class="text-2xl font-bold text-gray-800 mb-8" data-aos="fade-up">Data Visualizations</h2> |
| |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-8"> |
| |
| <div class="bg-white p-6 rounded-xl shadow-md" data-aos="fade-right"> |
| <h3 class="text-lg font-semibold text-gray-800 mb-4">Genotype Distribution</h3> |
| <div class="h-64"> |
| <canvas id="genotypeChart"></canvas> |
| </div> |
| </div> |
| |
| |
| <div class="bg-white p-6 rounded-xl shadow-md" data-aos="fade-left"> |
| <h3 class="text-lg font-semibold text-gray-800 mb-4">Chromosome Distribution</h3> |
| <div class="h-64"> |
| <canvas id="chromosomeChart"></canvas> |
| </div> |
| </div> |
| |
| |
| <div class="bg-white p-6 rounded-xl shadow-md" data-aos="fade-right"> |
| <h3 class="text-lg font-semibold text-gray-800 mb-4">Data Sources</h3> |
| <div class="h-64"> |
| <canvas id="sourceChart"></canvas> |
| </div> |
| </div> |
| |
| |
| <div class="bg-white p-6 rounded-xl shadow-md" data-aos="fade-left"> |
| <h3 class="text-lg font-semibold text-gray-800 mb-4">Gene Descriptions</h3> |
| <div class="h-64"> |
| <canvas id="geneChart"></canvas> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="mb-20"> |
| <h2 class="text-2xl font-bold text-gray-800 mb-8" data-aos="fade-up">Key Findings</h2> |
| |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6"> |
| <div class="bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition gene-card" data-aos="fade-up" data-aos-delay="100"> |
| <div class="flex items-center mb-4"> |
| <div class="p-3 bg-blue-100 rounded-full mr-4"> |
| <i data-feather="activity" class="text-blue-600 w-5 h-5"></i> |
| </div> |
| <h3 class="text-lg font-semibold text-gray-800">ADHD Associations</h3> |
| </div> |
| <p class="text-gray-600">Two SNPs (rs6296 and rs3746544) show significant associations with ADHD symptom dimensions - inattention and hyperactivity-impulsivity.</p> |
| </div> |
| |
| <div class="bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition gene-card" data-aos="fade-up" data-aos-delay="200"> |
| <div class="flex items-center mb-4"> |
| <div class="p-3 bg-green-100 rounded-full mr-4"> |
| <i data-feather="dna" class="text-green-600 w-5 h-5"></i> |
| </div> |
| <h3 class="text-lg font-semibold text-gray-800">Common Genotypes</h3> |
| </div> |
| <p class="text-gray-600">GG genotype is the most frequent (33% of samples), followed by AA (17%) and TT (17%). The dataset includes diverse genotype combinations.</p> |
| </div> |
| |
| <div class="bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition gene-card" data-aos="fade-up" data-aos-delay="300"> |
| <div class="flex items-center mb-4"> |
| <div class="p-3 bg-purple-100 rounded-full mr-4"> |
| <i data-feather="book" class="text-purple-600 w-5 h-5"></i> |
| </div> |
| <h3 class="text-lg font-semibold text-gray-800">Research Sources</h3> |
| </div> |
| <p class="text-gray-600">50% of SNPs come from Frontiers in Psychiatry research, 33% from general scientific literature, and 17% from PMC studies on ADHD genetics.</p> |
| </div> |
| </div> |
| </section> |
| </div> |
|
|
| |
| <footer class="bg-gray-800 text-white py-12"> |
| <div class="container mx-auto px-6"> |
| <div class="flex flex-col md:flex-row justify-between items-center"> |
| <div class="mb-6 md:mb-0"> |
| <h3 class="text-xl font-bold mb-2">Genomic Data Explorer</h3> |
| <p class="text-gray-400">Visualizing genetic variations with clarity and precision</p> |
| </div> |
| <div class="flex space-x-6"> |
| <a href="#" class="text-gray-400 hover:text-white transition"> |
| <i data-feather="github" class="w-5 h-5"></i> |
| </a> |
| <a href="#" class="text-gray-400 hover:text-white transition"> |
| <i data-feather="twitter" class="w-5 h-5"></i> |
| </a> |
| <a href="#" class="text-gray-400 hover:text-white transition"> |
| <i data-feather="linkedin" 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 text-sm"> |
| <p>© 2023 Genomic Data Explorer. All data is for demonstration purposes only.</p> |
| </div> |
| </div> |
| </footer> |
|
|
| <script> |
| // Initialize AOS animations |
| AOS.init({ |
| duration: 800, |
| easing: 'ease-in-out', |
| once: true |
| }); |
| |
| // Initialize feather icons |
| feather.replace(); |
| |
| // Chromosome tab functionality |
| document.querySelectorAll('.chromosome-tab').forEach(tab => { |
| tab.addEventListener('click', function() { |
| document.querySelectorAll('.chromosome-tab').forEach(t => t.classList.remove('active', 'text-blue-600')); |
| this.classList.add('active', 'text-blue-600'); |
| // Here you would filter the table data by chromosome |
| }); |
| }); |
| |
| // Charts |
| document.addEventListener('DOMContentLoaded', function() { |
| // Genotype Distribution Chart |
| const genotypeCtx = document.getElementById('genotypeChart').getContext('2d'); |
| const genotypeChart = new Chart(genotypeCtx, { |
| type: 'bar', |
| data: { |
| labels: ['GG', 'AA', 'TT', 'AC', 'CT', 'GT', 'CC'], |
| datasets: [{ |
| label: 'Count', |
| data: [4, 2, 2, 1, 1, 1, 1], |
| backgroundColor: [ |
| '#10b981', |
| '#3b82f6', |
| '#ef4444', |
| '#8b5cf6', |
| '#f59e0b', |
| '#14b8a6', |
| '#6366f1' |
| ], |
| borderWidth: 1 |
| }] |
| }, |
| options: { |
| responsive: true, |
| maintainAspectRatio: false, |
| scales: { |
| y: { |
| beginAtZero: true, |
| ticks: { |
| stepSize: 1 |
| } |
| } |
| } |
| } |
| }); |
| |
| // Chromosome Distribution Chart |
| const chromosomeCtx = document.getElementById('chromosomeChart').getContext('2d'); |
| const chromosomeChart = new Chart(chromosomeCtx, { |
| type: 'pie', |
| data: { |
| labels: ['Chr 1', 'Chr 5', 'Chr 6', 'Chr 13', ' |
| </body> |
| </html> |
