-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathcloudiness.html
101 lines (83 loc) · 4.76 KB
/
cloudiness.html
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
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="UTF-8">
<title>Latitude Analysis Dashboard</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<link rel="stylesheet" href="assets/style.css">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="index.html">Latitude</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor02" aria-controls="navbarColor02" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<ul class="nav nav-pills">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Plots</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="temperature.html">Max Temperature</a>
<a class="dropdown-item" href="humidity.html">Humidity</a>
<a class="dropdown-item" href="cloudiness.html">Cloudiness</a>
<a class="dropdown-item" href="wind_speed.html">Wind Speed</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="comparison.html">Comparison</a>
</li>
<li class="nav-item">
<a class="nav-link" href="data.html">Data</a>
</li>
</ul>
</nav>
<div class="container">
<div class="row">
<div class="col-lg-7 col-md-12">
<!-- Left box -->
<div class="box" style="padding-bottom: 5px;">
<h3 class="title">Cloudiness</h3>
<hr>
<img src="visualizations/LatitudevsCloud.png" alt="Cloudiness Graph" style="width:600px;height:400px;padding:20px">
<p align = "justify">Clouds are formed when relatively moist air rises. As a mass of air ascends, the lower pressures prevailing at higher levels allow it to expand. In expanding, the air cools adiabatically (i.e., without heat exchange with the surrounding air) until its temperature falls below the dew point, upon which the air becomes supersaturated such that water vapour condenses onto cloud condensation.</p>
</div>
</div>
<div class="col-lg-5 col-md-12">
<!-- Right Box -->
<div class="box">
<h5 class="title">Visualizations</h5>
<hr>
<div class="container">
<div class="row" style="padding-bottom: 30px;">
<div class="col-6">
<a href="temperature.html">
<img class="panel" src="visualizations/LatitudevsTemp.png" alt="Max Temperature Image" style="width:150px;height:100px">
</a>
</div>
<div class="col-6">
<a href="humidity.html">
<img class="panel" src="visualizations/LatitudevsHum.png" alt="Humidity Graph" style="width:150px;height:100px">
</a>
</div>
</div>
<div class="row" style="padding-bottom: 30px;">
<div class="col-6">
<a href="cloudiness.html">
<img class="panel" src="visualizations/LatitudevsCloud.png" alt="Cloudiness Graph" style="width:150px;height:100px">
</a>
</div>
<div class="col-6">
<a href="wind_speed.html">
<img class="panel" src="visualizations/LatitudevsWind.png" alt="Wind Speed Graph" style="width:150px;height:100px">
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>