OpenWeatherMap-API-Web-Visualization-Dashboard/maxtemp.html at master · cap015700/OpenWeatherMap-API-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
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Bootstrap Visualization Dashboard</title>
  <link rel="stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <link rel="stylesheet" href = "style.css">
</head>

<body>
        <nav class="navbar navbar-default">
                <div class="container-fluid">
                  <!-- Brand and toggle get grouped for better mobile display -->
                  <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                      <span class="sr-only">Toggle navigation</span>
                      <span class="icon-bar"></span>
                      <span class="icon-bar"></span>
                      <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="index.html">Lattitude</a>
                  </div>

                  <!-- Collect the nav links, forms, and other content for toggling -->

                    <ul class="nav navbar-nav navbar-right">
                      <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Plots <span class="caret"></span></a>
                        <ul class="dropdown-menu">
                          <li><a href="maxtemp.html">Max Temperature</a></li>
                          <li><a href="humidity.html">Humidity</a></li>
                          <li><a href="cloudiness.html">Cloudiness</a></li>
                          <li><a href="windspeed.html">Wind Speed</a></li>
                        </ul>
                      </li>
                      <li><a href="comparison.html">Comparison</a></li>
                      <li><a href="data.html">Data</a></li>
                    </ul>
                  </div><!-- /.navbar-collapse -->
                </div><!-- /.container-fluid -->
              </nav>
        <div class="container">
        <div class = "row">
                <div class="col-lg-7 col-sm-12">
                        <h1>Max Temperature</h1>
                        <hr>
                        <br>
                            <img src="Fig1.png" alt="Latiitude vs. Max Temperature" width = "680" height="480">
                            <br>
                            <p>
                                As expected, the weather becomes significantly warmer as one approaches the equator (0 Deg.
                                Latitude). More interestingly, however, is the fact that the southern hemisphere tends to be
                                warmer this time of year than the northern hemisphere. This may be due to the tilt of the earth at
                                the time of the year this data was gathered.
                            </p>
                </div>

                <div class="col-lg-3 col-lg-offset-1 col-sm-12">
                <h2>Visualizations</h2>
                <hr>
                <div class="row">
                    <div class="col-lg-6 col-sm-3">
                        <a href ="maxtemp.html">
                        <img src="Fig1.png" alt="Latitude vs. Max Temperature" width = "140" height="120" style="border: rgb(12, 173, 167) 3px solid;">
                        </a>
                    </div>

                    <div class="col-lg-6 col-sm-3">
                    <a href = "humidity.html">
                        <img src="Fig2.png" alt="Latitude vs. Humidity" width = "140" height="120">
                        </a>
                    </div>

                    <div class="col-lg-6 col-sm-3">
                    <a href = "cloudiness.html">
                         <img src="Fig3.png" alt="Latitude vs. Cloudiness" width = "140" height="120">
                        </a>
                    </div>

                    <div class="col-lg-6 col-sm-3">
                    <a href="windspeed.html">
                        <img src="Fig4.png" alt="Latitude vs. Wind Speed" width = "140" height="120">
                        </a>
                    </div>

            </div>
            </div>
        </div>
        </div>
        <br>
        <footer class="footer navbar-fixed-bottom">
          <div class="two-toned-footer-color"></div>
          <p class="text-muted text-muted-footer text-center">
            &copy; Charles Pratt 2018
          </p>
        </footer>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</html>