dmarcus9.github.io/Visualization1.html at master · dmarcus9/dmarcus9.github.io · 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
102
103
104
105
106
107
108
109
110
<!-- MaxTemp visualization page -->

<!--  target MEANS??? and other parts of <a> ??  </a>-->
<!--   with a descriptive title and heading tag.
The plot/visualization itself for the selected comparison.
A paragraph describing the plot and its significance. -->
<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title>Max.Temp visualization</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
  <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>

  <!-- nav bar from BOOTSTRAP -->
  <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a id="BigTitle" class="navbar-brand" href="index.html">&nbsp Lattitude &nbsp</a>

    <!-- button shows up on a small screen -->
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <!-- collapse when screen gets smaller...nav bar becomes menu icon -->
    <div class="collapse navbar-collapse" id="navbarNavDropdown">
      <div class="ml-auto">

        <ul class="navbar-nav">
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              Plots
            </a>
            <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
              <a class="dropdown-item" href="Visualization1.html">Max Temperature</a>
              <a class="dropdown-item" href="Visualization2.html">Humidity</a>
              <a class="dropdown-item" href="Visualization3.html">Cloudiness</a>
              <a class="dropdown-item" href="Visualization4.html">Wind Speed</a>
            </div>
          </li>

          <li class="nav-item">
            <a class="nav-link" href="comparisons.html">Comparisons</a>
          </li>

          <li class="nav-item">
            <a class="nav-link" href="Data.html">Data</a>
          </li>

        </ul>
      </div>
    </div>
  </nav>

  <!-- BOOTSTRAP'S COLUMN GRID SYSTEM -->

  <div class="container">
    <div class="row">
      <div class="col-md-8">

        <h2>Max Temperature</h2>
        <br><br>
        <a href="Visualization1.html">
          <img src="Resources/assets/images/Fig1.png" alt="Temperature vs. Latitude" width="600" float: left></a>

        <p>In the scatterplot above, we can see what the temperature is like as we approach the equator...
          it gets hotter, as expected.
          We can also see (perhaps not as clearly) that it is summer in the Southern Hemisphere
          at the time the data was collected (January). This is due to the tilt of the earth on its axis.</p>
      </div>

      <!-- 4 graphs as a preview and link  -->
      <div class="col-md-4">
        <h3>Visualizations</h3>
        <div id="Previews">
          <!-- id called in css file -->

          <a href="Visualization1.html">
            <img src="Resources/assets/images/Fig1.png" alt="Temperature vs. Latitude">
          </a>

          <a href="Visualization2.html">
            <img src="Resources/assets/images/Fig2.png" alt="Humidity vs. Latitude">
          </a>

          <a href="Visualization3.html">
            <img src="Resources/assets/images/Fig3.png" alt="Cloudiness vs. Latitude">
          </a>

          <a href="Visualization4.html">
            <img src="Resources/assets/images/Fig4.png" alt="Wind Speed vs. Latitude">
          </a>

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

  <!-- large screen...small screen  Be sure your website works at all window widths/sizes. -->

  <!-- bootstrap's required javascript connection, with nav bar from bootstrap at top, and created the nav bar -->
  <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.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

</body>

</html>