-
Notifications
You must be signed in to change notification settings - Fork 0
/
max_temperature.html
112 lines (105 loc) · 5.12 KB
/
max_temperature.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Visualization Dashboard</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
<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>
</head>
<body>
<!-- NavBar https://getbootstrap.com/docs/4.3/components/navbar/ -->
<div class= "navigation">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<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 ml-auto">
<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="cloudiness.html">Cloudiness</a>
<a class="dropdown-item" href="humidity.html">Humidity</a>
<a class="dropdown-item" href="max_temperature.html">Max Temperature</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>
</div>
<!-- Content Visualization and Boxes -->
<div class="container">
<div class="row">
<!--Left Summary and Visualization-->
<div class="col-lg-6 col-md-12">
<div class="box">
<h3 class="title">Max Temperature</h3>
<hr>
<img src= "WebImages/CityLatitude_vs_MaxTemp.png" alt="Max Temp Graph">
<p class="text-justify"> Based on data collected in mid July, cities along the equator and 20 degrees latitude have high temperatures, but cities
in between the 18 to 42 degree latitudes have the highest temperatures. This may be due to the summer season and geographical location.</p>
</div>
</div>
<!--Right Visualizations-->
<div class= "col-lg-6 col-md-12">
<div class="box">
<h4 class="title">Visualizations</h4>
<hr>
<div class="container">
<div class="row" style="padding-bottom: 30px;">
<div class="col-sm-6">
<a href= "max_temperature.html" data-toggle="tooltip" data-placement="auto" title="Max Temperature">
<img class="panel" src="WebImages/CityLatitude_vs_MaxTemp.png" alt= "Max Temperature">
</a>
</div>
<div class="col-sm-6">
<a href= "humidity.html" data-toggle="tooltip" data-placement="auto" title="Humidity">
<img class="panel" src="WebImages/CityLatitude_vs_Humidity.png" alt= "Humidity">
</a>
</div>
</div>
<div class="row" style="padding-bottom: 30px;">
<div class="col-sm-6">
<a href= "cloudiness.html" data-toggle="tooltip" data-placement="auto" title="Cloudiness">
<img class="panel" src="WebImages/CityLatitude_vs_Cloudiness.png" alt= "Cloudiness">
</a>
</div>
<div class="col-sm-6">
<a href= "wind_speed.html" data-toggle="tooltip" data-placement="auto" title="Wind Speed">
<img class="panel" src="WebImages/CityLatitude_vs_WindSpeed.png" alt= "Wind Speed">
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!--Footer-->
<footer>
<div class="footer-copyright text-center py-3"> © 2019 Copyright:
<a href="#">Oswald Vinueza</a>
</div>
</footer>
<script>
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})
</script>
</body>
</html>