-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
301 lines (246 loc) · 10.7 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
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
<!DOCTYPE html>
<html>
<head>
<title>Gross Domestic Product</title>
<!-- Import Vega & Vega-Lite (does not have to be from CDN) -->
<script src="https://cdn.jsdelivr.net/npm/vega@5"></script>
<script src="https://cdn.jsdelivr.net/npm/vega-lite@4"></script>
<!-- Import vega-embed -->
<script src="https://cdn.jsdelivr.net/npm/vega-embed@6"></script>
<!-- Import pure.css -->
<link rel="stylesheet" href="https://unpkg.com/[email protected]/build/pure-min.css" integrity="sha384-cg6SkqEOCV1NbJoCu11+bm0NvBRc8IYLRGXkmNrqUBfTjmMYwNKPWBTIKyw9mHNJ" crossorigin="anonymous">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Google font -->
<link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;700;900&display=swap" rel="stylesheet">
<!-- custom style -->
<style>
*{
font-family: 'Source Sans Pro', sans-serif;
}
h1{
font-weight: 900;
font-size:50pt;
color:#85bb65;
}
h2{
color:#85bb65;
}
body{
background-color: #85bb65;
}
.page{
width: 1200px;
background-color: white;
margin: auto;
padding: 50px;
padding-top: 35px;
}
.c {
display: flex;
}
.vis-container{
width: 100%;
}
.description h2, h1{
margin-top:0px;
}
.description-right {
padding-left: 20px;
}
.description-left{
padding-right: 20px;
}
.pure-g{
margin-bottom: 25px;
}
.small-font{
font-size: 14px;
}
.content-right {
vertical-align: middle;
paddingt-left: 20px;
}
</style>
</head>
<body>
<div class="page">
<!-- pure grid group -->
<div class="pure-g">
<div class="pure-u-1-1">
<h1>Gross Domestic Product</h1>
<p>Gross Domestic Product or GDP is a monetary measure of the value of goods and services produced in a country, at a specific time. It is often used as a method to quantify the economic progress and health of a country. This visualization demonstrates the various factors that affect the GDP of a country and vice-versa. It must be noted that while GDP is a fairly good indicator of economic standing, it does not accurately reflect the cost of living and inflation rates of countries. </p>
</div>
</div>
<!-- end pure grid group -->
<!-- pure grid group -->
<div class="pure-g">
<div class="pure-u-1-1">
<div id="choropleth_map" class="vis-container"></div>
</div>
</div>
<!-- end pure grid group -->
<!-- pure grid group -->
<div class="pure-g">
<div class="pure-u-1-2">
<div class="description description-left">
<h2>GDP by end-use consumption</h2>
<p> By splitting a country's GDP by the end use consumption, we get an idea of where most of the spending in the country occurs. Exports consist of sales, barter, gifts, or grants of goods and services from residents to nonresidents. Fixed capital is the amount of money businesses have spent on fixed assets such as machinery. Goverment consists of payments the government makes such as interest on debt and unemployment payment. Household is the individual consumtion of local or foreign goods and services.Imports consist of sales, barter, gifts, or grants of goods and services from nonresidents to residents. They are negative percentages to account for the fact that the other expenditures also include expenditures on imports. Lastly, inventories are the net changes to stock outputs held by businesses. Here we visualise the end-use composition of the three most powerful countries in the world. </p>
</div>
</div>
<div class="pure-u-1-2">
<div id="bar_graph" class="vis-container"></div>
</div>
</div>
<!-- end pure grid group -->
<!-- pure grid group -->
<div class="pure-g">
<div class="pure-u-1-2">
<div id="scatter_plot2" class="vis-container"></div>
</div>
<div class="pure-u-1-2">
<div class="description description-left">
<h2>GDP's effect on happiness</h2>
<p>Another useful metric that is used to gauge a countries success is the happiness of it's citizens. Here we attempt to visualise the effect that a country's GDP per capita (the GDP per resident) has on the happiness of it's citizens. Happiness is quantified here by the "Happiness Index" which is obtained by surveying people in the country and asking them to rate how happy they are. </p>
<p>As shown on the graph, there seems to be a clear correlation between the happiness of citizens and a country's GDP per capita. This is most likely due to the fact that people in these countries have better living standards </p>
<p> </p>
<p>Use the slider to change the year being visualised!</p>
</div>
</div>
</div>
<!-- end pure grid group -->
<!-- pure grid group -->
<div class="pure-g">
<div class="pure-u-1-2">
<div class="description description-right">
<h2>Population Density and GDP</h2>
<p>The geography and population of a country are also factors that could have consequences on a country's GDP. A higher population means there are a larger number of able workers, and so a higher workforce. But if large populations are not managed well, high unemployment rates can have adverse effects on the economy.</p>
<p>As seen on the graph countries with smaller countries tend to have a higher GDP per capita. This may be due to the fac that some small countries have large deposits of natural resources, and this wealth is spread amongst a small population. A lot of small countries also have big financial sectors that generate a lot of money. On the other hand, there does not seem to be an evident correlation between population size and GDP. </p>
</div>
</div>
<div class="pure-u-1-2">
<div id="scatter_plot" class="vis-container"></div>
</div>
</div>
<!-- end pure grid group -->
<!-- pure grid group -->
<div class="pure-g">
<div class="pure-u-1-2">
<div id="line_chart" class="vis-container"></div>
</div>
<div class="pure-u-1-2">
<div class="description description-right">
<h2>Worker Productivity</h2>
<p>An effective way to measure the productivity of workers in a country is to calculate the ratio between GDP and hours worked - this shows us how long people in the country work to make the money they spend. A large reason why productivity is increasing in general around the world is the emergence of computers and other technology.</p>
<p> As seen in the graph, countries that have long working hours (Japan and South Korea) are less productive as opposed to countries with shorter work weeks. This may be due to the fact that working long hours non-stop can eventually cause burnout in workers, which reduces productivity in the long run.</p>
</div>
</div>
</div>
<!-- end pure grid group -->
<!-- pure grid group -->
<div class="pure-g">
<div class="pure-u-1-1">
<h2>United States GDP Growth (%) from 1961 to 2019</h2>
<p>The United States is currently the most dominant economic power with a GDP of over 22 trillion USD. Here we visualise the percentage growth of it's GDP since 1961 and highlight a few significant economic events.</p>
</div>
</div>
<!-- end pure grid group -->
<!-- pure grid group -->
<div class="pure-g">
<div class="pure-u-1-3">
<div id="my_dataviz" class="vis-container" >
<style>
body{
background-color: whitesmoke;
}
:root {
--line-chart-color: #85bb65;
--annotation-context-color:#85bb65;
--annotation-above-color: #85bb65;
--annotation-anomaly-color: #E8336D;
}
svg {
background-color: white;
font-family: 'Lato';
}
.axis, .axis text {
fill: var(--line-chart-color);
}
.axis line, path {
stroke: var(--line-chart-color);
}
path {
fill: none;
}
.annotation path {
stroke: var(--annotation-context-color);
}
.annotation:not(.above):not(.anomaly) path {
stroke-dasharray: 1,3;
}
.annotation text {
fill: var(--annotation-context-color);
}
.annotation.above path {
stroke: var(--annotation-above-color);
}
.annotation.above text {
fill: var(--annotation-above-color);
}
.annotation.anomaly path {
stroke: var(--annotation-anomaly-color);
stroke-width: 2px;
}
.annotation.anomaly text {
fill: var(--annotation-anomaly-color);
}
.annotation-note-bg {
fill: rgba(0, 0, 0, 0);
}
.annotation-note-title {
font-weight: bold;
}
text.title {
font-size: 1.2em;
font-weight: bold;
}
</style>
<!-- Load d3.js -->
<script src="https://d3js.org/d3.v4.js"></script>
<!-- Load d3-annotation -->
<script src="https://rawgit.com/susielu/d3-annotation/master/d3-annotation.min.js"></script>
<script src="js/viz.js"></script>
<!-- Create a div where the graph will take place -->
</div>
</div>
</div>
<!-- end pure grid group -->
<div class="pure-g">
<div class="pure-u-1-1 small-font">
<p>This visualisation is created by <a href="https://github.com/mazm0002" target="_blank">Munir Azme</a>.</p>
</div>
</div>
</div> <!-- end page -->
<script type="text/javascript">
var vis1 = "js/happiness_map.vl.json";
vegaEmbed('#choropleth_map', vis1,{"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 vis2 = "js/fixed_pop_gdp.vl3.json";
vegaEmbed('#scatter_plot', vis2,{"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 vis3 = "js/freedom.vl2.json";
vegaEmbed('#scatter_plot2', vis3,{"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 vis4 = "js/gdp_per_hour.vl.json";
vegaEmbed('#line_chart', vis4,{"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 vis5 = "js/expenditure.vl1.json";
vegaEmbed('#bar_graph', vis5,{"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>