Hugging Face's logo

Spaces:
RazNT
/
data-visualisation
Running

App Files Community
data-visualisation / index.html
RazNT's picture
RazNT
"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
8b5a2e9 verified
raw
history blame contribute delete
33.9 kB
 <!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>