File size: 5,282 Bytes
d7d757e | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 | ```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Data Visualizations | CornYield Optimizer Pro</title>
<link rel="stylesheet" href="style.css">
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://unpkg.com/feather-icons"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-annotation@1.0.2"></script>
<script src="components/navbar.js"></script>
<script src="components/footer.js"></script>
</head>
<body class="bg-gray-50">
<custom-navbar></custom-navbar>
<main class="container mx-auto px-4 py-8">
<section class="mb-12 text-center">
<h1 class="text-4xl font-bold text-green-800 mb-4">Interactive Data Visualizations</h1>
<p class="text-xl text-gray-600 max-w-3xl mx-auto">
Explore corn yield correlations through interactive charts and maps
</p>
</section>
<section class="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-12">
<div class="bg-white rounded-xl shadow-md p-6">
<h2 class="text-xl font-semibold mb-4">Yield vs Soil Nutrients</h2>
<div class="chart-container">
<canvas id="correlationChart"></canvas>
</div>
<div class="mt-4 flex justify-center space-x-4">
<button class="filter-btn active" data-nutrient="all">All</button>
<button class="filter-btn" data-nutrient="p">P Only</button>
<button class="filter-btn" data-nutrient="zn">Zn Only</button>
</div>
</div>
<div class="bg-white rounded-xl shadow-md p-6">
<h2 class="text-xl font-semibold mb-4">Nutrient Distribution</h2>
<div class="chart-container">
<canvas id="distributionChart"></canvas>
</div>
<div class="mt-4">
<label class="block text-sm font-medium text-gray-700 mb-1">Select Nutrient</label>
<select id="nutrientSelect" class="w-full rounded-md border-gray-300 shadow-sm">
<option value="p">Phosphorus (P)</option>
<option value="zn">Zinc (Zn)</option>
<option value="om">Organic Matter</option>
</select>
</div>
</div>
<div class="bg-white rounded-xl shadow-md p-6 lg:col-span-2">
<h2 class="text-xl font-semibold mb-4">Field Performance Heatmap</h2>
<div class="chart-container">
<canvas id="heatmapChart"></canvas>
</div>
<div class="mt-4 flex items-center justify-between">
<div>
<span class="inline-block w-4 h-4 bg-red-500 mr-1"></span>
<span>Low Yield</span>
<span class="inline-block w-4 h-4 bg-yellow-500 mx-2"></span>
<span>Medium</span>
<span class="inline-block w-4 h-4 bg-green-500 mx-2"></span>
<span>High Yield</span>
</div>
<button id="refreshHeatmap" class="px-4 py-2 bg-green-600 text-white rounded-md hover:bg-green-700">
<i data-feather="refresh-cw" class="w-4 h-4 mr-2"></i>
Randomize Data
</button>
</div>
</div>
</section>
<section class="bg-white rounded-xl shadow-md p-6 mb-12">
<h2 class="text-2xl font-semibold text-gray-800 mb-6">Yield Prediction Model</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
<div>
<div class="chart-container">
<canvas id="predictionChart"></canvas>
</div>
</div>
<div>
<h3 class="text-lg font-medium mb-3">Adjust Parameters</h3>
<div class="space-y-4">
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Phosphorus (ppm)</label>
<input type="range" id="pSlider" min="100" max="500" value="350" class="w-full">
<span id="pValue" class="text-sm text-gray-600">350 ppm</span>
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Zinc (ppm)</label>
<input type="range" id="znSlider" min="5" max="25" value="12" class="w-full">
<span id="znValue" class="text-sm text-gray-600">12 ppm</span>
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Organic Matter (%)</label>
<input type="range" id="omSlider" min="1" max="6" value="3.5" step="0.1" class="w-full">
<span |