Spaces:

RazNT
/

data-visualisation

Running

App Files Files Community

RazNT commited on about 1 month ago

Commit

8b5a2e9

verified ·

1 Parent(s): 7be4bce

"Create a responsive, interactive data visualization dashboard for a PhD-level research project analyzing climate change impacts on coastal ecosystems. The website should include: A clean, modern UI with a dark theme, using Tailwind CSS for styling. A navigation bar with links to 'Home', 'Data Visualizations', 'Methodology', and 'Publications'. An interactive dashboard section with three Chart.js visualizations: (1) a line chart showing sea level rise from 2000–2025, (2) a bar chart comparing species diversity across five coastal regions, and (3) a scatter plot of temperature anomalies vs. coral bleaching events. Data inputs should be placeholder JSON files (generate sample data if needed). Include a methodology page with a markdown-rendered explanation of statistical models (e.g., ARIMA for time-series forecasting). Ensure mobile-first design with SEO optimization (meta tags, alt text for images). Add a contact form with client-side validation using JavaScript. Generate clean, commented HTML, CSS, and JavaScript code, downloadable as a single HTML file for easy deployment. Preview the output in real-time and allow iterative edits to adjust chart colors to a blue-green palette." - Initial Deployment

Browse files

Files changed (2) hide show

README.md +7 -5
index.html +658 -19

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Data Visualisation
-emoji: 📉
-colorFrom: blue
-colorTo: purple
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: data-visualisation
+emoji: 🐳
+colorFrom: gray
+colorTo: green
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,658 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="en" class="scroll-smooth">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description" content="PhD Research Dashboard: Analyzing Climate Change Impacts on Coastal Ecosystems">
+    <meta name="keywords" content="climate change, coastal ecosystems, data visualization, PhD research, marine biology">
+    <meta name="author" content="PhD Researcher">
+    <title>Coastal Climate Research Dashboard</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
+    <style>
+        .markdown-content h2 {
+            @apply text-xl font-bold mt-6 mb-3 text-teal-300;
+        }
+        .markdown-content p {
+            @apply mb-4 text-gray-300;
+        }
+        .markdown-content ul {
+            @apply list-disc pl-5 mb-4 text-gray-300;
+        }
+        .markdown-content code {
+            @apply bg-gray-700 px-2 py-1 rounded text-sm;
+        }
+        .chart-container {
+            position: relative;
+            height: 100%;
+            width: 100%;
+        }
+        .nav-link:hover::after {
+            @apply w-full;
+        }
+        .nav-link::after {
+            @apply content-[''] block h-0.5 bg-teal-400 w-0 transition-all duration-300;
+        }
+        .input-error {
+            @apply border-red-500;
+        }
+        .error-message {
+            @apply text-red-400 text-sm mt-1 hidden;
+        }
+    </style>
+</head>
+<body class="bg-gray-900 text-gray-100 min-h-screen flex flex-col">
+    <!-- Navigation Bar -->
+    <nav class="bg-gray-800 shadow-lg sticky top-0 z-50">
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+            <div class="flex items-center justify-between h-16">
+                <div class="flex items-center">
+                    <div class="flex-shrink-0">
+                        <span class="text-teal-400 font-bold text-xl">Coastal Research</span>
+                    </div>
+                    <div class="hidden md:block">
+                        <div class="ml-10 flex items-baseline space-x-4">
+                            <a href="#home" class="nav-link px-3 py-2 rounded-md text-sm font-medium text-gray-300 hover:text-white">Home</a>
+                            <a href="#visualizations" class="nav-link px-3 py-2 rounded-md text-sm font-medium text-gray-300 hover:text-white">Data Visualizations</a>
+                            <a href="#methodology" class="nav-link px-3 py-2 rounded-md text-sm font-medium text-gray-300 hover:text-white">Methodology</a>
+                            <a href="#publications" class="nav-link px-3 py-2 rounded-md text-sm font-medium text-gray-300 hover:text-white">Publications</a>
+                            <a href="#contact" class="nav-link px-3 py-2 rounded-md text-sm font-medium text-gray-300 hover:text-white">Contact</a>
+                        </div>
+                    </div>
+                </div>
+                <div class="-mr-2 flex md:hidden">
+                    <button type="button" id="mobile-menu-button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none">
+                        <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
+                        </svg>
+                    </button>
+                </div>
+            </div>
+        </div>
+        <!-- Mobile menu -->
+        <div class="md:hidden hidden" id="mobile-menu">
+            <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
+                <a href="#home" class="block px-3 py-2 rounded-md text-base font-medium text-gray-300 hover:text-white hover:bg-gray-700">Home</a>
+                <a href="#visualizations" class="block px-3 py-2 rounded-md text-base font-medium text-gray-300 hover:text-white hover:bg-gray-700">Data Visualizations</a>
+                <a href="#methodology" class="block px-3 py-2 rounded-md text-base font-medium text-gray-300 hover:text-white hover:bg-gray-700">Methodology</a>
+                <a href="#publications" class="block px-3 py-2 rounded-md text-base font-medium text-gray-300 hover:text-white hover:bg-gray-700">Publications</a>
+                <a href="#contact" class="block px-3 py-2 rounded-md text-base font-medium text-gray-300 hover:text-white hover:bg-gray-700">Contact</a>
+            </div>
+        </div>
+    </nav>
+    <!-- Main Content -->
+    <main class="flex-grow">
+        <!-- Home Section -->
+        <section id="home" class="py-20 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto">
+            <div class="text-center">
+                <h1 class="text-4xl md:text-5xl font-bold mb-6 text-teal-400">Climate Change Impacts on Coastal Ecosystems</h1>
+                <p class="text-xl md:text-2xl text-gray-300 max-w-3xl mx-auto">
+                    A PhD research project analyzing the effects of climate change on marine biodiversity, sea level rise, and coastal ecosystem health.
+                </p>
+                <div class="mt-10">
+                    <a href="#visualizations" class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md text-gray-900 bg-teal-400 hover:bg-teal-500 transition duration-300">
+                        Explore Data Visualizations
+                        <svg class="ml-3 -mr-1 h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
+                            <path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd" />
+                        </svg>
+                    </a>
+                </div>
+            </div>
+        </section>
+        <!-- Data Visualizations Section -->
+        <section id="visualizations" class="py-16 bg-gray-800">
+            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+                <div class="text-center mb-12">
+                    <h2 class="text-3xl font-bold text-teal-400 mb-4">Interactive Data Visualizations</h2>
+                    <p class="text-lg text-gray-300 max-w-3xl mx-auto">
+                        Explore the key findings through interactive charts. Click on legend items to toggle data series.
+                    </p>
+                </div>
+                <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-8">
+                    <!-- Sea Level Rise Chart -->
+                    <div class="bg-gray-700 p-6 rounded-lg shadow-lg">
+                        <h3 class="text-xl font-semibold text-teal-300 mb-4">Sea Level Rise (2000-2025)</h3>
+                        <div class="chart-container">
+                            <canvas id="seaLevelChart"></canvas>
+                        </div>
+                        <div class="mt-4 text-sm text-gray-400">
+                            <p>Projected sea level rise based on satellite altimetry data and climate models.</p>
+                        </div>
+                    </div>
+                    <!-- Species Diversity Chart -->
+                    <div class="bg-gray-700 p-6 rounded-lg shadow-lg">
+                        <h3 class="text-xl font-semibold text-teal-300 mb-4">Species Diversity Across Coastal Regions</h3>
+                        <div class="chart-container">
+                            <canvas id="speciesChart"></canvas>
+                        </div>
+                        <div class="mt-4 text-sm text-gray-400">
+                            <p>Comparison of marine species diversity across five major coastal ecosystems.</p>
+                        </div>
+                    </div>
+                </div>
+                <!-- Temperature Anomalies vs Coral Bleaching Chart -->
+                <div class="bg-gray-700 p-6 rounded-lg shadow-lg">
+                    <h3 class="text-xl font-semibold text-teal-300 mb-4">Temperature Anomalies vs Coral Bleaching Events</h3>
+                    <div class="chart-container">
+                        <canvas id="bleachingChart"></canvas>
+                    </div>
+                    <div class="mt-4 text-sm text-gray-400">
+                        <p>Relationship between ocean temperature anomalies and coral bleaching severity (2000-2023).</p>
+                    </div>
+                </div>
+            </div>
+        </section>
+        <!-- Methodology Section -->
+        <section id="methodology" class="py-16">
+            <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
+                <div class="text-center mb-12">
+                    <h2 class="text-3xl font-bold text-teal-400 mb-4">Research Methodology</h2>
+                    <p class="text-lg text-gray-300">
+                        Detailed explanation of the statistical models and data collection protocols.
+                    </p>
+                </div>
+                <div class="markdown-content bg-gray-800 p-6 rounded-lg shadow-lg">
+                    <!-- Markdown content will be rendered here by JavaScript -->
+                </div>
+            </div>
+        </section>
+        <!-- Publications Section -->
+        <section id="publications" class="py-16 bg-gray-800">
+            <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
+                <div class="text-center mb-12">
+                    <h2 class="text-3xl font-bold text-teal-400 mb-4">Publications</h2>
+                    <p class="text-lg text-gray-300">
+                        Peer-reviewed research papers and conference presentations.
+                    </p>
+                </div>
+                <div class="space-y-6">
+                    <div class="bg-gray-700 p-6 rounded-lg shadow-lg">
+                        <h3 class="text-xl font-semibold text-teal-300 mb-2">"Long-term impacts of sea level rise on coastal biodiversity"</h3>
+                        <p class="text-gray-400 mb-2">Journal of Marine Ecology, 2023</p>
+                        <p class="text-gray-300">This study examines the correlation between rising sea levels and changes in species distribution patterns across five coastal regions over a 25-year period.</p>
+                        <a href="#" class="inline-block mt-3 text-teal-400 hover:text-teal-300">Read Full Paper →</a>
+                    </div>
+                    <div class="bg-gray-700 p-6 rounded-lg shadow-lg">
+                        <h3 class="text-xl font-semibold text-teal-300 mb-2">"ARIMA modeling of temperature anomalies in tropical coastal waters"</h3>
+                        <p class="text-gray-400 mb-2">Climate Dynamics, 2022</p>
+                        <p class="text-gray-300">Presents an autoregressive integrated moving average model for predicting ocean temperature anomalies and their ecological impacts.</p>
+                        <a href="#" class="inline-block mt-3 text-teal-400 hover:text-teal-300">Read Full Paper →</a>
+                    </div>
+                    <div class="bg-gray-700 p-6 rounded-lg shadow-lg">
+                        <h3 class="text-xl font-semibold text-teal-300 mb-2">"Coral reef resilience under climate change scenarios"</h3>
+                        <p class="text-gray-400 mb-2">Proceedings of the International Coral Reef Symposium, 2021</p>
+                        <p class="text-gray-300">Analysis of coral bleaching events in relation to temperature anomalies and projections for future reef health under various climate scenarios.</p>
+                        <a href="#" class="inline-block mt-3 text-teal-400 hover:text-teal-300">Read Full Paper →</a>
+                    </div>
+                </div>
+            </div>
+        </section>
+        <!-- Contact Section -->
+        <section id="contact" class="py-16">
+            <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
+                <div class="text-center mb-12">
+                    <h2 class="text-3xl font-bold text-teal-400 mb-4">Contact the Researcher</h2>
+                    <p class="text-lg text-gray-300">
+                        For collaboration inquiries or additional information about this research.
+                    </p>
+                </div>
+                <form id="contactForm" class="bg-gray-800 p-6 rounded-lg shadow-lg">
+                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+                        <div>
+                            <label for="name" class="block text-sm font-medium text-gray-300 mb-1">Full Name</label>
+                            <input type="text" id="name" name="name" class="w-full px-4 py-2 bg-gray-700 border border-gray-600 rounded-md focus:ring-2 focus:ring-teal-500 focus:border-teal-500 text-gray-100">
+                            <p id="name-error" class="error-message">Please enter your name</p>
+                        </div>
+                        <div>
+                            <label for="email" class="block text-sm font-medium text-gray-300 mb-1">Email Address</label>
+                            <input type="email" id="email" name="email" class="w-full px-4 py-2 bg-gray-700 border border-gray-600 rounded-md focus:ring-2 focus:ring-teal-500 focus:border-teal-500 text-gray-100">
+                            <p id="email-error" class="error-message">Please enter a valid email address</p>
+                        </div>
+                    </div>
+                    <div class="mt-6">
+                        <label for="subject" class="block text-sm font-medium text-gray-300 mb-1">Subject</label>
+                        <input type="text" id="subject" name="subject" class="w-full px-4 py-2 bg-gray-700 border border-gray-600 rounded-md focus:ring-2 focus:ring-teal-500 focus:border-teal-500 text-gray-100">
+                        <p id="subject-error" class="error-message">Please enter a subject</p>
+                    </div>
+                    <div class="mt-6">
+                        <label for="message" class="block text-sm font-medium text-gray-300 mb-1">Message</label>
+                        <textarea id="message" name="message" rows="5" class="w-full px-4 py-2 bg-gray-700 border border-gray-600 rounded-md focus:ring-2 focus:ring-teal-500 focus:border-teal-500 text-gray-100"></textarea>
+                        <p id="message-error" class="error-message">Please enter your message</p>
+                    </div>
+                    <div class="mt-8">
+                        <button type="submit" class="w-full px-6 py-3 bg-teal-600 hover:bg-teal-700 text-white font-medium rounded-md transition duration-300">
+                            Send Message
+                        </button>
+                    </div>
+                    <div id="form-success" class="mt-4 p-4 bg-green-800 text-green-100 rounded-md hidden">
+                        Thank you for your message! We'll get back to you soon.
+                    </div>
+                </form>
+            </div>
+        </section>
+    </main>
+    <!-- Footer -->
+    <footer class="bg-gray-800 py-8">
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+            <div class="flex flex-col md:flex-row justify-between items-center">
+                <div class="mb-4 md:mb-0">
+                    <span class="text-teal-400 font-bold text-lg">Coastal Climate Research</span>
+                    <p class="text-gray-400 text-sm mt-1">PhD Research Project © 2023</p>
+                </div>
+                <div class="flex space-x-6">
+                    <a href="#" class="text-gray-400 hover:text-teal-400">
+                        <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24">
+                            <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
+                        </svg>
+                    </a>
+                    <a href="#" class="text-gray-400 hover:text-teal-400">
+                        <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24">
+                            <path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z"/>
+                        </svg>
+                    </a>
+                    <a href="#" class="text-gray-400 hover:text-teal-400">
+                        <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24">
+                            <path d="M23.954 4.569c-.885.389-1.83.654-2.825.775 1.014-.611 1.794-1.574 2.163-2.723-.951.555-2.005.959-3.127 1.184-.896-.959-2.173-1.559-3.591-1.559-2.717 0-4.92 2.203-4.92 4.917 0 .39.045.765.127 1.124C7.691 8.094 4.066 6.13 1.64 3.161c-.427.722-.666 1.561-.666 2.475 0 1.71.87 3.213 2.188 4.096-.807-.026-1.566-.248-2.228-.616v.061c0 2.385 1.693 4.374 3.946 4.827-.413.111-.849.171-1.296.171-.314 0-.615-.03-.916-.086.631 1.953 2.445 3.377 4.604 3.417-1.68 1.319-3.809 2.105-6.102 2.105-.39 0-.779-.023-1.17-.067 2.189 1.394 4.768 2.209 7.557 2.209 9.054 0 14-7.503 14-14 0-.21-.005-.418-.014-.627.961-.689 1.8-1.56 2.46-2.548l-.047-.02z"/>
+                        </svg>
+                    </a>
+                </div>
+            </div>
+        </div>
+    </footer>
+    <script>
+        // Mobile menu toggle
+        document.getElementById('mobile-menu-button').addEventListener('click', function() {
+            const menu = document.getElementById('mobile-menu');
+            menu.classList.toggle('hidden');
+        });
+        // Sample data for charts
+        const seaLevelData = {
+            years: Array.from({length: 26}, (_, i) => 2000 + i),
+            levels: Array.from({length: 26}, (_, i) => {
+                const base = 50 + Math.random() * 10;
+                const trend = i * 1.5;
+                const variation = Math.sin(i / 3) * 2 + Math.random() * 1.5;
+                return base + trend + variation;
+            }),
+            projections: Array.from({length: 26}, (_, i) => {
+                if (i < 23) return null;
+                const base = 50 + Math.random() * 10;
+                const trend = i * 1.8;
+                const variation = Math.sin(i / 3) * 2 + Math.random() * 1.5;
+                return base + trend + variation;
+            })
+        };
+        const speciesData = {
+            regions: ['Great Barrier Reef', 'Gulf of Mexico', 'Mediterranean', 'Southeast Asia', 'Caribbean'],
+            diversity: [85, 72, 68, 91, 78],
+            change: [-12, -8, -5, -15, -10]
+        };
+        const bleachingData = {
+            anomalies: Array.from({length: 50}, () => Math.random() * 2.5),
+            bleaching: Array.from({length: 50}, (_, i) => {
+                const base = i < 25 ? Math.random() * 30 : 20 + Math.random() * 50;
+                return base * (1 + Math.random() * 0.3);
+            }),
+            years: Array.from({length: 50}, (_, i) => 2000 + Math.floor(i / 2))
+        };
+        // Initialize charts
+        document.addEventListener('DOMContentLoaded', function() {
+            // Sea Level Rise Chart
+            const seaLevelCtx = document.getElementById('seaLevelChart').getContext('2d');
+            const seaLevelChart = new Chart(seaLevelCtx, {
+                type: 'line',
+                data: {
+                    labels: seaLevelData.years,
+                    datasets: [
+                        {
+                            label: 'Observed Sea Level (mm)',
+                            data: seaLevelData.levels,
+                            borderColor: '#4fd1c5',
+                            backgroundColor: 'rgba(79, 209, 197, 0.1)',
+                            borderWidth: 2,
+                            tension: 0.3,
+                            fill: true
+                        },
+                        {
+                            label: 'Projected Sea Level (mm)',
+                            data: seaLevelData.projections,
+                            borderColor: '#38b2ac',
+                            backgroundColor: 'rgba(56, 178, 172, 0.1)',
+                            borderWidth: 2,
+                            borderDash: [5, 5],
+                            tension: 0.3,
+                            fill: true
+                        }
+                    ]
+                },
+                options: {
+                    responsive: true,
+                    maintainAspectRatio: false,
+                    plugins: {
+                        legend: {
+                            position: 'top',
+                            labels: {
+                                color: '#e2e8f0'
+                            }
+                        },
+                        tooltip: {
+                            mode: 'index',
+                            intersect: false
+                        }
+                    },
+                    scales: {
+                        x: {
+                            grid: {
+                                color: 'rgba(74, 85, 104, 0.5)'
+                            },
+                            ticks: {
+                                color: '#e2e8f0'
+                            }
+                        },
+                        y: {
+                            grid: {
+                                color: 'rgba(74, 85, 104, 0.5)'
+                            },
+                            ticks: {
+                                color: '#e2e8f0'
+                            },
+                            title: {
+                                display: true,
+                                text: 'Sea Level Change (mm)',
+                                color: '#e2e8f0'
+                            }
+                        }
+                    },
+                    interaction: {
+                        mode: 'nearest',
+                        axis: 'x',
+                        intersect: false
+                    }
+                }
+            });
+            // Species Diversity Chart
+            const speciesCtx = document.getElementById('speciesChart').getContext('2d');
+            const speciesChart = new Chart(speciesCtx, {
+                type: 'bar',
+                data: {
+                    labels: speciesData.regions,
+                    datasets: [
+                        {
+                            label: 'Current Species Diversity Index',
+                            data: speciesData.diversity,
+                            backgroundColor: 'rgba(72, 187, 120, 0.7)',
+                            borderColor: 'rgba(72, 187, 120, 1)',
+                            borderWidth: 1
+                        },
+                        {
+                            label: 'Change Since 2000 (%)',
+                            data: speciesData.change,
+                            backgroundColor: 'rgba(240, 101, 67, 0.7)',
+                            borderColor: 'rgba(240, 101, 67, 1)',
+                            borderWidth: 1,
+                            type: 'line',
+                            yAxisID: 'y1'
+                        }
+                    ]
+                },
+                options: {
+                    responsive: true,
+                    maintainAspectRatio: false,
+                    plugins: {
+                        legend: {
+                            position: 'top',
+                            labels: {
+                                color: '#e2e8f0'
+                            }
+                        }
+                    },
+                    scales: {
+                        x: {
+                            grid: {
+                                color: 'rgba(74, 85, 104, 0.5)'
+                            },
+                            ticks: {
+                                color: '#e2e8f0'
+                            }
+                        },
+                        y: {
+                            grid: {
+                                color: 'rgba(74, 85, 104, 0.5)'
+                            },
+                            ticks: {
+                                color: '#e2e8f0'
+                            },
+                            title: {
+                                display: true,
+                                text: 'Diversity Index',
+                                color: '#e2e8f0'
+                            }
+                        },
+                        y1: {
+                            position: 'right',
+                            grid: {
+                                drawOnChartArea: false,
+                                color: 'rgba(74, 85, 104, 0.5)'
+                            },
+                            ticks: {
+                                color: '#e2e8f0'
+                            },
+                            title: {
+                                display: true,
+                                text: 'Change (%)',
+                                color: '#e2e8f0'
+                            }
+                        }
+                    }
+                }
+            });
+            // Bleaching Chart
+            const bleachingCtx = document.getElementById('bleachingChart').getContext('2d');
+            const bleachingChart = new Chart(bleachingCtx, {
+                type: 'scatter',
+                data: {
+                    datasets: [{
+                        label: 'Coral Bleaching Events',
+                        data: bleachingData.anomalies.map((anomaly, i) => ({
+                            x: anomaly,
+                            y: bleachingData.bleaching[i],
+                            r: 8,
+                            year: bleachingData.years[i]
+                        })),
+                        backgroundColor: 'rgba(66, 153, 225, 0.7)',
+                        borderColor: 'rgba(66, 153, 225, 1)',
+                        borderWidth: 1
+                    }]
+                },
+                options: {
+                    responsive: true,
+                    maintainAspectRatio: false,
+                    plugins: {
+                        legend: {
+                            labels: {
+                                color: '#e2e8f0'
+                            }
+                        },
+                        tooltip: {
+                            callbacks: {
+                                label: function(context) {
+                                    return `Year: ${context.raw.year}, Bleaching: ${context.parsed.y.toFixed(1)}%, Anomaly: ${context.parsed.x.toFixed(2)}°C`;
+                                }
+                            }
+                        }
+                    },
+                    scales: {
+                        x: {
+                            title: {
+                                display: true,
+                                text: 'Temperature Anomaly (°C)',
+                                color: '#e2e8f0'
+                            },
+                            grid: {
+                                color: 'rgba(74, 85, 104, 0.5)'
+                            },
+                            ticks: {
+                                color: '#e2e8f0'
+                            }
+                        },
+                        y: {
+                            title: {
+                                display: true,
+                                text: 'Bleaching Severity (%)',
+                                color: '#e2e8f0'
+                            },
+                            grid: {
+                                color: 'rgba(74, 85, 104, 0.5)'
+                            },
+                            ticks: {
+                                color: '#e2e8f0'
+                            }
+                        }
+                    }
+                }
+            });
+            // Render methodology markdown
+            const methodologyMarkdown = `
+## Research Methodology Overview
+This study employs a multi-disciplinary approach combining field observations, remote sensing data, and statistical modeling to analyze climate change impacts on coastal ecosystems.
+### Data Collection
+- **Sea Level Data**: Obtained from satellite altimetry (Jason-3, Sentinel-6) and tidal gauge stations
+- **Biodiversity Surveys**: Conducted at 120 sites across five coastal regions (2015-2023)
+- **Temperature Anomalies**: Calculated from NOAA's OISST dataset (1/4° resolution)
+### Statistical Models
+#### ARIMA for Time-Series Forecasting
+We use AutoRegressive Integrated Moving Average (ARIMA) models to forecast sea level rise and temperature anomalies:
+\`\`\`python
+from statsmodels.tsa.arima.model import ARIMA
+# Example ARIMA(1,1,1) model for sea level
+model = ARIMA(sea_level_data, order=(1,1,1))
+results = model.fit()
+forecast = results.get_forecast(steps=36)
+\`\`\`
+Key parameters:
+- p (autoregressive order): 1
+- d (differencing order): 1
+- q (moving average order): 1
+#### Generalized Linear Models for Species Diversity
+\`\`\`r
+# GLM example in R
+diversity_model <- glm(SpeciesCount ~ Temperature + Salinity + Year,
+                      data = survey_data,
+                      family = poisson(link = "log"))
+\`\`\`
+### Machine Learning Approaches
+For coral bleaching prediction:
+- Random Forest classifier (accuracy: 82%)
+- XGBoost regression for severity estimation (R²: 0.76)
+### Field Validation
+All models are validated against:
+1. Independent survey data
+2. Historical records
+3. Expert ecological assessments
+            `;
+            document.querySelector('.markdown-content').innerHTML = marked.parse(methodologyMarkdown);
+            // Contact form validation
+            const contactForm = document.getElementById('contactForm');
+            const inputs = ['name', 'email', 'subject', 'message'];
+            contactForm.addEventListener('submit', function(e) {
+                e.preventDefault();
+                let isValid = true;
+                inputs.forEach(inputId => {
+                    const input = document.getElementById(inputId);
+                    const error = document.getElementById(`${inputId}-error`);
+                    if (!input.value.trim()) {
+                        input.classList.add('input-error');
+                        error.classList.remove('hidden');
+                        isValid = false;
+                    } else {
+                        input.classList.remove('input-error');
+                        error.classList.add('hidden');
+                    }
+                });
+                // Additional email validation
+                const email = document.getElementById('email');
+                const emailError = document.getElementById('email-error');
+                const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+                if (!emailRegex.test(email.value)) {
+                    email.classList.add('input-error');
+                    emailError.textContent = 'Please enter a valid email address';
+                    emailError.classList.remove('hidden');
+                    isValid = false;
+                }
+                if (isValid) {
+                    // In a real application, you would send the form data to a server here
+                    contactForm.reset();
+                    document.getElementById('form-success').classList.remove('hidden');
+                    setTimeout(() => {
+                        document.getElementById('form-success').classList.add('hidden');
+                    }, 5000);
+                }
+            });
+            // Reset validation on input
+            inputs.forEach(inputId => {
+                document.getElementById(inputId).addEventListener('input', function() {
+                    this.classList.remove('input-error');
+                    document.getElementById(`${inputId}-error`).classList.add('hidden');
+                });
+            });
+        });
+        // Smooth scrolling for anchor links
+        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+            anchor.addEventListener('click', function(e) {
+                e.preventDefault();
+                document.querySelector(this.getAttribute('href')).scrollIntoView({
+                    behavior: 'smooth'
+                });
+            });
+        });
+    </script>
+<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=RazNT/data-visualisation" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>