DataVis2/index.html at main · Ahmad-IKR/DataVis2 · 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
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Climate Focus</title>
    <link
      rel="stylesheet"
      href="https://unpkg.com/purecss@2.0.6/build/pure-min.css"
      integrity="sha384-Uu6IeWbM+gzNVXJcM9XV3SohHtmWE+3VGi496jvgX1jyvDTXfdK+rfZc8C1Aehk5"
      crossorigin="anonymous"
    />
    <link
      rel="stylesheet"
      href="https://unpkg.com/purecss@2.0.6/build/grids-responsive-min.css"
    />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Rubik+Mono+One&display=swap"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="css/layout.css" />
    <script src="https://cdn.jsdelivr.net/npm/vega@5.20.2"></script>
    <script src="https://cdn.jsdelivr.net/npm/vega-lite@5.1.0"></script>
    <script src="https://cdn.jsdelivr.net/npm/vega-embed@6.17.0"></script>
    <script src="js/vega_lite_vis.js"></script>
  </head>
  <body>
    <div class="page">
      <h1 id="title">
        Climate in Focus: <span id="subtitle">A Data-Driven Exploration</span>
      </h1>

      <p class="p1">
        This visualization delves into a myriad of key indicators, from
        <strong>rising temperatures</strong> and increasing
        <strong>CO2 emissions</strong> to shifts in
        <strong>sea levels</strong> and the extent of <strong>ice loss</strong>,
        to paint a vivid picture of the escalating
        <strong>climate crisis</strong>. Through meticulously collected data and
        powerful visual representations, this exploration vividly underscores
        the urgency of addressing global warming and highlights the imperative
        need for collective action to combat the impending climate challenges
        that threaten our planet and future generations.
      </p>

      <!-- GLOBAL TEMPERATURE SECTION -->
      <h1 id="subtitle">Global Temperatures</h1>
      <div class="pure-g">
        <div class="pure-u-1-3">
          <p class="p1">
            <strong>Rising global temperatures</strong> are a primary driver of
            climate change, intensifying heatwaves, altering precipitation
            patterns, and increasing the frequency of extreme weather events.
            These temperature increases are disrupting ecosystems, melting ice
            caps, and accelerating sea-level rise, underscoring the profound
            impact of warming on the planet's climate.
          </p>
        </div>
        <div class="pure-u-2-3">
          <div id="tempMap"></div>
        </div>
      </div>

      <!-- CO2 LEVELS -->
      <h1 id="subtitle">CO2 LEVELS</h1>
      <div class="pure-g">
        <div class="pure-u-2-3">
          <div id="emissions"></div>
        </div>
        <div class="pure-u-1-3">
          <p class="p1">
            Rising global temperatures are a primary driver of climate change,
            intensifying heatwaves, altering precipitation patterns, and
            increasing the frequency of extreme weather events. These
            temperature increases are disrupting ecosystems, melting ice caps,
            and accelerating sea-level rise, underscoring the profound impact of
            warming on the planet's climate.
          </p>
        </div>
      </div>

      <!-- RISING SEA LEVELS -->
      <h1 id="subtitle">RISING SEA LEVELS</h1>
      <div class="pure-g">
        <div class="pure-u-1-3">
          <p class="p1">
            <strong>Rising sea levels</strong>, a consequence of climate change,
            intensify coastal erosion, flood risks, and disrupt ecosystems,
            threatening vulnerable communities. This phenomenon results from the
            thermal expansion of seawater and the melting of ice caps and
            glaciers, underscoring the urgency of addressing climate change.
          </p>
        </div>
        <div class="pure-u-2-3">
          <div id="sealevel"></div>
        </div>
      </div>

      <!-- EXTREME WEATHER EVENTS -->
      <h1 id="subtitle">EXTREME WEATHER EVENTS</h1>
      <div class="pure-g">
        <div class="pure-u-2-3">
          <div id="weathermap"></div>
        </div>
        <div class="pure-u-1-3">
          <p class="p1">
            Extreme weather events are increasingly linked to climate change as
            rising global temperatures alter atmospheric patterns and increase
            the frequency and intensity of events such as <strong>hurricanes, heatwaves,
            floods, and droughts</strong>. These changes are driven by the enhanced
            greenhouse effect, primarily caused by human-induced increases in
            greenhouse gas emissions, which trap more heat in the Earth's
            atmosphere and disrupt weather systems.
          </p>
        </div>
      </div>

      <!-- CARBON FOOTPRINTS -->
      <h1 id="subtitle">CARBON FOOTPRINTS</h1>
      <div class="pure-g">
        <div class="pure-u-1-3">
          <p class="p1">
            <strong>Carbon footprints</strong> from various sectors, such as
            energy, transportation, and agriculture, contribute to climate
            change by releasing greenhouse gases, primarily carbon dioxide
            (CO2), into the atmosphere. These emissions trap heat, leading to
            global warming, more frequent extreme weather events, rising sea
            levels, and ecological disruptions, collectively exacerbating the
            climate crisis.
          </p>
        </div>

        <div class="pure-u-2-3">
          <div id="footprint"></div>
        </div>
      </div>
    </div>
  </body>
</html>