-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
103 lines (90 loc) · 5 KB
/
index.html
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Methane Emissions</title>
<!--Bootstrap-->
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous"/>
<!-- Leaflet CSS -->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
crossorigin=""/>
<link rel="stylesheet" href="static/css/leaflet.groupedlayercontrol.css" />
<!-- d3 JavaScript -->
<script src="https://d3js.org/d3.v5.min.js"></script>
<!-- Leaflet JavaScript -->
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
crossorigin=""></script>
<script src="static/js/leaflet.groupedlayercontrol.js"></script>
<script src="static/js/choropleth.js"></script>
<script src="static/js/charts.js"></script>
<!--CSS-->
<link rel="stylesheet" type="text/css" href="static/css/style.css">
</head>
<body class="p-3 mb-2 bg-light text-dark">
<div class="wrapper">
<nav class="navbar navbar-light p-3 mb-2 bg-light text-dark navbar-expand-lg">
<a class="navbar-brand" href="index.html">Methane Emissions</a>
</nav>
</div>
<div class="jumbotron bg-cover text-white">
<h1 class="display-4">Methane Emissions Around the World</h1>
</div>
<div class="container-fluid p-3 mb-2 bg-info text-white">
<div class="row">
<div class="row">
<div class="col-md-4">
<h3 style="text-align:center">What You Need to Know About Methane</h3>
</div>
<div class="col-md-8">
<ul style="list-style-type:square">
<li>Methane (CH4), the primary component of natural gas, is responsible for more than 25 per cent of the warming we are experiencing today. (IPCC)</li>
<li>Methane is a powerful greenhouse gas, with a Global Warming Potential more than 80 times greater than that of carbon dioxide (CO2) during the 20 years after it is released into the atmosphere.</li>
<li>Methane is responsible for around half of the growth in tropospheric ozone formation, a dangerous air pollutant. (UNEP)</li>
<li>The European Union, the United States and Partners have launched the Global Methane Pledge to champion methane mitigation in the short-term. Over 100 countries representing 70% of the global economy have now joined the Pledge and committed to reducing global methane emissions by at least 30 percent from 2020 levels by 2030.</li>
<li>The 1.5°C target cannot be achieved without reducing methane emissions by 40-45% by 2030. Reduction of this magnitude would avoid nearly 0.3° C of warming by 2045 and complement long-term climate change mitigation efforts. (CCAC)</li>
</p>
</div>
</div>
<div class="col-md-1">
</div>
<div class="col-md-10">
<h3 style="text-align:center">Let's explore world methane emissions and find if there is a correlation between countries' GDP and amount of greenhouse gas (methane) they release.</h3>
</div>
</div>
</div>
<div class="container-fluid">
<!-- The div that holds our map -->
<div id="mapid" style="height:500px;width:100%;"></div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-md-3">
<form class="p-3 mb-2 bg-light text-dark" style="font-family: inherit; font-size: 1rem;">
<p>Filter Search</p>
<ul class="list-group p-3 mb-2 bg-light text-dark" style="font-family: inherit; font-size: 1rem;">
<li class="list-group-item p-3 mb-2 bg-light text-dark" style="font-family: inherit; font-size: 1rem;">
<label for="country">Select Country</label>
<select id="selCountry" class="form-control"></select>
</li>
</ul>
</form>
</div>
<div class="col-md-9">
<img src="static/images/plot.png" alt="Plot" style="max-width:fit-content;">
</div>
</div>
</div>
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.11.0/d3.js"></script> -->
<!-- API key -->
<script type="text/javascript" src="static/js/config.js"></script>
<!-- Our JavaScript -->
<script type="text/javascript" src="static/js/map.js"></script>
</body>
</html>