-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
122 lines (112 loc) · 5.8 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CS 416 Narrative Visualization: The Effect of the World Wide Web on GDP per Capita as an Economic Indicator
</title>
<link rel="stylesheet" href="styles.css">
<script src="https://d3js.org/d3.v6.min.js"></script>
<script src="https://rawgit.com/susielu/d3-annotation/master/d3-annotation.min.js"></script>
</head>
<body>
<div id="chart-container">
<div id="slide1" class="slide">
<h1>Average World GDP Per Capita Over Time</h1>
<p class="content">Average world GDP per capita has increased over time despite significant economic events
like
recessions and wars. As the world entered the 21st century with the invention of the world wide web
during the 1990s,
we can see how major, global economic events start to have a greater impact on average world GDP,
whereas
similar
events did not change the global GDP per capita significantly before 1990. The web allowed for
businesses to
reach a
global audience, which generally increased economic health indicators like imports, exports, and
employment rates, leading to higher GDPs per capita. The web also increased global economic
codependency,
which
is why average world GDP per capita starts to react more to economic events post 1990-1991.
</p>
<svg id="svg1" width="1200" height="500"></svg>
<div id="tooltip"></div>
</div>
<div id="slide2" class="slide">
<h1>GDP Per Capita Line Graph Per Country</h1>
<p class="content">GDP per capita for each country continued to increase from 1960 to 2020. Note that 1990
marks a significant
moment in time for each country as, around that time, GDP per capita starts to fluctuate more. This
gradual increase
in GDP per capita - along with its more emphasized fluctuation after 1990 -
can be attributed to the effect of the internet on economic health. Thus, it can be concluded that
average
economic comfort has increased for each country as a result of global interconnectedness due to the
world wide web,
albeit at the cost of more
sensitivity for each country to major economic events around the globe. Take for example how
the early 1980s recession did not cause significant change in any country's GDP per capita. However,
almost
every country was negatively
impacted by the 2008 financial crisis although it started in the United States. This negative impact can
be seen
through the relative decrease in the GDP per capita in 2009, the year after the 2008 recession.
</p>
<label for="country-select1">Select Country:</label>
<select id="country-select1"></select>
<svg id="svg2" width="960" height="500"></svg>
</div>
<div id="slide6" class="slide">
<h1>GDP Per Capita Choropleth Map</h1>
<p class="content">From 1960 to 2020, on average, countries have gotten richer as their GDP per Capita has
increased.
From this, it can be inferred that economic comfort across the world has gradually increased since the
1960s. Notice that global trends in GDP per capita start to become more apparent after 1990 as GDP per
Capita for each country sees more fluctuation, primarily in first world countries. Note how
the 1981-1982 recession did not cause significant change in countries' GDP per capita, while the
2008-2009
recession causes world GDP per capita to signficantly decrease (use arrow keys to switch between 1981
and 1982 or 2008 and 2009 to
observe the differences).
</p>
<div id="map-container">
<div id="map"></div>
<div id="slider-container">
<input type="range" min="1960" max="2020" value="1960" step="1" id="yearSlider">
<div id="label_1990">
<p>1990: internet</p>
</div>
<div id="Line1990"></div>
<div id="label_2009">
<p>2008-2009 recession</p>
</div>
<div id="label_1980s">
<p>1981-1982 recession</p>
</div>
<div id="Line2009"></div>
<div id="Line2008"></div>
<div id="Line1980s"></div>
<div id="less_fluctuation">
<p>less fluctuation pre-1990</p>
</div>
<div id="more_fluctuation">
<p>more fluctuation post-1990</p>
</div>
<div id="year-label-container">
<label for="yearSlider" id="yearLabel">1960</label>
</div>
</div>
<div id="tooltip2" class="hidden">
<p><strong id="country-name"></strong></p>
<p>GDP per Capita: <span id="GDP-per-capita"></span></p>
</div>
</div>
</div>
<div id="navigation">
<button id="prev">Previous</button>
<button id="next">Next</button>
</div>
</div>
<script src="script.js"></script>
</body>
</html>