-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathcloudiness.html
132 lines (121 loc) · 6.61 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
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Web Visualization Dashboard</title>
<!--CSS Link-->
<link rel="stylesheet" href="Resources/assets/style.css">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>
<body>
<!-- Navbar -->
<nav class="navbar navbar-expand-lg navbar-light" style="background-color:rgb(241, 190, 95)">
<a class="navbar-brand" href="index.html">Latitude</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Plots
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="max_temp.html">Maximum Temperature</a>
<a class="dropdown-item" href="humidity.html">Humudity</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>
</div>
</nav>
<!-- Content -->
<div class="jumbotron">
<div class="container-fluid">
<div class="row">
<div class="col-lg-4 col-md-12">
<!-- Image Box -->
<div class="box">
<div class="container">
<img src="Resources/assets/images/Lat_Cloud.png" class="visualization rounded float-right" alt="Latitude vs Cloudiness Graph" style="width:100%;">
</div>
</div>
</div>
<div class="col-lg-8 col-md-12">
<!-- Paragraph Box -->
<div class="box" style="margin-left: 60px;margin-right: 40px;">
<h2 class="title">Cloudiness </h2>
<p>Cloudiness does not show a strong correlation to latitude. The visualization shows a great variety of cloudiness percentages at different latitudes. Therefore, we cannot conclude that there is a conclusive pattern between cloudiness
and latitude.Therefore, we cannot conclude that there is a conclusive pattern between cloudiness and latitude.</p>
<p></p>
</div>
</div>
</div>
</div>
</div>
<!-- Cards -->
<h4 class="title text-center">Visualizations</h4>
<div class="container-fluid" style="padding: 30px;">
<div class="row">
<div class="card-deck">
<div class="col-lg col-md-6">
<div class="card bg-light mb-3" style="max-width: 20rem;">
<a href="max_temp.html">
<img class="card-img-top" src="Resources/assets/images/Lat_Temp.png" alt="Max Temp Graph" style="width:100%">
<div class="card-body text-center text-white">
<h4 class="card-title">Max Temperature</h4>
</div>
</div>
</div>
<div class="col-lg col-md-6">
<div class="card bg-light mb-3" style="max-width: 20rem;">
<a href="humidity.html">
<img class="card-img-top" src="Resources/assets/images/Lat_Humid.png" alt="Humidity Graph" style="width:100%">
<div class="card-body text-center text-white">
<h4 class="card-title">Humidity</h4>
</div>
</div>
</div>
<div class="col-lg col-md-6">
<div class="card bg-light mb-3" style="max-width: 20rem;">
<a href="cloudiness.html">
<img class="card-img-top" src="Resources/assets/images/Lat_Cloud.png" alt="Cloudiness Graph" style="width:100%">
<div class="card-body text-center text-white">
<h4 class="card-title">Cloudiness</h4>
</div>
</div>
</div>
<div class="col-lg col-md-6">
<div class="card bg-light mb-3" style="max-width: 20rem;">
<a href="wind_speed.html">
<img class="card-img-top" src="Resources/assets/images/Lat_Wind.png" alt="Wind Speed Graph" style="width:100%">
<div class="card-body text-center text-white">
<h4 class="card-title">Wind Speed</h4>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
<!-- Footer -->
<footer class="footer navbar-expand-lg navbar-dark text-center">
<div class="footer-copyright">
<div class="top"> <span> Web Design & Data Visualization by Zen Acar</span>
</div>
</div>
</footer>
<!-- Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</html>