├── script.js ├── README.md ├── index.html ├── License.txt └── style.css /script.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Akajiaku11/Global-Temp-Anomaly-Analysis/HEAD/script.js -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Global Temperature Anomaly Analysis 2 | 3 | This project visualizes global temperature anomalies over time, highlighting significant deviations using Chart.js. 4 | 5 | ## Features 6 | - Detects and highlights temperature anomalies. 7 | - Interactive year range slider to filter data. 8 | - Fully responsive design. 9 | 10 | ## Setup 11 | 1. Clone the repository: 12 | ```bash 13 | git clone 14 | cd 15 | https://github.com/Akajiaku11 16 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Global Temperature Anomaly Analysis 7 | 8 | 9 | 10 |
11 |

Global Temperature Anomaly Analysis

12 |

Analyze global temperature trends and detect anomalies over decades.

13 | 14 | 15 | 16 |
17 | 18 | 19 | 1880 20 |
21 | 22 |
23 |

Note: Anomalies are detected when the temperature deviation is above a certain threshold compared to the average.

24 |
25 |
26 | 27 | 28 | 29 | 30 | 31 | -------------------------------------------------------------------------------- /License.txt: -------------------------------------------------------------------------------- 1 | 2 | --- 3 | 4 | ### **3. `LICENSE`** 5 | Use the MIT License to allow open-source usage: 6 | 7 | ```plaintext 8 | MIT License 9 | 10 | Copyright (c) 2024 Dr.Desmond Eteh Roland 11 | 12 | Permission is hereby granted, free of charge, to any person obtaining a copy 13 | of this software and associated documentation files (the "Software"), to deal 14 | in the Software without restriction, including without limitation the rights 15 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 16 | copies of the Software, and to permit persons to whom the Software is 17 | furnished to do so, subject to the following conditions: 18 | 19 | The above copyright notice and this permission notice shall be included in all 20 | copies or substantial portions of the Software. 21 | 22 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 23 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 24 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 25 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 26 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 27 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 28 | SOFTWARE. 29 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | 7 | body { 8 | font-family: Arial, sans-serif; 9 | background-color: #f4f4f4; 10 | color: #333; 11 | display: flex; 12 | justify-content: center; 13 | align-items: center; 14 | height: 100vh; 15 | margin: 0; 16 | } 17 | 18 | .container { 19 | background-color: #fff; 20 | padding: 30px; 21 | border-radius: 8px; 22 | box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); 23 | width: 80%; 24 | max-width: 1200px; 25 | } 26 | 27 | h1 { 28 | font-size: 2rem; 29 | color: #333; 30 | text-align: center; 31 | margin-bottom: 20px; 32 | } 33 | 34 | canvas { 35 | width: 100%; 36 | height: 400px; 37 | } 38 | 39 | .controls { 40 | margin-top: 20px; 41 | text-align: center; 42 | } 43 | 44 | label { 45 | font-size: 1rem; 46 | margin-right: 10px; 47 | } 48 | 49 | input[type="range"] { 50 | width: 80%; 51 | } 52 | 53 | span { 54 | font-weight: bold; 55 | } 56 | 57 | .info { 58 | margin-top: 20px; 59 | font-size: 1rem; 60 | color: #666; 61 | text-align: center; 62 | } 63 | 64 | .anomaly { 65 | background-color: rgba(255, 99, 132, 0.6); 66 | border-radius: 5px; 67 | } 68 | 69 | .anomaly-text { 70 | text-align: center; 71 | font-weight: bold; 72 | color: red; 73 | } 74 | --------------------------------------------------------------------------------