-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
131 lines (121 loc) · 6.99 KB
/
index.html
File metadata and controls
131 lines (121 loc) · 6.99 KB
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta name="description" content="Latitude Analysis Weather" />
<meta name="author" content="Alejandro Ochoa" />
<!-- Icon -->
<link rel="icon" href="/WebVisualizations/assets/images/temp_icon.png">
<title>Latitude Analysis Dashboard</title>
<!-- Link to Style CSS Sheet -->
<link rel="stylesheet" href="/WebVisualizations/assets/css/style.css">
<!-- <link rel="stylesheet" href="style.css"> -->
<!-- Reference to Bootstrap -->
<link href="https://cdn.datatables.net/1.10.20/css/dataTables.bootstrap4.min.css" rel="stylesheet" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/js/all.min.js" crossorigin="anonymous"></script>
</head>
<body class="sb-nav-fixed">
<nav class="sb-topnav navbar navbar-expand navbar-dark bg-dark">
<a class="navbar-brand" href="index.html">Latitude</a>
<button class="btn btn-link btn-sm order-1 order-lg-0" id="sidebarToggle" href="#"><i class="fas fa-bars"></i></button>
<ul class="navbar-nav ml-auto ml-md-0">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" id="userDropdown" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Plots</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="userDropdown">
<a class="dropdown-item" href="maxtemp.html">Max Temperature</a>
<a class="dropdown-item" href="humidity.html">Humidity</a>
<a class="dropdown-item" href="cloudness.html">Cloudiness</a>
<a class="dropdown-item" href="windspeed.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 id="layoutSidenav">
<div id="layoutSidenav_content">
<main>
<br>
<div class="container-fluid">
<div class="row">
<div class="col-xl-8 col-md-4" style='display: inline-block'>
<div class="card-header" >
<i class="fas fa-clipboard"></i>
Sumary: Latitude and Weather
</div>
<div class="card-body" style="margin-left: auto; margin-right: auto; display: inline-block" >
<img class="card-img" src="/WebVisualizations/assets/images/Fig1.png" alt="Max Temperature Graph" width="100%">
<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 class="col-xl-4 col-md-3" style='display: inline-block'>
<div class="card-header">
<i class="fas fa-chart-bar mr-1"></i>
Visualizations
</div>
<div class="card-body" style="margin-left: auto; margin-right: auto; display: inline-block">
<div class="row" >
<div class="col-md-6">
<a href="maxtemp.html">
<img src="/WebVisualizations/assets/images/Fig1.png" alt="Max Temperature" class="imageNav-photo" >
</a>
</div>
<div class="col-md-6">
<a href="humidity.html">
<img src="/WebVisualizations/assets/images/Fig2.png" alt="Humidity" class="imageNav-photo" >
</a>
</div>
</div>
<div class="row" style="padding-bottom: 30px;">
<div class="col-md-6">
<a href="cloudness.html">
<img src="/WebVisualizations/assets/images/Fig3.png" alt="Cloudiness" class="imageNav-photo" >
</a>
</div>
<div class="col-md-6">
<a href="windspeed.html">
<img src="/WebVisualizations/assets/images/Fig4.png" alt="Wind Speed" class="imageNav-photo" >
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
<footer class="py-4 bg-light mt-auto">
<div class="container-fluid">
<div class="d-flex align-items-center justify-content-between small">
<div class="text-muted">Copyright © Alejandro Ochoa</div>
<div>
<a href="#">Privacy Policy</a>
·
<a href="#">Terms & Conditions</a>
</div>
</div>
</div>
</footer>
</div>
</div>
<!-- JQuery scripts -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" crossorigin="anonymous"></script>
<!-- Poopper.js -->
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
crossorigin="anonymous"></script>
<!-- Bootstrap -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>
<!-- toggle sidebar script-->
<script src="/WebVisualizations/assets/js/scripts.js"></script>
</body>
</html>