TeacherPuffy/BioClass
0
1<!DOCTYPE html>2<html lang="en">3<head>4 <meta charset="UTF-8">5 <meta name="viewport" content="width=device-width, initial-scale=1.0">6 <title>Mammal Data Correlations</title>7 <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>8 <script src="https://cdn.jsdelivr.net/npm/regression"></script>9 <style>10 body {11 font-family: Arial, sans-serif;12 margin: 20px;13 background-color: #f9f9f9;14 }15 .chartContainer {16 width: 80%;17 margin: 20px auto;18 background-color: white;19 padding: 20px;20 border-radius: 10px;21 box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);22 }23 .accuracy {24 text-align: center;25 margin-top: 20px;26 }27 table {28 width: 80%;29 margin: 20px auto;30 border-collapse: collapse;31 background-color: white;32 border-radius: 10px;33 box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);34 }35 table, th, td {36 border: 1px solid black;37 }38 th, td {39 padding: 8px;40 text-align: center;41 }42 .background {43 width: 80%;44 margin: 20px auto;45 padding: 20px;46 background-color: white;47 border-radius: 10px;48 box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);49 }50 .attribution {51 text-align: center;52 margin-top: 20px;53 font-style: italic;54 color: #555;55 }56 </style>57</head>58<body>59 <h1>Mammal Data Correlations</h1>60 61 <!-- Background Section -->62 <div class="background">63 <h2>Background</h2>64 <p>65 This project investigates the relationship between gestation periods and various biological traits in mammals. 66 The central question is: <strong>How does the time for gestation correlate with brain size, baby size, and baby volume?</strong>67 By analyzing data from a variety of mammals, we aim to uncover patterns and trends that can help us understand the evolutionary and biological significance of gestation periods.68 </p>69 </div>70 71 <!-- Chart 1: Gestation vs. Brain Size -->72 <div class="chartContainer">73 <h2>Gestation Period vs. Brain Size</h2>74 <canvas id="chart1"></canvas>75 <div class="accuracy">76 <p>Best Fit: <span id="bestFit1"></span> (R²: <span id="bestFitAccuracy1"></span>)</p>77 <p>Equation: <span id="equation1"></span></p>78 <p>Other Models:</p>79 <ul>80 <li>Linear: R² = <span id="linearAccuracy1"></span></li>81 <li>Exponential: R² = <span id="expAccuracy1"></span></li>82 <li>Quadratic: R² = <span id="quadAccuracy1"></span></li>83 </ul>84 </div>85 </div>86 87 <!-- Chart 2: Gestation vs. Baby Size -->88 <div class="chartContainer">89 <h2>Gestation Period vs. Baby Size</h2>90 <canvas id="chart2"></canvas>91 <div class="accuracy">92 <p>Best Fit: <span id="bestFit2"></span> (R²: <span id="bestFitAccuracy2"></span>)</p>93 <p>Equation: <span id="equation2"></span></p>94 <p>Other Models:</p>95 <ul>96 <li>Linear: R² = <span id="linearAccuracy2"></span></li>97 <li>Exponential: R² = <span id="expAccuracy2"></span></li>98 <li>Quadratic: R² = <span id="quadAccuracy2"></span></li>99 </ul>100 </div>101 </div>102 103 <!-- Chart 3: Gestation vs. Baby Volume -->104 <div class="chartContainer">105 <h2>Gestation Period vs. Baby Volume</h2>106 <canvas id="chart3"></canvas>107 <div class="accuracy">108 <p>Best Fit: <span id="bestFit3"></span> (R²: <span id="bestFitAccuracy3"></span>)</p>109 <p>Equation: <span id="equation3"></span></p>110 <p>Other Models:</p>111 <ul>112 <li>Linear: R² = <span id="linearAccuracy3"></span></li>113 <li>Exponential: R² = <span id="expAccuracy3"></span></li>114 <li>Quadratic: R² = <span id="quadAccuracy3"></span></li>115 </ul>116 </div>117 </div>118 119 <!-- Chart 4: Gestation vs. Brain-to-Baby Size Ratio -->120 <div class="chartContainer">121 <h2>Gestation Period vs. Brain-to-Baby Size Ratio</h2>122 <canvas id="chart4"></canvas>123 <div class="accuracy">124 <p>Best Fit: <span id="bestFit4"></span> (R²: <span id="bestFitAccuracy4"></span>)</p>125 <p>Equation: <span id="equation4"></span></p>126 <p>Other Models:</p>127 <ul>128 <li>Linear: R² = <span id="linearAccuracy4"></span></li>129 <li>Exponential: R² = <span id="expAccuracy4"></span></li>130 <li>Quadratic: R² = <span id="quadAccuracy4"></span></li>131 </ul>132 </div>133 </div>134 135 <!-- Table -->136 <table>137 <thead>138 <tr>139 <th>Mammal</th>140 <th>Gestation (Days)</th>141 <th>Brain Size (grams)</th>142 <th>Baby Size (kg)</th>143 <th>Baby Volume (liters)</th>144 </tr>145 </thead>146 <tbody>147 <tr>148 <td>African Elephant</td>149 <td>655</td>150 <td>2300</td>151 <td>120</td>152 <td>90</td>153 </tr>154 <tr>155 <td>Asian Elephant</td>156 <td>617</td>157 <td>2000</td>158 <td>100</td>159 <td>80</td>160 </tr>161 <tr>162 <td>Sperm Whale</td>163 <td>535</td>164 <td>7800</td>165 <td>1000</td>166 <td>1000</td>167 </tr>168 <tr>169 <td>Orca</td>170 <td>532</td>171 <td>3500</td>172 <td>180</td>173 <td>180</td>174 </tr>175 <tr>176 <td>Indian Rhinoceros</td>177 <td>478</td>178 <td>400</td>179 <td>60</td>180 <td>60</td>181 </tr>182 <tr>183 <td>White Rhinoceros</td>184 <td>467</td>185 <td>350</td>186 <td>50</td>187 <td>50</td>188 </tr>189 <tr>190 <td>Giraffe</td>191 <td>430</td>192 <td>500</td>193 <td>100</td>194 <td>100</td>195 </tr>196 <tr>197 <td>Bactrian Camel</td>198 <td>390</td>199 <td>300</td>200 <td>35</td>201 <td>35</td>202 </tr>203 <tr>204 <td>Bottlenose Dolphin</td>205 <td>364</td>206 <td>750</td>207 <td>15</td>208 <td>15</td>209 </tr>210 <tr>211 <td>Horse</td>212 <td>336</td>213 <td>400</td>214 <td>50</td>215 <td>50</td>216 </tr>217 <tr>218 <td>Human</td>219 <td>270</td>220 <td>350</td>221 <td>3.5</td>222 <td>3.5</td>223 </tr>224 <tr>225 <td>Gorilla</td>226 <td>257</td>227 <td>200</td>228 <td>2</td>229 <td>2</td>230 </tr>231 <tr>232 <td>Chimpanzee</td>233 <td>240</td>234 <td>150</td>235 <td>1.8</td>236 <td>1.8</td>237 </tr>238 <tr>239 <td>Polar Bear</td>240 <td>241</td>241 <td>25</td>242 <td>0.6</td>243 <td>0.6</td>244 </tr>245 <tr>246 <td>Domestic Cat</td>247 <td>64</td>248 <td>5</td>249 <td>0.1</td>250 <td>0.1</td>251 </tr>252 <tr>253 <td>Domestic Dog</td>254 <td>61</td>255 <td>10</td>256 <td>0.3</td>257 <td>0.3</td>258 </tr>259 <tr>260 <td>Mouse</td>261 <td>19</td>262 <td>0.1</td>263 <td>0.001</td>264 <td>0.001</td>265 </tr>266 <tr>267 <td>Rat</td>268 <td>22</td>269 <td>0.2</td>270 <td>0.005</td>271 <td>0.005</td>272 </tr>273 <tr>274 <td>Virginia Opossum</td>275 <td>12</td>276 <td>0.05</td>277 <td>0.002</td>278 <td>0.002</td>279 </tr>280 <tr>281 <td>Kangaroo</td>282 <td>42</td>283 <td>5</td>284 <td>0.8</td>285 <td>0.8</td>286 </tr>287 </tbody>288 </table>289 290 <!-- Attribution -->291 <div class="attribution">292 <p>Made by Julian Herrera for 2025 Bio Class - Jan 14</p>293 </div>294 295 <script>296 // Data from the table297 const data = {298 mammals: [299 "African Elephant", "Asian Elephant", "Sperm Whale", "Orca", "Indian Rhinoceros",300 "White Rhinoceros", "Giraffe", "Bactrian Camel", "Bottlenose Dolphin", "Horse",301 "Human", "Gorilla", "Chimpanzee", "Polar Bear", "Domestic Cat", "Domestic Dog",302 "Mouse", "Rat", "Virginia Opossum", "Kangaroo"303 ],304 gestation: [305 655, 617, 535, 532, 478, 467, 430, 390, 364, 336, 270, 257, 240, 241, 64, 61, 19, 22, 12, 42306 ],307 brainSize: [308 2300, 2000, 7800, 3500, 400, 350, 500, 300, 750, 400, 350, 200, 150, 25, 5, 10, 0.1, 0.2, 0.05, 5309 ],310 babySize: [311 120, 100, 1000, 180, 60, 50, 100, 35, 15, 50, 3.5, 2, 1.8, 0.6, 0.1, 0.3, 0.001, 0.005, 0.002, 0.8312 ],313 babyVolume: [314 90, 80, 1000, 180, 60, 50, 100, 35, 15, 50, 3.5, 2, 1.8, 0.6, 0.1, 0.3, 0.001, 0.005, 0.002, 0.8315 ]316 };317 318 // Function to remove outliers using IQR319 function removeOutliers(xData, yData) {320 const combinedData = xData.map((x, i) => ({ x, y: yData[i] }));321 322 // Calculate quartiles and IQR for yData323 const sortedY = yData.slice().sort((a, b) => a - b);324 const Q1 = sortedY[Math.floor(sortedY.length * 0.25)];325 const Q3 = sortedY[Math.floor(sortedY.length * 0.75)];326 const IQR = Q3 - Q1;327 const lowerBound = Q1 - 1.5 * IQR;328 const upperBound = Q3 + 1.5 * IQR;329 330 // Filter out outliers331 const filteredData = combinedData.filter(point => point.y >= lowerBound && point.y <= upperBound);332 333 // Separate x and y data334 const filteredX = filteredData.map(point => point.x);335 const filteredY = filteredData.map(point => point.y);336 337 return { filteredX, filteredY };338 }339 340 // Function to format the equation341 function formatEquation(type, coefficients) {342 if (type === 'Linear') {343 return `y = ${coefficients[0].toFixed(2)}x + ${coefficients[1].toFixed(2)}`;344 } else if (type === 'Exponential') {345 return `y = ${coefficients[0].toFixed(2)}e^(${coefficients[1].toFixed(2)}x)`;346 } else if (type === 'Quadratic') {347 return `y = ${coefficients[0].toFixed(2)}x² + ${coefficients[1].toFixed(2)}x + ${coefficients[2].toFixed(2)}`;348 }349 return '';350 }351 352 // Function to create a chart with best-fit regression353 function createChart(canvasId, xData, yData, xLabel, yLabel, bestFitId, bestFitAccuracyId, equationId, linearAccuracyId, expAccuracyId, quadAccuracyId) {354 // Remove outliers355 const { filteredX, filteredY } = removeOutliers(xData, yData);356 357 const chartData = filteredX.map((x, index) => ({ x, y: filteredY[index] }));358 359 // Perform regressions360 const linear = regression.linear(chartData.map(point => [point.x, point.y]));361 const exp = regression.exponential(chartData.map(point => [point.x, point.y]));362 const quad = regression.polynomial(chartData.map(point => [point.x, point.y]), { order: 2 });363 364 // Determine the best fit (highest R²)365 const regressions = [366 { type: 'Linear', r2: linear.r2, points: linear, coefficients: [linear.equation[1], linear.equation[0]] },367 { type: 'Exponential', r2: exp.r2, points: exp, coefficients: [exp.equation[0], exp.equation[1]] },368 { type: 'Quadratic', r2: quad.r2, points: quad, coefficients: [quad.equation[2], quad.equation[1], quad.equation[0]] }369 ];370 const bestFit = regressions.reduce((best, current) => (current.r2 > best.r2 ? current : best));371 372 // Generate points for the best-fit regression373 const bestFitPoints = chartData.map(point => ({374 x: point.x,375 y: bestFit.points.predict(point.x)[1]376 }));377 378 // Render the chart379 const ctx = document.getElementById(canvasId).getContext('2d');380 const chart = new Chart(ctx, {381 type: 'scatter',382 data: {383 datasets: [384 {385 label: 'Data Points',386 data: chartData,387 backgroundColor: 'rgba(75, 192, 192, 0.6)',388 borderColor: 'rgba(75, 192, 192, 1)',389 pointRadius: 5390 },391 {392 label: `${bestFit.type} Regression`,393 data: bestFitPoints,394 backgroundColor: 'rgba(255, 99, 132, 0)',395 borderColor: 'rgba(255, 99, 132, 1)',396 type: 'line',397 pointRadius: 0398 }399 ]400 },401 options: {402 scales: {403 x: {404 type: 'linear',405 position: 'bottom',406 title: {407 display: true,408 text: xLabel409 }410 },411 y: {412 type: 'linear',413 title: {414 display: true,415 text: yLabel416 }417 }418 }419 }420 });421 422 // Display best fit, accuracy, and equation423 document.getElementById(bestFitId).textContent = bestFit.type;424 document.getElementById(bestFitAccuracyId).textContent = bestFit.r2.toFixed(4);425 document.getElementById(equationId).textContent = formatEquation(bestFit.type, bestFit.coefficients);426 427 // Display accuracy for all models428 document.getElementById(linearAccuracyId).textContent = linear.r2.toFixed(4);429 document.getElementById(expAccuracyId).textContent = exp.r2.toFixed(4);430 document.getElementById(quadAccuracyId).textContent = quad.r2.toFixed(4);431 }432 433 // Create charts434 createChart('chart1', data.gestation, data.brainSize, 'Gestation Period (Days)', 'Brain Size (grams)', 'bestFit1', 'bestFitAccuracy1', 'equation1', 'linearAccuracy1', 'expAccuracy1', 'quadAccuracy1');435 createChart('chart2', data.gestation, data.babySize, 'Gestation Period (Days)', 'Baby Size (kg)', 'bestFit2', 'bestFitAccuracy2', 'equation2', 'linearAccuracy2', 'expAccuracy2', 'quadAccuracy2');436 createChart('chart3', data.gestation, data.babyVolume, 'Gestation Period (Days)', 'Baby Volume (liters)', 'bestFit3', 'bestFitAccuracy3', 'equation3', 'linearAccuracy3', 'expAccuracy3', 'quadAccuracy3');437 createChart('chart4', data.gestation, data.brainSize.map((brain, i) => brain / data.babySize[i]), 'Gestation Period (Days)', 'Brain-to-Baby Size Ratio', 'bestFit4', 'bestFitAccuracy4', 'equation4', 'linearAccuracy4', 'expAccuracy4', 'quadAccuracy4');438 </script>439</body>440</html>