-
Notifications
You must be signed in to change notification settings - Fork 0
/
inter2.html
541 lines (460 loc) · 29.1 KB
/
inter2.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
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
<html>
<head>
<title>Wage Mobility Interactive</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.4.1/snap.svg-min.js"></script>
<script src="https://s3.amazonaws.com/assets.equitablegrowth.org/income_mobility/iframeResizer.contentWindow.min.js"></script>
<link href="css/materialdesignicons.min.css" media="all" rel="stylesheet" type="text/css" />
<style>
@import url(https://fonts.googleapis.com/css?family=Lato:400,700);
.subconstraint{max-width:1045px;}
.graph{max-width:1045px}
.hed{font-family:'Lato';font-size:24px;font-weight:700;}
.dek{font-family:'Lato';font-size:19px;margin-bottom:20px;}
.select_carat{
position:relative;
display:inline-block;
}
.select_carat:after{
content:"\f236";
font-family:"Material Design Icons";
font-weight:700;
width:23px;
height:24px;
color:white;
font-size:1.1em;
right:1px;
top:1px;
position:absolute;
pointer-events:none;
background:#67c2a5;
border-radius:0 1 1 0;
padding-left:4px;
padding-top:4px;
margin-bottom:5px
}
.styled-select select{
height:30px;
position:relative;
font-size:1em;
-moz-appearance:none;
-webkit-appearance:none;
padding:5px;
padding-right:29px;
margin:0;
border:1px solid black;
border-radius:2px;
background:white;
color:#555
}
</style>
</head>
<body>
<div class='subconstraint'>
<div class='hed'>Upward mobility has become less common in the U.S. economy</div>
<div class='dek'>The most well-off workers have less chance of falling down the earnings ladder in recent years. Use the menu to switch between different kinds of workers.</div>
<div class='styled-select'>
<span class='select_carat'>
<select name="select" onchange='switch_graph2()' id='demo_select2'>
<option value='All'>All</option>
<option value='Women'>Women</option>
<option value='Men'>Men</option>
<option value='High School'>High School or Less</option>
<option value='Some College'>Some College</option>
<option value='Finished College'>College +</option>
</select>
</span>
</div>
</div>
<div class='subconstraint'>
<svg id="income_graph2" viewbox='0,0,1045,700' ></svg>
</div>
</body>
<script defer>
var data2 = {'All':{'differences':{1:[9.46,8.37,5.28,-3.27,-16.38,-15.21,-15.56,-21.11,-6.61,-7.45],2:[10.06,6.89,5.82,7,-3.07,-16.65,-17.92,-24.19,-12.25,-26.6],3:[9.54,6.83,2.52,7.07,0.49,-9.97,-12.88,-14.84,-12.2,-15.25],4:[10.43,5.77,9.93,7.5,6.69,-2.86,-18.36,-15.47,-18.75,-19.17],5:[7.7,1.22,3.59,6.28,11.04,2.46,-5.35,-9.49,-18.85,-20.44],6:[5.77,1.59,1.11,8.19,12.12,11.04,-1.77,-8.68,-16.26,-24.57],7:[15.85,7.37,10.66,6.2,11.6,11.8,8.65,-5.34,-19.48,-25.75],8:[23.42,10.29,1.91,5.26,7.29,7.76,6.03,7.34,-7.98,-23.92],9:[18.16,18.45,11.56,-0.22,5.06,-5.32,1.79,.5,8.46,-13.01],10:[2.89,-19.14,-15.7,-11.99,-15.22,-12.2,-12.85,-10.71,-7.1,8.58]}},'Women':{'differences':{1:[9.71,7.61,5.81,-1.67,-17.44,-19.83,-10.21,-22.35,-14.18,-10.93],2:[8.27,6.33,8.68,6.4,-2.12,-18.02,-20.63,-31.13,-14.8,-23.85],3:[7.94,6.68,4.58,5.69,2.83,-16.45,-18,-10.98,-5.21,-17.68],4:[10.5,9.21,10.54,7.6,4.78,-4.06,-22.23,-20.46,-22.9,-4.65],5:[14.17,8.42,-1.73,2.95,14.49,2.23,-7.36,-9.63,-27.24,-24.27],6:[15.42,-2.97,3.56,16.96,9,16.28,-4.59,-11.04,-25.77,-25.86],7:[16.04,17.69,5.03,3.79,8.8,7.41,8.11,-5.09,-19.68,-19.62],8:[5.61,11.76,3.81,11.03,12.35,-11.71,1.42,1.89,4.15,-19.79],9:[18,33.02,1.9,-2.94,-7.3,7.9,-15.69,-12.19,11.6,-2.95],10:[-26.82,-42.92,-46.96,-34.2,-33.78,-30.59,-18.31,-.87,-5.68,37.1]}},'Men':{'differences':{1:[7.74,15.7,10.43,-5.91,-9.09,-2.36,-31.98,-25.15,-10.4,-21.43],2:[13.91,9.91,2.04,11.68,-3.47,-14.83,-15.57,-13.92,-17.82,-36.65],3:[11.95,7.28,.11,13.25,-1.79,.88,-5.78,-21.86,-22.61,-19.28],4:[10.79,1.49,9.18,7.95,10.67,-1.06,-13.58,-10.4,-16.27,-29.17],5:[.21,-5.26,8.97,9.48,7.67,2.37,-3.49,-9.05,-11.66,-16.94],6:[-2.73,4.96,-.5,2.54,14.75,6.83,-.07,-7.29,-8.63,-22.19],7:[10.91,-1.22,13,8.15,14.18,15.12,8.73,-6.26,-19.76,-25.6],8:[23.66,5.19,-.034,3.49,7.21,17.57,8.1,9.32,-12.98,-23.37],9:[3.03,5.93,9.9,-1.62,8.11,-9.73,7.48,4.65,7.43,-12.9],10:[.37,-21.31,-11.31,-12.32,-15.91,-11.92,-15.9,-13.85,-7.27,8.5]}},'High School':{'differences':{1:[2.9,4.24,3.26,-2.44,-17.81,-13.44,-18.29,3.53,44.79,18.02],2:[8.63,.47,.67,5.13,-3.21,-23.03,-1.5,-29.03,4.37,-26.15],3:[2.47,-1.73,.2,3.72,1.89,1.42,-3.12,-12.07,-21.28,-19.17],4:[1.57,.47,7.81,4.58,.53,-.83,-17.79,-11.84,-5.06,-25.15],5:[.79,7.81,-.45,5.88,8.22,-5.13,-8.36,-10.66,-14.02,-13.36],6:[-6.62,2.63,-.9,9.22,7.56,7.88,-5.31,-8.74,-20.61,-19.32],7:[19.4,3.2,8.26,15.35,8.6,10.47,1.12,-16.11,-23.1,-27.67],8:[3.61,3.75,-4.82,22.18,14.67,17.1,5.91,-3.79,-21.6,-21.04],9:[14.66,6.1,16.24,7.22,21.22,-2.5,12.13,6.79,-5.47,-30.22],10:[4.69,-11.24,-18.34,-10.56,12.4,-.1,-4.84,4.01,.09,1.88]}},'Some College':{'differences':{1:[12.53,9.56,-.25,-3.8,-15.07,-14.14,-10.9,-15.59,-5.92,17.36],2:[6.89,5.68,6.17,3.27,-6.34,-12.01,-19.27,-7.08,4.7,-10.3],3:[9.53,18.53,2,7.54,-1.82,-17.81,-15.08,-15.06,-5.51,1.11],4:[9.94,1.31,6.79,7.72,12.69,-3.43,-14.77,-17.25,-24.36,-10.87],5:[9,-10.54,9.7,3.82,10.92,2.45,-5.02,-12.22,-10.34,-14.76],6:[2.34,-11.74,3.03,7.29,11.74,6.04,-.93,-8.26,-8.51,-15.91],7:[5.55,15.23,15.51,-1.53,14.53,14.09,2.8,-7.41,-18.16,-22.03],8:[34.34,25.32,-6.52,-5.93,4.31,7.64,10.2,11.82,-14.09,-28.45],9:[29.47,12.02,13.61,-7.07,-.1,-8.08,4.21,6.22,6.26,-18.41],10:[-.68,-12.35,-21.91,8.7,-21.15,-10.91,-1.43,-3.21,8.55,1.27]}},'Finished College':{'differences':{1:[27.19,16.00,35.52,-6.47,-13.4,-15.47,-9.26,-28.16,-16.88,-14.22],2:[11.04,45.8,28.38,18.04,7.93,-11.18,-21.87,-25.85,-20.21,-25.62],3:[30.82,18.11,18.71,19.63,2.94,-13.47,-16.38,-14.21,-11.07,-14.68],4:[35.16,33.07,18.11,31.22,15.72,-5.13,-20.72,-17.07,-16.02,-20.35],5:[24.55,-.61,4.54,10.44,20.53,25.97,4.14,-5.66,-27.99,-24.6],6:[40.68,14.6,-.98,6.51,31.9,29.7,7.78,-8.26,-19.59,-33.15],7:[35.94,3.51,8.64,2.28,14.73,17.85,34.35,8.15,-20.82,-30.99],8:[40.72,12.71,30.35,1.32,8.44,-1.49,7.89,18.62,2.33,-28.98],9:[17.19,53.59,17.43,3.42,1.68,-.71,6.32,-5.81,17.83,-12.39],10:[34.36,-10.28,16.33,-9.23,-6.88,-8.79,-10.34,-10.53,-12.71,4.47]}}}
var mobile2 = Snap('#income_graph2')
var pos_colors=['#b7dfd1','#67c2a5','#33836A','#205946']
var neg_colors=['#fbcdbb','#f58c63','#c63F26','#8e2A1d']
var width2=950
var left_margin2=0
var type2='All'
var selectbin2
var svgel2=document.getElementById('income_graph2')
var pt2=svgel2.createSVGPoint()
if(window.outerWidth>800){
wide=1
} else{
wide=2
var shape = document.getElementById("income_graph2");
shape.setAttribute("viewBox", "0,0,1045,1400");
}
// issue commands
draw_base2()
draw_graph2(data2[type2]['differences'])
mobile2.mousemove(show_value2)
start_slides2(1)
function clear_slides2(cover,callback,immediate){
twonub1.unclick(start_slides2)
twonub2.unclick(advance2_2)
twonub3.unclick(final_click2)
try{mobile2.selectAll('[cover]').remove()}catch(err){}
mobile2.selectAll('[firstslide]').animate({opacity:0},500,function(){mobile2.selectAll('[firstslide]').remove()})
mobile2.selectAll('[secondslide]').animate({opacity:0},500,function(){mobile2.selectAll('[secondslide]').remove()})
mobile2.selectAll('[thirdslide]').animate({opacity:0},500,function(){mobile2.selectAll('[thirdslide]').remove()})
mobile2.selectAll('[texttype="temp"]').animate({opacity:0},500,function(){mobile2.selectAll('[texttype="temp"]').remove()})
mobile2.selectAll('[type="temprect"]').animate({opacity:0},500,function(){mobile2.selectAll('[type="temprect"]').remove()})
if(parseInt(mobile2.selectAll('[graphfade]')[0].attr('opacity'))===0){
mobile2.selectAll('[graphfade]').animate({opacity:1},600)
}
mobile2.selectAll('[cover]').remove()
if(cover==1){
var cover=mobile2.rect(0,0,1045,700*wide).attr({fill:'none',cover:'none','pointer-events':'visibleFill'})
mobile2.selectAll('line').attr({opacity:.4})
mobile2.selectAll('rect[starting]').attr({opacity:.4})
mobile2.selectAll('[labeltext]').attr({opacity:0})
}
mobile2.append(mobile2.selectAll('[nub]'))
if(immediate==1){var stall=0}else{var stall=600}
setTimeout(function(){
callback()
},stall)
}
function start_slides2(immediate){
if(immediate==undefined){immediate=0}
// nub stuff
twonub1.attr({'fill-opacity':1,fill:'#b7dfd1'})
twonub2.attr({'fill-opacity':.4,fill:'white'})
twonub3.attr({'fill-opacity':.4,fill:'white'})
clear_slides2(1,function(){
twonub2.click(advance2_2)
twonub3.click(final_click2)
// cover stuff
var cover=mobile2.rect(0,0,1045,700*wide).attr({'pointer-events':'visibleFill',fill:'none','cover':'none',cursor:'pointer'})
cover.click(advance2_2)
mobile2.append(twonub1)
mobile2.append(twonub2)
mobile2.append(twonub3)
// slide 1 text
var i2slide1_1=mobile2.text(522.5,345*wide,["The colors on this graph show whether workers are more or less","likely to move up and down the earnings distribution in recent years."]).attr({'font-family':'Lato','font-size':30,'text-anchor':'middle',firstslide:'none','pointer-events':'none'})
i2slide1_1.selectAll("tspan:not(:first-child)").attr({x:i2slide1_1.attr('x'),dy:30})
},immediate)
}
function advance2_2(){
// nub stuff
twonub2.attr({'fill-opacity':1,fill:'#b7dfd1'})
twonub1.attr({'fill-opacity':.4,fill:'white'})
twonub3.attr({'fill-opacity':.4,fill:'white'})
// get rid of firstslide
clear_slides2(1,function(){
twonub1.click(start_slides2)
twonub3.click(final_click2)
// cover stuff
var cover=mobile2.rect(0,0,1045,700*wide).attr({'pointer-events':'visibleFill',fill:'none','cover':'none',cursor:'pointer'})
cover.click(final_click2)
mobile2.append(twonub1)
mobile2.append(twonub2)
mobile2.append(twonub3)
// animate new text
mobile2.rect(431-(wide-1)*0,118+(wide-1)*200,27,28).attr({fill:'black',secondslide:'none','pointer-events':'none'})
var slide2_1=mobile2.text(950,140*wide+(wide-1)*60,["1 ","\u00A0Orange blocks, seen mostly above workers' starting","earnings bracket, indicate that workers are less likely to","move up the earnings ladder in recent years."]).attr({opacity:0,'font-family':'Lato','font-size':22,'text-anchor':'end',cursor:'pointer',secondslide:'none','pointer-events':'none'})
slide2_1.selectAll("tspan:nth-child(3)").attr({x:slide2_1.attr('x'),dy:25})
slide2_1.selectAll("tspan:nth-child(4)").attr({x:slide2_1.attr('x'),dy:25})
slide2_1.selectAll("tspan:nth-child(1)").attr({fill:'white'})
slide2_1.animate({opacity:1},800)
// slide2_1.node.setAttributeNS("http://www.w3.org/XML/1998/namespace", "xml:space", "preserve")
mobile2.rect(43,518+(wide-1)*600,27,28).attr({fill:'black',secondslide:'none','pointer-events':'none'})
var slide2_2=mobile2.text(50,540*wide+(wide-1)*60,["2 "," \u00A0Green blocks, seen mostly below workers' starting","earnings bracket, indicate that workers are more likely to","fall down the earnings ladder in recent years."]).attr({opacity:0,'font-family':'Lato','font-size':22,'text-anchor':'start',cursor:'pointer',secondslide:'none','pointer-events':'none'})
slide2_2.selectAll("tspan:nth-child(3)").attr({x:slide2_2.attr('x'),dy:25})
slide2_2.selectAll("tspan:nth-child(4)").attr({x:slide2_2.attr('x'),dy:25})
slide2_2.selectAll("tspan:nth-child(1)").attr({fill:'white'})
slide2_2.animate({opacity:1},800)
// slide2_2.node.setAttributeNS("http://www.w3.org/XML/1998/namespace", "xml:space", "preserve")
mobile2.rect(814-(wide-1)*0,564+(wide-1)*570,23,25).attr({fill:'black',secondslide:'none','pointer-events':'none'})
mobile2.rect(855,365*wide,95,197*wide).attr({fill:'none',stroke:'black',secondslide:'none'})
var except=mobile2.text(903,583+(wide-1)*570,['3 ',' \u00A0Except for the very','highest earners.']).attr({opacity:0,'font-family':'Lato','font-size':18,'text-anchor':'middle',cursor:'pointer',secondslide:'none','pointer-events':'none'})
except.selectAll("tspan:nth-child(3)").attr({x:except.attr('x'),dy:20})
except.selectAll("tspan:nth-child(1)").attr({fill:'white'})
except.animate({opacity:1},800)
// except.node.setAttributeNS("http://www.w3.org/XML/1998/namespace", "xml:space", "preserve")
mobile2.selectAll('rect[starting="1"][ending="1"]').animate({opacity:1},800)
mobile2.selectAll('rect[starting="2"][ending="2"]').animate({opacity:1},800)
mobile2.selectAll('rect[starting="3"][ending="3"]').animate({opacity:1},800)
mobile2.selectAll('rect[starting="4"][ending="4"]').animate({opacity:1},800)
mobile2.selectAll('rect[starting="5"][ending="5"]').animate({opacity:1},800)
mobile2.selectAll('rect[starting="6"][ending="6"]').animate({opacity:1},800)
mobile2.selectAll('rect[starting="7"][ending="7"]').animate({opacity:1},800)
mobile2.selectAll('rect[starting="8"][ending="8"]').animate({opacity:1},800)
mobile2.selectAll('rect[starting="9"][ending="9"]').animate({opacity:1},800)
mobile2.selectAll('rect[starting="10"][ending="10"]').animate({opacity:1},800)
})
}
function final_click2(){
clear_slides2(0,function(){
twonub1.click(start_slides2)
twonub2.click(advance2_2)
})
mobile2.selectAll('[graphfade]').animate({opacity:0},400)
// nub stuff
twonub1.attr({'fill-opacity':.4,fill:'white'})
twonub2.attr({'fill-opacity':.4,fill:'white'})
twonub3.attr({'fill-opacity':1,fill:'#b7dfd1'})
setTimeout(function(){
mobile2.selectAll('rect[starting][ending]').forEach(function(step,i){
step.stop()
step.animate({opacity:.7},400)
step.animate({y:step.attr('basey')},400)
})
},1600)
mobile2.selectAll('line').animate({opacity:1},800)
mobile2.selectAll('[labeltext]').animate({opacity:1},800)
mobile2.selectAll('rect[starting="1"][ending="1"]').animate({opacity:1},800)
mobile2.selectAll('rect[starting="2"][ending="2"]').animate({opacity:1},800)
mobile2.selectAll('rect[starting="3"][ending="3"]').animate({opacity:1},800)
mobile2.selectAll('rect[starting="4"][ending="4"]').animate({opacity:1},800)
mobile2.selectAll('rect[starting="5"][ending="5"]').animate({opacity:1},800)
mobile2.selectAll('rect[starting="6"][ending="6"]').animate({opacity:1},800)
mobile2.selectAll('rect[starting="7"][ending="7"]').animate({opacity:1},800)
mobile2.selectAll('rect[starting="8"][ending="8"]').animate({opacity:1},800)
mobile2.selectAll('rect[starting="9"][ending="9"]').animate({opacity:1},800)
mobile2.selectAll('rect[starting="10"][ending="10"]').animate({opacity:1},800,function(){
var final=mobile2.text(522.5,310*wide+(wide-1)*20,"Try hovering over or touching a rectangle").attr({'font-family':'Lato','font-size':30,'text-anchor':'middle',firstslide:'none',opacity:0,'pointer-events':'none'})
final.animate({opacity:1},800,function(){
setTimeout(function(){
final.animate({opacity:0},800)
},1000)
})
})
}
function draw_base2(){
var arrow = mobile2.path('M0,0 L0,4 L6,2 L0,0').attr({fill:'#ccc'})
var arrow2 = mobile2.path('M6,0 L6,4 L0,2 L6,0').attr({fill:'#ccc'})
var amarker = arrow.marker(0,0,6,4,0,2).attr({});
var amarker2 = arrow2.marker(0,0,6,4,6,2).attr({});
var rich_end = mobile2.text(width2+4,128*wide+(wide-1)*-10,['Richer after','15 years']).attr({'font-family':'Lato','text-anchor':'start','labeltext':'none'})
rich_end.selectAll("tspan:not(:first-child)").attr({x:rich_end.attr('x'),dy:15})
var poor_end = mobile2.text(width2+4,568*wide-(wide-1)*-15,['Poorer after','15 years']).attr({'font-family':'Lato','text-anchor':'start','labeltext':'none'})
poor_end.selectAll("tspan:not(:first-child)").attr({x:poor_end.attr('x'),dy:15})
var stay_same = mobile2.text(width2+4,348*wide,['No change','in earnings']).attr({'font-family':'Lato','text-anchor':'start','labeltext':'none'})
stay_same.selectAll("tspan:not(:first-child)").attr({x:parseFloat(stay_same.attr('x')),dy:15})
// grid lines
var percents=[10,20,30,40,50,60,70,80,90]
for (var i=0;i<percents.length;i++){
var size=size_rect2(0)*percents[i]/10
mobile2.line(left_margin2,wide*(335-size),left_margin2+width2,wide*(335-size)).attr({stroke:'#eee','stroke-width2':1,'shape-rendering':'crispEdges'})
if(i!=10){mobile2.line(left_margin2,wide*(365+size),left_margin2+width2,wide*(365+size)).attr({stroke:'#eee','stroke-width2':1,'shape-rendering':'crispEdges'})}
// mobile2.text(left_margin2+width2+4,-(wide-1)*4+wide*(4+335-size),percents[i]+'%').attr({'font-family':'Lato',fill:'#aaa','font-size':13})
// if(i!=6){mobile2.text(left_margin2+width2+4,-(wide-1)*4+wide*(4+365+size),percents[i]+'%').attr({'font-family':'Lato',fill:'#aaa','font-size':13})}
}
// key
var xstart=400
var ystart=60
mobile2.rect(xstart,ystart,20,20).attr({fill:neg_colors[3]})
mobile2.rect(xstart+22,ystart,20,20).attr({fill:neg_colors[2]})
mobile2.rect(xstart+44,ystart,20,20).attr({fill:neg_colors[1]})
mobile2.rect(xstart+66,ystart,20,20).attr({fill:neg_colors[0]})
mobile2.rect(xstart+88,ystart,20,20).attr({fill:pos_colors[0]})
mobile2.rect(xstart+110,ystart,20,20).attr({fill:pos_colors[1]})
mobile2.rect(xstart+132,ystart,20,20).attr({fill:pos_colors[2]})
mobile2.rect(xstart+154,ystart,20,20).attr({fill:pos_colors[3]})
var lefttext=mobile2.text(xstart-6,ystart+7,['Outcome has become','less likely in recent years']).attr({'font-family':'Lato','text-anchor':'end'})
var righttext=mobile2.text(xstart+180,ystart+7,['Outcome has become','more likely in recent years']).attr({'font-family':'Lato','text-anchor':'start'})
lefttext.selectAll("tspan:not(:first-child)").attr({x:parseFloat(lefttext.attr('x')),dy:15})
righttext.selectAll("tspan:not(:first-child)").attr({x:parseFloat(righttext.attr('x')),dy:15})
// income bin labels
var gap=0
var total=width2-left_margin2-10*gap
var bin_width2=total/10
// mobile2.line(left_margin2+1,120*wide,left_margin2+1,660*wide).attr({stroke:'#888',opacity:.5,'stroke-dasharray':[4,4]})
mobile2.line(left_margin2+bin_width2,120*wide,left_margin2+bin_width2,660*wide).attr({stroke:'#888',opacity:.5,'stroke-dasharray':[4,4]})
mobile2.line(left_margin2+9*bin_width2,120*wide,left_margin2+9*bin_width2,660*wide).attr({stroke:'#888',opacity:.5,'stroke-dasharray':[4,4]})
// mobile2.line(left_margin2+10*bin_width2,120,left_margin2+10*bin_width2,660).attr({stroke:'#888',opacity:.5,'stroke-dasharray':[4,4]})
mobile2.line(left_margin2+4*bin_width2,120*wide,left_margin2+4*bin_width2,660*wide).attr({stroke:'#888',opacity:.5,'stroke-dasharray':[4,4]})
mobile2.line(left_margin2+6*bin_width2,120*wide,left_margin2+6*bin_width2,660*wide).attr({stroke:'#888',opacity:.5,'stroke-dasharray':[4,4]})
var low=mobile2.text(bin_width2/2,640*wide,['Lowest','Earners']).attr({'font-family':'Lato',fill:'#888','text-anchor':'middle','font-size':12+(wide-1)*6})
low.selectAll("tspan:not(:first-child)").attr({x:low.attr('x'),dy:14+(wide-1)*6})
var mid=mobile2.text(5*bin_width2,640*wide,['Middle 20%','of Earners']).attr({'font-family':'Lato',fill:'#888','text-anchor':'middle','font-size':12+(wide-1)*6})
mid.selectAll("tspan:not(:first-child)").attr({x:mid.attr('x'),dy:14+(wide-1)*6})
var high=mobile2.text(9.5*bin_width2,640*wide,['Highest','Earners']).attr({'font-family':'Lato',fill:'#888','text-anchor':'middle','font-size':12+(wide-1)*6})
high.selectAll("tspan:not(:first-child)").attr({x:high.attr('x'),dy:14+(wide-1)*6})
// static slide navigation
var holder=mobile2.rect(5,wide*42,80,50).attr({cursor:'pointer','pointer-events':'visibleFill',fill:'#e2f2ed',stroke:'#67c2a5','shape-rendering':'crispEdges','stroke-width2':1,'graphfade':'none'})
var pointer=mobile2.path('M13.1244203,0 L13.1244203,4 L14.1244203,4 L14.1244203,0 L13.1244203,0 L13.1244203,0 Z M19.5269278,2.57686389 L16.418344,5.09414546 L17.0476644,5.87129142 L20.1562482,3.35400985 L19.5269278,2.57686389 L19.5269278,2.57686389 Z M21.5318564,9.3124234 L17.6343761,8.41261918 L17.4094251,9.38698925 L21.3069053,10.2867935 L21.5318564,9.3124234 L21.5318564,9.3124234 Z M5.94193535,10.2867935 L9.83941561,9.38698925 L9.61446455,8.41261918 L5.71698429,9.3124234 L5.94193535,10.2867935 L5.94193535,10.2867935 Z M7.09259245,3.35400985 L10.2011763,5.87129142 L10.8304967,5.09414546 L7.72191284,2.57686389 L7.09259245,3.35400985 L7.09259245,3.35400985 Z M19.6231595,30.9999999 C23.7659915,31 27.1244203,27.4147752 27.1244203,23.5 C27.1244203,23.5 27.1244203,25.8132437 27.1244203,23.5 L27.1244203,19.7491622 L27.1244203,17.5016756 C27.1244203,16.6723231 26.4586231,16 25.6244203,16 C24.7959932,16 24.1244203,16.6711894 24.1244203,17.5016756 L24.1244203,18 L23.1244203,18 L23.1244203,15.5064385 C23.1244203,14.6744555 22.4586231,14 21.6244203,14 C20.7959932,14 20.1244203,14.6715406 20.1244203,15.5064385 L20.1244203,17 L19.1244203,17 L19.1244203,14.5064385 C19.1244203,13.6744555 18.4586231,13 17.6244203,13 C16.7959932,13 16.1244203,13.6715406 16.1244203,14.5064385 L16.1244203,18 L15.1244203,18 L15.1244203,7.50524116 C15.1244203,6.67391942 14.4586231,6 13.6244203,6 C12.7959932,6 12.1244203,6.66712976 12.1244203,7.50524116 L12.1244203,18.7999878 C10.0660207,16.599567 7.35605012,14.1791206 6.24545305,15.2957153 C5.15828327,16.3887562 7.95978233,19.4007216 11.8717958,25.9830936 C13.6344162,28.9488875 15.8647052,30.9995418 19.6231595,30.9999999 L19.6231595,30.9999999 Z M28.1244203,23.5 C28.1244203,28.1944206 24.3188409,32 19.6244203,32.0000003 C16.5115051,32.0000003 13.2262274,30.5474856 10.9652407,26.4282229 C7.70175208,20.4825159 3.52827319,16.5832077 5.51553361,14.5959473 C6.9371827,13.1742982 9.16926196,14.5381668 11.1244203,16.3667868 L11.1244203,16.3667868 L11.1244203,7.50840855 C11.1244203,6.11541748 12.2437085,5 13.6244203,5 C15.0147583,5 16.1244203,6.12305276 16.1244203,7.50840855 L16.1244203,12.4983653 C16.5422506,12.1853054 17.0616174,12 17.6244203,12 C18.7069384,12 19.6193054,12.6774672 19.9702378,13.6281239 C20.4110134,13.2379894 20.9901312,13 21.6244203,13 C23.0147583,13 24.1244203,14.1182256 24.1244203,15.4976267 L24.1244203,15.5110883 C24.5422506,15.1985158 25.0616174,15.014191 25.6244203,15.014191 C27.0147583,15.014191 28.1244203,16.1335355 28.1244203,17.5143168 L28.1244203,23.5 L28.1244203,23.5 Z').attr({cursor:'pointer','graphfade':'none'})
pointer.transform('t48,'+(wide*52-(wide-1)*12))
twonub1=mobile2.circle(18,wide*69-(wide-1)*29,4,4).attr({fill:'#B7dfd1',stroke:'#67c2a5',cursor:'pointer','nub':'none'})
twonub2=mobile2.circle(29,wide*69-(wide-1)*29,4,4).attr({fill:'white',stroke:'#67c2a5','fill-opacity':.4,cursor:'pointer','nub':'none'})
twonub3=mobile2.circle(40,wide*69-(wide-1)*29,4,4).attr({fill:'white',stroke:'#67c2a5','fill-opacity':.4,cursor:'pointer','nub':'none'})
twonub1.click(start_slides2)
twonub2.click(advance2_2)
twonub3.click(final_click2)
var guideline = mobile2.line(width2-1,wide*110,width2-1,wide*590).attr({'guideline':'none','stroke-width2':1,'stroke':'#ccc','shape-rendering':'crispEdges','marker-end':amarker,'marker-start':amarker2})
}
function switch_graph2(){
var e = document.getElementById("demo_select2")
var newtype = e.options[e.selectedIndex].value
type2=newtype
var matrix=data2[type2]['differences']
reduce_block2(selectbin2,function(){
for(var i=1;i<11;i++){
// redo below-the-base boxes
var below_start=365*wide
for(var j=i-1;j>0;j--){
var temp=mobile2.select("rect[starting='"+i+"'][ending='"+j+"']")
var value=matrix[i][j-1]
temp.animate({fill:choose_color(value)},800)
}
// redo above-the-base boxes
var above_start=335*wide
for(var j=i+1;j<11;j++){
var temp=mobile2.select("rect[starting='"+i+"'][ending='"+j+"']")
var value=matrix[i][j-1]
temp.animate({fill:choose_color(value)},800)
}
// redo the strip
var temp=mobile2.select("text[starting='"+(i)+"'][ending='"+(i)+"']")
temp.attr({'text':matrix[i][i-1].toFixed()+'%'})
}
})
}
function draw_graph2(matrix){
// 0 to 1000, 10 pixel gutter on left side, 1 pixel margins between
var gap=0
var total=width2-left_margin2-10*gap
var bin_width2=total/10
var midg=mobile2.gradient("l(0,0,0,1)#67c2a5-#fc8d62")
for(var i=1;i<11;i++){
// i is the starting percentile bucket
rect_top=0
for(var j=0;j<10;j++){
// j is the ending percentile bucket (starts at 0 because this is just an indexed array)
// draw all rectangles starting at bottom and working up
// then shift all rectangle up so that the i-1 rectangle is centered around 350
var size=size_rect2(matrix[i][j])*wide
// get appropriate fill
if(i==j+1){
var stroke='white'
var fill=choose_color(matrix[i][j])
var opacity=1
var size=30*wide
} else if(i<j+1){
var stroke='white'
var fill=choose_color(matrix[i][j])
var opacity=.7
} else{
var stroke='white'
var fill=choose_color(matrix[i][j])
var opacity=.7
}
if(j!=0){rect_top=rect_top-size}
var base_bin=mobile2.rect(left_margin2+bin_width2*(i-1)+gap*(i-1),rect_top,bin_width2,size).attr({stroke:stroke,'stroke-width2':1,value:matrix[i][j],basex:left_margin2+bin_width2*(i-1)+gap*(i-1),fill:fill,'shape-rendering':'crispEdges',starting:i,ending:j+1,opacity:opacity})
base_bin.hover(expand_block2)
if(i==j+1){
var text_overlay=mobile2.text(bin_width2/2+left_margin2+bin_width2*(i-1)+gap*(i-1),rect_top+34*wide,matrix[i][j].toFixed()+'%').attr({'pointer-events':'none',fill:'white',starting:i,ending:j+1,'font-family':'Lato','text-anchor':'middle','font-size':14*wide})
}
}
// find x coord of the rect that has starting=i and ending=i
var base=mobile2.select("rect[starting='"+i+"'][ending='"+i+"']")
var coords=base.getBBox()
var offset=(350*wide)-(coords.y+coords.height/2)
mobile2.selectAll("[starting='"+i+"']").forEach(function(step,i){
var steploc=step.getBBox().y
step.attr({y:steploc+offset,basey:steploc+offset})
})
}
mobile2.append(mobile2.selectAll('[guideline]'))
}
function choose_color(value){
if(value<0){
if(value>-8){return neg_colors[0]}
if(value<=-8 && value>-16){return neg_colors[1]}
if(value<=-16 && value>-24){return neg_colors[2]}
if(value<=-24){return neg_colors[3]}
} else {
if(value<8){return pos_colors[0]}
if(value>=8 && value<16){return pos_colors[1]}
if(value>=16 && value<24){return pos_colors[2]}
if(value>=24){return pos_colors[3]}
}
}
function cursorPoint2(evt){
pt2.x=evt.clientX;pt2.y=evt.clientY
return pt2.matrixTransform(svgel2.getScreenCTM().inverse())
}
function show_value2(ev){
var temp=Snap(ev.target)
mobile2.selectAll('[hovervalue]').remove()
if(temp.attr('starting')==undefined){
} else if(ev.target.tagName=='rect'){
var value=parseFloat(temp.attr('value')).toFixed(1)
if(value<0){var typer='decline '}else{var typer='increase '}
var color=choose_color(value)
var change=parseInt(temp.attr('ending'))-parseInt(temp.attr('starting'))
if(change>0){var ttext='rising'}else{var ttext='falling'}
var loc=cursorPoint2(ev)
var x=loc['x']
var y=loc['y']
if(x>850){
x=x-190
}
if(change==1){var dec='decile'}else{var dec='deciles'}
mobile2.rect(x+20,y-32,160,57).attr({'pointer-events':'none',fill:'white',stroke:'black','stroke-width2':1,'shape-rendering':'crispEdges','hovervalue':'none'})
mobile2.text(x+100,y-10,value+'%').attr({'pointer-events':'none','hovervalue':'none','font-family':'Lato','font-weight':700,'font-size':'18px','text-anchor':'middle',fill:color})
mobile2.text(x+100,y+4,'change in the probability').attr({'pointer-events':'none','hovervalue':'none','font-family':'Lato','font-size':'13px','text-anchor':'middle'})
if(change!==0){
mobile2.text(x+100,y+16,'of '+ttext+' '+Math.abs(change)+' earnings '+dec).attr({'pointer-events':'none','hovervalue':'none','font-family':'Lato','font-size':'13px','text-anchor':'middle'})
} else {
mobile2.text(x+100,y+16,'of no earnings change').attr({'pointer-events':'none','hovervalue':'none','font-family':'Lato','font-size':'13px','text-anchor':'middle'})
}
}
}
function size_rect2(value){
return 22
}
function expand_block2(ev){
var temp=Snap(ev.target)
var bin=temp.attr('starting')
if(bin!=selectbin2){
reduce_block2(selectbin2)
selectbin2=bin
// manipulate blocks
mobile2.selectAll("[starting='"+bin+"'][ending]").forEach(function(step,i){
if(parseInt(step.attr('starting'))!=parseInt(step.attr('ending'))){
step.animate({opacity:1},400)
if(parseInt(step.attr('starting'))<parseInt(step.attr('ending'))){
var step_pos=step.attr('ending')-step.attr('starting')
step.animate({y:parseFloat(step.attr('basey'))-5*step_pos},200,mina.easeinout,function(){step.animate({y:parseFloat(step.attr('basey'))},200,mina.easeinout)})
} else if(parseInt(step.attr('starting'))>parseInt(step.attr('ending'))){
var step_pos=step.attr('starting')-step.attr('ending')
step.animate({y:parseFloat(step.attr('basey'))+5*step_pos},200,mina.easeinout,function(){step.animate({y:parseFloat(step.attr('basey'))},200,mina.easeinout)})
}
}
})
}
}
function reduce_block2(bin,callback){
if(selectbin2==bin){
mobile2.selectAll("[starting='"+bin+"'][ending]").forEach(function(step,i){
if(parseInt(step.attr('starting'))!=parseInt(step.attr('ending'))){
step.stop()
step.animate({opacity:.7},300)
if(parseInt(step.attr('starting'))<parseInt(step.attr('ending'))){
step.animate({y:parseFloat(step.attr('basey'))},200,mina.easeinout)
} else if(parseInt(step.attr('starting'))>parseInt(step.attr('ending'))){
step.animate({y:parseFloat(step.attr('basey'))},200,mina.easeinout)
}
}
})
mobile2.selectAll("[starting='"+bin+"'][texttype]").forEach(function(word,i){
word.stop()
word.animate({opacity:0},100,function(){word.remove()})
})
mobile2.selectAll("[starting='"+bin+"'][texttype]").animate({opacity:0},100)
mobile2.selectAll("[starting='"+bin+"'][type='temprect']").forEach(function(rect,i){
// rect.stop()
rect.animate({opacity:0},100,function(){rect.remove()})
})
}
if(callback){
selectbin2=undefined
callback()
}
}
</script>