-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
245 lines (207 loc) · 16.6 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
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
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
<!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">
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<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=Gothic+A1:wght@500&display=swap" rel="stylesheet">
<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=Noto+Serif:wght@500;700&family=PT+Sans:wght@400;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/build/pure-min.css" integrity="sha384-yHIFVG6ClnONEA5yB5DJXfW2/KC173DIQrYoZMEtBvGzmf0PKiGyNEqe9N6BNDBH" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/build/grids-responsive-min.css">
<link rel="stylesheet" type="text/css" href="css/styles.css" media="all">
<title>FIT3179 Data Visualisation 2</title>
</head>
<body>
<div class="pure-g">
<div class="pure-u-1">
<div class="page-title">
CO2 EMISSIONS
</div>
</div>
<div class="pure-u-1-2">
<div class="pure-u-1-8">
</div>
<div class="pure-u-3-4">
<div class="page-title-description">
Global CO2 emissions have been on the <span class="bold red">rise</span>, with various sectors contributing to this increase. Key sources include the burning of <span class="bold red">oil, natural gas</span>,
and <span class="bold red">coal</span> for energy production, <span class="bold red">cement</span> production, <span class="bold red">flaring</span> of natural gas, and other industrial processes. These emissions collectively exacerbate
the challenge of <span class="bold red">climate change</span>, necessitating urgent action to curb them.
</div>
<div class="page-title-description">
Apart from the major industrial sectors like <span class="bold red">power</span> generation and <span class="bold red">industry</span>, other contributors to CO2 emissions include <span class="bold red">residential</span> energy use,
<span class="bold red">ground transportation</span>, and <span class="bold red">aviation</span>. Visualizations depicting these varied sources aim to raise awareness about the multifaceted nature of global CO2 emissions, underscoring the need for collective efforts to reduce them and combat climate change in the future.
</div>
</div>
</div>
<div class="pure-u-1-2">
<div class="pure-u-1-8">
</div>
<div class="pure-u-3-4" style="margin-left: -5%;">
<div class="page-title-description">
This visualisation utilised <span class="bold red">3 datasets</span> spanning the years <span class="bold red">1950 to 2020</span>. The first dataset is
the CO2 emissions by countries, which contains the CO2 emissions of <span class="red bold red">192 countries</span>. The second dataset is the CO2 emissions by sectors, which contains
the CO2 emissions of <span class="bold red">6 sectors</span>. The third dataset is the CO2 emissions by fuel, which contains the CO2 emissions of <span class="bold red">5 types</span>.
</div>
<div class="page-title-description">
Other than that this visualisation uses <span class="bold red">CO2 Emissions per Capita in Tons</span> as well as <span class="bold red">Metric tons of carbon dioxide equivalent (MTCO2e)</span> to represent the CO2 emissions. CO2 Emissions per Capita in Tons is the CO2 emissions divided by the population of the country. MTCO2e is the CO2 emissions multiplied by the Global Warming Potential of the gas.
</div>
</div>
</div>
<div class="line-break"></div>
<div class="content">
<div class="pure-u-1-2 idiom">
<div class="pure-u-1-8">
<svg xmlns="http://www.w3.org/2000/svg" class="bi bi-1-circle-fill" viewBox="0 0 16 16">
<path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0ZM9.283 4.002H7.971L6.072 5.385v1.271l1.834-1.318h.065V12h1.312V4.002Z"/>
</svg>
</div>
<div class="pure-u-3-4">
<div class="idiom-title">CO2 EMISSIONS OF COUNTRIES FROM YEAR 1950 - 2020</div>
<div class="idiom-subtitle">There has been a <span class="bold red">big increase</span> in CO2 emissions per Capita over the years.
Most Noticably, developed countries in continents such as <span class="red bold">Europe, Australia</span> and <span class="bold red">North America</span>.
</div>
<div id="choropleth_map" style="margin-top: 20px;"></div>
</div>
</div>
<div class="pure-u-1-2 idiom">
<div class="pure-u-1-8">
<svg xmlns="http://www.w3.org/2000/svg" class="bi bi-2-circle-fill" viewBox="0 0 16 16">
<path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0ZM6.646 6.24c0-.691.493-1.306 1.336-1.306.756 0 1.313.492 1.313 1.236 0 .697-.469 1.23-.902 1.705l-2.971 3.293V12h5.344v-1.107H7.268v-.077l1.974-2.22.096-.107c.688-.763 1.287-1.428 1.287-2.43 0-1.266-1.031-2.215-2.613-2.215-1.758 0-2.637 1.19-2.637 2.402v.065h1.271v-.07Z"/>
</svg>
</div>
<div class="pure-u-3-4">
<div class="idiom-title">COUNTRIES <span class="orange bold">ABOVE</span> AND <span class="blue bold">BELOW</span> THE AVERAGE CO2 EMISSIONS PER CAPITA IN 2020</div>
<div class="idiom-subtitle">
Countries in <span class="bold red">Europe</span> and <span class="bold red">Africa</span> has the highest ratio of countries <span class="orange bold">above</span>
and <span class="blue bold">below</span> the average CO2 emissions per capita respectively.
</div>
<div id="unit_stacked_chart"></div>
</div>
</div>
<div class="pure-u-1-2 idiom">
<div class="pure-u-1-8">
<svg xmlns="http://www.w3.org/2000/svg" class="bi bi-3-circle-fill" viewBox="0 0 16 16">
<path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0Zm-8.082.414c.92 0 1.535.54 1.541 1.318.012.791-.615 1.36-1.588 1.354-.861-.006-1.482-.469-1.54-1.066H5.104c.047 1.177 1.05 2.144 2.754 2.144 1.653 0 2.954-.937 2.93-2.396-.023-1.278-1.031-1.846-1.734-1.916v-.07c.597-.1 1.505-.739 1.482-1.876-.03-1.177-1.043-2.074-2.637-2.062-1.675.006-2.59.984-2.625 2.12h1.248c.036-.556.557-1.054 1.348-1.054.785 0 1.348.486 1.348 1.195.006.715-.563 1.237-1.342 1.237h-.838v1.072h.879Z"/>
</svg>
</div>
<div class="pure-u-3-4">
<div class="idiom-title">DISTRIBUTION OF POPULATION AND AREA OVER CO2 EMISSIONS</div>
<div class="idiom-subtitle">
There is a <span class="bold red">positive correlation</span> between the <span class="bold red">population</span> and
<span class="bold red">area</span> of a country with the <span class="bold red">CO2 emissions</span> of a country albeit some outliers include
Puerto Rico.
</div>
<div id="bubble_plot" style="margin-top: 10px;"></div>
</div>
</div>
<div class="pure-u-1-2 idiom"; style="margin-bottom: -100px">
<div class="pure-u-1-8">
<svg xmlns="http://www.w3.org/2000/svg" class="bi bi-4-circle-fill" viewBox="0 0 16 16">
<path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0ZM7.519 5.057c-.886 1.418-1.772 2.838-2.542 4.265v1.12H8.85V12h1.26v-1.559h1.007V9.334H10.11V4.002H8.176c-.218.352-.438.703-.657 1.055ZM6.225 9.281v.053H8.85V5.063h-.065c-.867 1.33-1.787 2.806-2.56 4.218Z"/>
</svg>
</div>
<div class="pure-u-3-4">
<div class="idiom-title">RANKING OF COUNTRIES WITH HIGHEST CO2 EMISSIONS OVER THE YEARS</div>
<div class=" idiom-subtitle">
The top 5 countries with the highest CO2 emissions have <span class="bold red">remained the same </span> for the last 10 years.
Even looking at the top 10 countries, there has been <span class="bold red">little change</span> in the countries that are the highest emitters of CO2 emissions.
</div>
<div id="bump_chart"></div>
</div>
</div>
<div class="pure-u-1-2 idiom">
<div class="pure-u-1-8">
<svg xmlns="http://www.w3.org/2000/svg" class="bi bi-5-circle-fill" viewBox="0 0 16 16">
<path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0Zm-8.006 4.158c1.74 0 2.924-1.119 2.924-2.806 0-1.641-1.178-2.584-2.56-2.584-.897 0-1.442.421-1.612.68h-.064l.193-2.344h3.621V4.002H5.791L5.445 8.63h1.149c.193-.358.668-.809 1.435-.809.85 0 1.582.604 1.582 1.57 0 1.085-.779 1.682-1.57 1.682-.697 0-1.389-.31-1.53-1.031H5.276c.065 1.213 1.149 2.115 2.72 2.115Z"/>
</svg>
</div>
<div class="pure-u-3-4">
<div class="idiom-title">DISTRIBUTION OF CO2 EMISSION SECTORS OF 4 MAJOR COUNTRIES</div>
<div class="idiom-subtitle">
China, Japan have high CO2 emissions in sectors such as <span class="bold red">Power</span> and <span class="bold red">Industry</span> while USA which has a poor public transport system
has higher proportion in the <span class="bold red">Ground Transportation</span> sector.
</div>
<div id="mosaic_chart" style="margin-left: -2.5%;"></div>
</div>
</div>
<div class="pure-u-1-2 idiom">
<div class="pure-u-1-8">
<svg xmlns="http://www.w3.org/2000/svg" class="bi bi-6-circle-fill" viewBox="0 0 16 16">
<path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0ZM8.21 3.855c-1.868 0-3.116 1.395-3.116 4.407 0 1.183.228 2.039.597 2.642.569.926 1.477 1.254 2.409 1.254 1.629 0 2.847-1.013 2.847-2.783 0-1.676-1.254-2.555-2.508-2.555-1.125 0-1.752.61-1.98 1.155h-.082c-.012-1.946.727-3.036 1.805-3.036.802 0 1.213.457 1.312.815h1.29c-.06-.908-.962-1.899-2.573-1.899Zm-.099 4.008c-.92 0-1.564.65-1.564 1.576 0 1.032.703 1.635 1.558 1.635.868 0 1.553-.533 1.553-1.629 0-1.06-.744-1.582-1.547-1.582Z"/>
</svg>
</div>
<div class="pure-u-3-4">
<div class="idiom-title">DISTRIBUTION OF CONTINENTS AND EMISSION TYPES IN 2020</div>
<div class="idiom-subtitle">
<span class="bold red">Asia</span> is the continent with
the highest CO2 emissions while burning of <span class="bold red">coal</span> is the highest cause of CO2 emissions in the world in the world.
</div>
<div id="sankey_diagram" style="margin-left: -4.3%; margin-top: 54px;"></div>
</div>
</div>
<div class="pure-u-1-1 idiom">
<div class="pure-u-1-8" style="margin-right: -100px;">
<svg xmlns="http://www.w3.org/2000/svg" class="bi bi-7-circle-fill" viewBox="0 0 16 16">
<path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0ZM5.37 5.11h3.972v.07L6.025 12H7.42l3.258-6.85V4.002H5.369v1.107Z"/>
</svg>
</div>
<div class="pure-u-1-2">
<div class="idiom-title">CO2 EMISSION PER CAPITA OF <span class="bold orange">MALAYSIA</span> AND <span class="bold blue">AUSTRALIA</span> FROM 1960 - 2020</div>
<div class="idiom-subtitle">
The CO2 emissions per capita of <span class="bold orange">Malaysia</span> has been on the <span class="bold red">rise steadily</span> while
<span class="bold blue">Australia</span> has been on an <span class="bold red">exponential increase</span> in CO2 emissions per capita
signifying the development of the country at the expense of the environment.
</div>
<div id="line_chart"></div>
</div>
</div>
</div>
<div class="line-break"></div>
<div class="pure-u-1-1 footer">
<p>This visualisation is created by <a href="https://github.com/regantan/FIT3179" target="_blank">Tan Won Lun</a>. The datasources are obtained from
<a href="https://www.kaggle.com/datasets/moazzimalibhatti/co2-emission-by-countries-year-wise-17502022?select=CO2+emission+by+countries.csv" target=" _blank">CO2 Emission by countries Year wise (1750-2022)</href>,
<a href="https://www.kaggle.com/datasets/thedevastator/global-fossil-co2-emissions-by-country-2002-2022?select=GCB2022v27_percapita_flat.csv" target=" _blank">Emissions by Country</a> and
<a href="https://www.kaggle.com/datasets/saloni1712/co2-emissions" target=" _blank">CO2 Emissions by Sectors</a>.
</p>
</div>
</div>
</div>
<script type="text/javascript">
var spec1 = "choropleth_map/js/emissions.vg.json";
vegaEmbed('#choropleth_map', spec1, { "actions": false }).then(function(result) {
// Access the Vega view instance (https://vega.github.io/vega/docs/api/view/) as result.view
}).catch(console.error);
var spec2 = "bubble_plot/js/bubble_plot.vg.json";
vegaEmbed('#bubble_plot', spec2, { "actions": false }).then(function(result) {
// Access the Vega view instance (https://vega.github.io/vega/docs/api/view/) as result.view
}).catch(console.error);
var spec3 = "bump_chart/js/bump_chart.vg.json";
vegaEmbed('#bump_chart', spec3, { "actions": false }).then(function(result) {
// Access the Vega view instance (https://vega.github.io/vega/docs/api/view/) as result.view
}).catch(console.error);
var spec4 = "unit_stacked_chart/js/unit_stacked_chart.vg.json";
vegaEmbed('#unit_stacked_chart', spec4, { "actions": false }).then(function(result) {
// Access the Vega view instance (https://vega.github.io/vega/docs/api/view/) as result.view
}).catch(console.error);
var spec5 = "mosaic_chart/js/mosaic_chart.vg.json";
vegaEmbed('#mosaic_chart', spec5, { "actions": false }).then(function(result) {
// Access the Vega view instance (https://vega.github.io/vega/docs/api/view/) as result.view
}).catch(console.error);
var spec6 = "line_chart/js/line_chart.vg.json";
vegaEmbed('#line_chart', spec6, { "actions": false }).then(function(result) {
// Access the Vega view instance (https://vega.github.io/vega/docs/api/view/) as result.view
}).catch(console.error);
var spec7 = "sankey_diagram/js/sankey_diagram.vg.json";
vegaEmbed('#sankey_diagram', spec7, { "actions": false }).then(function(result) {
// Access the Vega view instance (https://vega.github.io/vega/docs/api/view/) as result.view
}).catch(console.error);
</script>
</body>
</html>