Web-Design-Challenge/WebVisualizations at master · subilu84/Web-Design-Challenge · 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

<!DOCTYPE html>
<html lang="en-us">
  <head>
    <meta charset="UTF-8">
    <title>Open Weather Project</title>
    <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">
    <link rel="stylesheet" href="style.css">
  </head>

  <body>
      <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <div class="container-fluid navbar-custom">
          <a class="navbar-brand" href="Introduction.html"><h1>Latitude</h1></a>
          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
          aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
          <div class="collapse navbar-collapse" id="navbarSupportedContent">
              <ul class="nav navbar-nav ml-auto w-100 justify-content-end">
                  <li class="nav-item dropdown">
                      <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                      Plots
                      </a>
                      <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                      <a class="dropdown-item" href="temperature.html">Max Temperature</a>
                      <a class="dropdown-item" href="humidity.html">Humidity</a>
                      <a class="dropdown-item" href="clouds.html">Cloudiness</a>
                      <a class="dropdown-item" href="wind.html">Wind Speed</a>
                      </div>
                  </li>
                  <li class="nav-item active"><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>
          </div>
        </div>
        </nav>

    <main class="main-bio">
        <section id="main-bio">
            <section id="figure">
              <h2>Summary: Latitude vs. X</h2><br>
              <hr>
              <img id="bio-image" src="lat_temp.png" alt="Lattitude">
            </section>
            <p>The purpose of this project is analyze how weather changes as you get closer to the equator. To accomplish this analysis, we first pulled data from OpenWeatherMap API (on 04/23/2020) to assemble a dataset in over 500 cities.</p>
            <p>After assembling the dataset , I used Matplotlib to plot various aspects of the weather vs. latitude. Factors I looked at included: temperature, cloudiness, wind speed, and humidity. This site provides the source data and the visualizations created as part of the analysis, as well as explanations as descriptiio of any trends and correlations witnessed.</p>
        </section>

    <div class="visualization">
      <h2>Visualization</h2>
      <hr>
      <section id="visual">
        <a href="temperature.html">
          <img alt="temp" src="lat_temp.png" width="120" height="130">
        </a>
        <a href="clouds.html">
          <img alt="cld" src="C:\Users\subil\Desktop\SSC\3\images\lat_cld.png" width="120" height="130">
        </a>
        <a href="humidity.html">
          <img alt="hum" src="lat_hum.png" width="120" height="130">
        </a>
        <a href="wind.html">
          <img alt="wind" src="lat_wind.png" width="120" height="130">
      </a>
      </section>
    </div>

    </main>


<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>
  </head>
</html>