-
Notifications
You must be signed in to change notification settings - Fork 0
/
plot4.html
136 lines (102 loc) · 6.16 KB
/
plot4.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
133
134
135
136
<!-- Wind Speed Plot page for the Web Visualization Dashboard -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Visualization Dashboard - Wind</title>
<!-- Bring in bootstrap stylesheet -->
<!-- <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"> -->
<!-- bootswatch theme: superhero -->
<link rel="stylesheet" href="./css/superhero_bootstrap.css">
<!-- additional css for images -->
<link rel="stylesheet" href="./css/viz-css.css">
<!-- Bootstrap javascript -->
<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 at top -->
<nav class="navbar navbar-expand-md navbar-light bg-light">
<!-- site header -->
<a class="navbar-brand color-back" href="index.html"><h1>Latitude</h1></a>
<!-- collapsed navbar menu button that toggles on when screen size is sm or xs -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="true" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<!-- navbar items -->
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="index.html">Home</a>
</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>
<!-- dropdown list for plots -->
<li class="nav-item dropdown active">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Plots
</a>
<!-- dropdown list items -->
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="plot1.html">Max Temp</a>
<a class="dropdown-item" href="plot2.html">Cloudiness</a>
<a class="dropdown-item" href="plot3.html">Humidity</a>
<a class="dropdown-item" href="plot4.html">Wind Speed<span class="sr-only">(current)</span></a>
</div>
</li>
</ul>
</div>
</nav>
<br>
<!-- ----------------------------------------------------------------------------------------- -->
<!-- ----------------------------------------------------------------------------------------- -->
<!-- Container for content -->
<div clas='container'>
<!-- 1 row with 2 cards, summary and viz -->
<div class="row d-flex justify-content-center">
<!-- summary card -->
<div class="col-md-8">
<div class="card">
<div class="card-body">
<div class="card-header">
<h3><strong>Wind Speed</strong></h3>
</div>
<div class="row d-flex justify-content-center">
<!-- image -->
<img class="viz-main" src="./Resources/Wind_Speed.png" alt="[visualisation]">
</div>
<div class="row d-flex justify-content-center">
<div class="col-md-11">
<!-- explanation text -->
<p>There did not appear to be a correlation between latitude and wind speed based on the cities analyzed on July 5th, 2019. Additional analysis would be needed to make any other claims.</p>
</div>
</div>
</div>
</div>
</div>
<!-- ----------------------------------------------------------------------------------------- -->
<!-- smaller visualization card on right side -->
<div class="col-md-3">
<div class="card">
<div class="card-body">
<div class="card-header">
<h3><strong>Visualizations</strong></h3>
</div>
<!-- each plot image is a link to that plot's page -->
<!-- current plot is highlighted with a border -->
<a href="plot1.html"> <img src="./Resources/Max_Temp.png" alt="[visualisation]" class="viz-card viz-center"> </a>
<a href="plot2.html"> <img src="./Resources/Cloudiness.png" alt="[visualisation]" class="viz-card viz-center"> </a>
<a href="plot3.html"> <img src="./Resources/Humidity.png" alt="[visualisation]" class="viz-card viz-center"> </a>
<a href="plot4.html"> <img src="./Resources/Wind_Speed.png" alt="[visualisation]" class="viz-card viz-center border border-primary"> </a>
</div>
</div>
</div>
</div>
</div>
</body>
</html>