Web-Visualization-Dashboard/wind_speed.html at main · rejane-b/Web-Visualization-Dashboard · GitHub

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
<!DOCTYPE html>
<html lang="en-us">

<head>
  <meta charset="UTF-8">
  <title>Latitude Analysis Dashboard</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
  <link rel="stylesheet" href="assets/style.css">
</head>


<body>
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
        <a class="navbar-brand" href="index.html">Latitude</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor02" aria-controls="navbarColor02" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>

        <ul class="nav nav-pills">
            <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Plots</a>
              <div class="dropdown-menu">
                <a class="dropdown-item" href="temperature.html">Max Temperature</a>
                <a class="dropdown-item" href="humidity.html">Humidity</a>
                <a class="dropdown-item" href="cloudiness.html">Cloudiness</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>

    </nav>

    <div class="container">
        <div class="row">
          <div class="col-lg-7 col-md-12">
            <!-- Left box  -->
            <div class="box" style="padding-bottom: 5px;">
              <h3 class="title">Wind Speed</h3>
              <hr>
              <img src="visualizations/LatitudevsWind.png" alt="Wind Speed Graph" style="width:600px;height:400px;padding:20px">
              <p align = "justify">The winds at all latitudes to the north of 0° deflect to the right of their intended path in the Northern Hemisphere. If the earth did not rotate, an object would continue on a straight-line path without appearing to deflect at all. The amount of deflection varies with latitude, the speed of the object and the rotation of the earth. The deflection is greatest at the poles and decreases to zero at the equator.</p>
            </div>
          </div>

          <div class="col-lg-5 col-md-12">
            <!-- Right Box -->
            <div class="box">
              <h5 class="title">Visualizations</h5>
              <hr>


              <div class="container">
                <div class="row" style="padding-bottom: 30px;">
                  <div class="col-6">
                    <a href="temperature.html">
                      <img class="panel" src="visualizations/LatitudevsTemp.png" alt="Max Temperature Image" style="width:150px;height:100px">
                    </a>
                  </div>
                  <div class="col-6">
                    <a href="humidity.html">
                      <img class="panel" src="visualizations/LatitudevsHum.png" alt="Humidity Graph" style="width:150px;height:100px">
                    </a>
                  </div>
                </div>

                <div class="row" style="padding-bottom: 30px;">
                  <div class="col-6">
                    <a href="cloudiness.html">
                      <img class="panel" src="visualizations/LatitudevsCloud.png" alt="Cloudiness Graph" style="width:150px;height:100px">
                    </a>
                  </div>
                  <div class="col-6">
                    <a href="wind_speed.html">
                      <img class="panel" src="visualizations/LatitudevsWind.png" alt="Wind Speed Graph" style="width:150px;height:100px">
                    </a>
                  </div>


                </div>
              </div>


            </div>
          </div>
        </div>
      </div>

      <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>

</body>

</html>