Weather-Data-Web-Design/temperature_visualization.html at main · doublealogic/Weather-Data-Web-Design · 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
<!doctype html>
<html lang="en">
  <head>
    <title>Temperature Visualization Plots Page</title>
    <!-- Meta Tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap Components -->
    <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>
    <!-- Navigation Bar -->
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <a class="navbar-brand" href="index.html">Latitude</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="navbar-nav ml-auto">
            <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 active" href="temperature_visualization.html">Temperature</a>
                <div class="dropdown-divider"></div>
                <a class="dropdown-item" href="humidity_visualization.html">Humidity</a>
                <div class="dropdown-divider"></div>
                <a class="dropdown-item" href="cloudiness_visualization.html">Cloudiness</a>
                <div class="dropdown-divider"></div>
                <a class="dropdown-item" href="windspeed_visualization.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>
      </nav>

      <!-- Temperature Graphs and Explanations-->
      <div class="col-md-12">
        <div class="jumbotron">
          <h1 class="text-center display-4">Temperature Plots</h1>
          <img src="visualizations/Latitude_vs_Temperature_Plot.png" alt="Latitude vs Temperature Plot" class="rounded mx-auto d-block">
          <hr class="my-4">
          <p class="lead">Within the scatter plot comparing Latitude to Max Temperature, there looks to be a concentrated group of high temperatures as you get closer to the Equator's latitude (0 degrees), and it tapers off in either direction from there. There is a strong sense of an increase in temperatures as you get closer and a decrease in temperature as you get further away.</p>
          <br>
          <div class="row">
            <figure class="col-6">
              <img src="visualizations/Max_Temp_vs_Lat_Regression_N_Hemisphere.png" alt="N Hemisphere Temp Plot" class="img-fluid">
            </figure>

            <figure class="col-6">
              <img src="visualizations/Max_Temp_vs_Lat_Regression_S_Hemisphere.png" alt="S Hemisphere Temp Plot" class="img-fluid">
            </figure>
          </div>
          <hr class="my-4">
          <p class="lead">The Northern Hemisphere temperature graph has a strong negative correllation between the max temperature of the cities and their respective latitudes. This suggests that the further north of the equator one gets, the colder the city. It also would suggest as one gets closer to the equator, the warmer the city.</p>
          <br>
          <p class="lead">The Southern Hemisphere temperature graph has a strong positive correlation between the max temperature and the latitude for cities in the Southern Hemisphere. This would not only suggest that as you get closer to the equator, the city gets warmer, but also the further south you go, the colder the city.</p>
        </div>
      </div>


    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <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>