-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
121 lines (106 loc) · 7.52 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
<html>
<head>
<title>Narrative Visualization</title>
<script src="https://code.jquery.com/jquery-latest.min.js"></script>
<link href="d3.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="https://rawgit.luolix.top/Caged/d3-tip/master/examples/example-styles.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</head>
<!-- load all country names and then draw World data first -->
<body>
<div class="alert alert-warning">
<a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
The data for the country you chose doesn't exist.
</div>
<!-- Menu section -->
<div id="step1" class="container-fluid" style="height:300px">
<div>
<p>
<h1>1. World wage and salary employment rate</h1>
This scene shows the trend of worldwide average wage and salaried workers, % of total employment from 2000 to 2017.<br/>
As you can see in the plot, the percentage of worldwide wage and salary workers has been increasing, which imply that the rate of self-employed worker has been decreasing for the last 17 years.<br/><br/>
<i>Data used for the scene comes from WDI(World Bank) in realtime by their APIs, not using pre-loaded CSV file.</i><br/>
</p>
<p><div id="to_step2"><a href="#">View next >>></a></div></p>
</div>
</div>
<div id="step2" class="container-fluid" style="display:none;height:300px">
<div>
<p>
<h1>2. United of States wage and salary employment rate</h1>
This scene shows the trend of average wage and salaried workers, % of total employment from 2000 to 2017 in the US.<br/>
You can see that the percentage of the average wage and salaried workers in the US is significantly higher than the world average.<br/><br/>
All the number of total, male, and female are over 90 percent.
</p>
<p><div id="to_step3"><a href="#">View next >>></a></div></p>
</div>
</div>
<div id="step3" class="container-fluid" style="display:none;height:300px">
<div>
<p>
<h1>3. China wage and salary employment rate</h1>
What about the China then? Below line chart shows the trend of average wage and salaried workers, % of total employment from 2000 to 2017 in China.<br/>
The rate has been increasing for years, but it's just around the world average, not even close to 60%. <br/><br/>
Based on what WDI indicator says, we can see that China still has a lot to improve in this category although we should break it down further to know what specific subcategory that China has the most to in self-employment.
</p>
<p><div id="to_step4"><a href="#">View next >>></a></div></p>
</div>
</div>
<div id="step4" class="container-fluid" style="display:none;height:300px">
<div>
<p>
<h1>4. Russia wage and salary employment rate</h1>
I was expecting that Russian should be in similar shape as I already checked with China's data, but it turned out that it's quite different situation for this employment category.<br/>
Russia's situation is more like what United States is right now in the chart. But what is this mean?<br/><br/>
Both China and Russia have been ruled by communist party for decades, and if what WDI indicator says is true for this wage&salaried workes vs. self-employed, then shouldn't it be China who should has higher rate in the chart than Russia?
</p>
<p><div id="to_step5"><a href="#">View next >>></a></div></p>
</div>
</div>
<div id="step5" class="container-fluid" style="display:none;height:300px">
<div>
<p>
<h1>5. Try yourself!</h1>
Now it's your turn to find out those data!! You are given two options to query the data directly to WDI dataset.
<li>The first one is which gender data you want to query? Male only, female only, or total.</li>
<li>Second one is country. You can select the name of the country you want to query in below select box.</li>
<br/>
Everytime you select a new country or gender type, new line chart will be overlapped on existing chart.
</p>
<p><div id="startover"><a href="#"> Start over </a></div></p>
</div>
<div>
<!-- TODO : it's bug and onclick doens't work. Fix it! -->
Total <input type="radio" name="type" value="0" checked/>
Male <input type="radio" name="type" value="1"/>
Female <input type="radio"name="type" value="2"/>
</div>
<div id="country_select_container">
</div>
</div>
<div class="content">
<svg id="chart"></svg>
</div>
<script src="https://d3js.org/d3.v5.min.js" charset="utf-8"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3-tip/0.9.1/d3-tip.min.js"></script>
<script src="load.js" charset="utf-8"></script>
<script>
draw('WLD', false, 0);
draw('WLD', false, 1);
draw('WLD', false, 2);
</script>
<div class="container-fluid" style="height:50px">
<strong style="color:orange">Orange</strong> line is for total average, <strong style="color:blue">blue</strong> is for male, and <strong style="color:red">red</strong> is for female. <br/>
</div>
<div class="container-fluid">
<h4>About the indicator in WDI:</h4>
<blockquote>
The indicator of status in employment distinguishes between two categories of the total employed. These are: (a) wage and salaried workers (also known as employees); and (b) self-employed workers. Self-employed group is broken down in the subcategories: self-employed workers with employees (employers), self-employed workers without employees (own-account workers), members of producers' cooperatives and contributing family workers (also known as unpaid family workers). Vulnerable employment refers to the sum of contributing family workers and own-account workers. The series is part of the ILO estimates and is harmonized to ensure comparability across countries and over time by accounting for differences in data source, scope of coverage, methodology, and other country-specific factors. The estimates are based mainly on nationally representative labor force surveys, with other sources (population censuses and nationally reported estimates) used only when no survey data are available.
</blockquote>
</div>
</body>
<!-- any D3 or SVG related code needs to be stay below of D3 inclusion or SVG so that it exists when javascript code try to access it. -->
</html>