-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
365 lines (287 loc) · 13.1 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
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
<html>
<head>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-127331742-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-127331742-1');
</script>
<title> Will You Lose Your Jobs in 2030? </title>
<meta charset="utf-8">
<link rel="icon" href="favicon.ico" type="image/x-icon"/>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
<meta name="description" content="The technology-driven world in which we live is a world filled with promise but also challenges." />
<meta name="keywords" content="" />
<meta name="robots" content="noindex,nofollow,noarchive,nosnippet">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<base href=""/>
<meta property="og:title" content="Will You Lose Your Jobs in 2030?" />
<meta property="og:url" content="https://shellyscheng.github.io/Automatization-and-Job-Viz/" />
<meta property="og:description" content="The technology-driven world in which we live is a world filled with promise but also challenges.This visualization project highlights scenarios for the future of work in six focus countries: China, Germany, India, Japan, Mexico, and the United States." />
<meta property="og:image" content="https://shellyscheng.github.io/Automatization-and-Job-Viz/background.png" />
<meta name="twitter:title" content="Will You Lose Your Jobs in 2030?" />
<meta name="twitter:description" content="The future of work in six focus countries: China, Germany, India, Japan, Mexico, and the United States." />
<meta name="twitter:image" content="https://shellyscheng.github.io/Automatization-and-Job-Viz/background.png" />
<!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css"> -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<!-- script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script> -->
<style>
svg {
display: block;
margin: 0 auto;
}
img.block {
display: block;
border: solid #333 1p;
margin: 0 auto;
}
svg {
margin-bottom: 15px;
}
.step {
padding-bottom: 200px;
margin-bottom: 10px;
}
.step, .row {
padding-top: 2rem;
}
.step:last-of-type {
padding-bottom: 250px;
}
.active {
background: beige;
}
footer {
background: #f1f1f1;
color: #333;
padding: 60px 0;
text-align: center;
}
th, td {
padding: 15px;
font-weight: normal;
font-family: "Helvetica";
line-height: 22px;
}
.part {
padding-top: 30px;
padding-bottom: 30px;
}
/*
Begin Full-bleed backgrounds
Many ways to fix up the text to be readable
https://css-tricks.com/design-considerations-text-images/
*/
.bg1 {
background: url('background.png');
}
.bg2 {
background: url('background2.png');
}
.transbox {
margin: 30px;
padding: 30px 15px;
background-color: #ffffff;
border: none;
opacity: 0.8;
filter: alpha(opacity=80); /* For IE8 and earlier */
}
.background-image {
background-size: cover;
padding: 200px 50px;
/*
150px spacing between text and top/bottom of image
20px spacing between text and left/right of screen
*/
}
.transbox h1 {
text-transform: uppercase;
color: #000000;
font-family: "Geogria";
font-weight: bold;
text-align: center;
font-size: 53px;
}
#graphic-1 {
display: flex;
}
#chart {
display: flex;
flex-basis: 100%;
}
/*
End full-bleed backgrounds
*/
/*
The following allows us to make the graphic
"sticky" to the top of the page. The "top"
attribute should probably be the same as
the offset for scrollama (but % instead of decimal)
*/
.sticky {
position: -webkit-sticky;
position: -moz-sticky;
position: -ms-sticky;
position: -o-sticky;
position: sticky;
height: fit-content;
top: 33vh;
max-height: 64vh;
}
.graphic h3 {
text-align: center;
padding-bottom: 0;
}
.background-image h3 {
text-align: center;
padding-top: 10px;
font-size: 35px;
}
.background-image h4 {
text-align: center;
padding-top: 20px;
font-size: 20px;
}
@media (min-width: 650px) {
.svg-container {
display: inline-block;
position: relative;
width: 100%;
padding-bottom: 100%;
vertical-align: top;
overflow: hidden;
}
}
@media (max-width: 650px) {
.svg-container {
display: inline-block;
position: relative;
width: 100%;
padding-bottom: 100%;
vertical-align: top;
overflow: hidden;
top: 0px;
position: sticky;
}
}
.svg-content {
display: inline-block;
position: absolute;
top: 10;
left: 10;
}
</style>
</head>
</head>
<body>
<div class="background-image bg1">
<div class="transbox">
<h1>Will you lose your jobs in 2030? </h1>
<h3>Workforce transitions in a time of automation</h3>
<h4> Visuals by <a href="https://twitter.com/shellyscheng">Shelly Cheng</a> | Dec 9, 2017 </h4>
</div>
</div>
<div class="container">
<div class="part">
<div class="row">
<p>"The technology-driven world in which we live is a world filled with promise but also challenges. Cars that drive themselves, machines that read X-rays, and algorithms that respond to customer-service inquiries are all manifestations of powerful new forms of automation. Yet even as these technologies increase productivity and improve our lives, their use will substitute for some work activities humans currently perform—a development that has sparked much public concern." </p>
<p> In the following section, this visualization project highlights "scenarios for the future of work in six countries: China, Germany, India, Japan, Mexico, and the United States. The charts show a range of possible outcomes for jobs displaced by automation adoption to 2030 and scenarios for future jobs that could be created by seven catalysts of labor demand, as well as by new occupations that could arise." </p>
<p>Text and Data from McKinsey Global Institute’s latest report, <a href="https://www.mckinsey.com/~/media/mckinsey/global%20themes/future%20of%20organizations/what%20the%20future%20of%20work%20will%20mean%20for%20jobs%20skills%20and%20wages/mgi%20jobs%20lost-jobs%20gained_report_december%202017.ashx">Jobs lost, jobs gained: Workforce transitions in a time of automation</a></p>
<div class="col-sm-5">
<div class="step" id="creatives">
<h3 style="color: #66c2a5">Creatives</h3>
<p>Includes: Aritists, designers, entertainers, and media workers</p>
</div>
<div class="step" id="technology">
<h3 style="color: #fc8d62">Technology professionals</h3>
<p>Includes: Computer engineers, and computer specialists</p>
</div>
<div class="step" id="managers">
<h3 style = "color: #1f78b4">Managers and executives</h3>
<p>Includes: CEOs, sales managers</p>
</div>
<div class="step" id="teachers">
<h3 style="color: #e78ac3">Teachers</h3>
<p>Includes: Schoolteachers, postsecondary teachers, other education professionals, and education support workers</p>
</div>
<div class="step" id="builders">
<h3 style="color: #a6d854">Builders</h3>
<p>Includes: Building engineers, architects, surveyors, construction workers, installation and repair workers, crane and tower operators</p>
</div>
<div class="step" id="cares">
<h3 style="color: #ffd92f">Care providers</h3>
<p>Includes: Doctors, nurses, physician assistants, pharmacists, therapists, health aides and health support, childcare workers, health technicians, community and social workers</p>
</div>
<div class="step" id="professionals">
<h3 style="color: #8c510a">Professionals</h3>
<p>Includes: Account managers, engineers, business and financial specialists, lawyers and judges, legal-industry support staff, math specialists, scientists, and academics</p>
</div>
</div>
<div class="col-sm-7 graphic sticky">
<div id="chart-1" class="svg-container">
</div>
</div>
</div>
</div>
<div class="part">
<h3 style="color: #7570b3">In 2030</h3>
<table style="width:100%">
<tr>
<th><b style="color: #7570b3">China:</b> "China’s shift out of agriculture into manufacturing and services is likely to continue and, as incomes continue rising, consumption will increase. With its aging and shrinking workforce, China will benefit from embracing automation to increase productivity and meet projected 2030 labor needs."</p>
</th>
<th><b style="color: #7570b3">Germany:</b> "Germany has an aging population and a declining working-age population. Relatively high wages make a stronger case for early automation adoption, while medium GDP growth creates sufficient labor demand in most scenarios. Health-care needs from aging and increased consumer spending will drive most job creation."</p>
</th>
<th><b style="color: #7570b3">India:</b> "India is expected to continue industrializing as its economy shifts away from agriculture. As GDP per capita continues to expand amid rapid growth of the labor force, many of India’s jobs of the future will be driven by construction and the consumption habits of the expanding middle class."</p>
</th>
</tr>
<tr>
<th><b style="color: #7570b3">Japan:</b> "Japan’s sector mix and relatively high wages will speed automation adoption, while relatively slow GDP per capita growth could dampen labor demand. The decline in the working-age population will act as a countervailing force, but a step-up scenario of job creation will be needed to sustain future employment."</p>
</th>
<th><b style="color: #7570b3"> Mexico:</b> "Mexico has a young population and a growing workforce. Mid- to low-wage levels may slow automation adoption, while comparatively low GDP growth may temper growth in labor demand. The step-up scenario will create enough labor demand to offset the effects of both automation and demographics."</p>
</th>
<th><b style="color: #7570b3">United States:</b> "Automation adoption will likely be significant in the United States, even as steady projected GDP per capita growth drives new labor demand. While labor demand will enable employment of displaced workers in the step-up scenario, up to one-third of the workforce may need to change occupational categories."</p>
</th>
</tr>
</table>
</div>
</div>
<div class="background-image bg2">
</div>
<footer>
</footer>
<!-- This is D3, our graphing library -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.2/d3.min.js"></script>
<script src="https://d3js.org/topojson.v1.min.js"></script>
<!-- include our scrolling library -->
<script src='https://unpkg.com/scrollama'></script>
<script src='stickyfill.min.js'></script>
<!-- <script src='.js'></script> -->
<script>
/* Allow position: sticky to work in old browsers */
var elements = document.querySelectorAll('.sticky');
Stickyfill.add(elements);
// instantiate the scrollama
var scroller = scrollama();
scroller
.setup({
offset: 0.50, // how far from the top?
step: '.step', // class for stepping through
debug: false, // shows the line
container: 'container'
})
.onStepEnter(function(response) {
// trigger the stepin event
d3.select(response.element).dispatch('stepin')
})
.onStepExit(function(response) {
// trigger the stepout event
d3.select(response.element).dispatch('stepout')
})
</script>
<script src='graphics.js'></script>
</body>
</html>