-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
105 lines (90 loc) · 5.32 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
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="UTF-8">
<title>Landing Page</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">
<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>
<link rel="stylesheet" href="style.css">
</head>
<body>
<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="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Plot
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="temperature.html">Max Temperature</a>
<a class="dropdown-item" href="humdity.html">Humidity</a>
<a class="dropdown-item" href="cloudiness.html">Cloudiness</a>
<a class="dropdown-item" href="windspeed.html">Wind Speed</a>
</div>
</li>
<li class = "nav-item">
<a class="dropdown-item" href="comparison.html">Comparison</a>
</li>
<li class = "nav-item">
<a class="dropdown-item" href="data.html">Data</a>
</li>
</ul>
</div>
</nav>
</div>
<div class = "container">
<div class = "row">
<div class = "col-lg-7">
<div class = "col-md-12">
<br>
<div class = "box">
<div class ="h1">Summary: Latitude vs. X</div>
<hr>
<img src="Resources/Assets/City Lat vs Max Temp.png" class="vizualization rounded float-left" alt="Max Temperature Graph">
<p>
The purpose of this project was to analyze how weather changes as you get closer to the equator. To
accomplish this analysis, we first pulled data from the OpenWeatherMap API to assemble a dataset on over
500 cities.
</p>
<p>
After assembling the dataset, we used Matplotlib to plot various aspects of the weather vs. latitude.
Factors we looked at included: temperature, cloudiness, wind speed, and humidity. This site provides the
source data and visualizations created as part of the analysis, as well as explanations and descriptions of
any trends and correlations witnessed.
</p>
</div>
</div>
</div>
<div class = "col-lg-5">
<div class = "col-md-12">
<br>
<div class = "box">
<div class ="h1">Visualizations</div>
<hr>
<div class = "row">
<div class = "col-6">
<a href="temperature.html"><img src="Resources/Assets/City Lat vs Max Temp.png" width="100%" alt="Max Temperature">
</div>
<div class = "col-6">
<a href="humdity.html"><img src="Resources/Assets/City Lat vs Humidity.png" width="100%" alt="Humidity">
</div>
<div class = "col-6">
<a href="cloudiness.html"><img src="Resources/Assets/City Lat vs Cloudiness.png" width="100%" alt="Cloudiness">
</div>
<div class = "col-6">
<a href="windspeed.html"><img src="Resources/Assets/City Latitude vs Wind Speed.png" width="100%" alt="Wind Speed">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>