-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
109 lines (85 loc) · 5.67 KB
/
index.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
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="UTF-8">
<!-- bootstrap's responsive meta tag -->
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Latitude: A Weather Analysis Dashboard with Attitude</title>
<!-- bootstrap css links and script -->
<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">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<link rel="stylesheet" href="styles.css">
</head>
<body class="bg-light">
<!-- navbar -->
<nav class="navbar navbar-expand-lg navbar-light bg-white py-0">
<a class="navbar-brand bg-info text-white p-2" 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 justify-content-end" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item active dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Plots</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="latvsmaxtemp.html">Max Temperature</a>
<a class="dropdown-item" href="latvshum.html">Humidity</a>
<a class="dropdown-item" href="latvscloud.html">Cloudiness</a>
<a class="dropdown-item" href="latvswind.html">Wind Speed</a>
</div>
</li>
<li class="nav-item active">
<a class="nav-link" href="comparisons.html">Comparison</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="data.html">Data</a>
</li>
</ul>
</div>
</nav>
<!-- main content -->
<div class="container">
<div class="row">
<div class="col-md-12 col-lg-7 mt-5">
<div class="card">
<h4 class="card-header text-info">Summary: Latitude vs. X</h4>
<div class="card-body">
<img id="img-wrap" class="img-fluid img-center" src="assets/images/Fig1.png" Title="Lat vs Temp" width="400">
<p class="card-text font-weight-light">In this project, we are supposed to visualize the weather of 500+ cities across the world of varying distance from the equator by utilizing the CitiPy library and the OpenWeatherMap API.</p>
<p class="card-text font-weight-light">After creating the dataset, Matplotlib was used to plot latitude against various factors such as max temperatures, wind speed, humidity and cloudiness in order to find possible correlations. This site provides the data used and
the visualizations created, along with an explanation of trends or correlations.</p>
</div>
</div>
</div>
<div class="col-md-12 col-lg-5 mt-5">
<div class="card">
<h4 class="card-header text-info">Visualizations</h4>
<div class="card-body">
<div class="row pb-3">
<div class="col-md-6">
<a href="latvsmaxtemp.html"><img class="img-fluid img-center viz-box" src="assets/images/Fig1.png" title="Lat vs. Max Temp" width="400"></a>
</div>
<div class="col-md-6">
<a href="latvshum.html"><img class="img-fluid img-center viz-box" src="assets/images/Fig2.png" title="Lat vs. Humidity" width="400"></a>
</div>
</div>
<div class="row pb-3">
<div class="col-md-6">
<a href="latvscloud.html"><img class="img-fluid img-center viz-box" src="assets/images/Fig3.png" title="Lat vs. Cloudiness" width="400"></a>
</div>
<div class="col-md-6">
<a href="latvswind.html"><img class="img-fluid img-center viz-box" src="assets/images/Fig4.png" title="Lat vs. Wind Speed" width="400"></a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Bootstrap javascript tags -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js " integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN " crossorigin="anonymous "></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js " integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q " crossorigin="anonymous "></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js " integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl " crossorigin="anonymous "></script>
</body>
</html>