-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathcost.html
462 lines (400 loc) · 27.3 KB
/
cost.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
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-4964NB1NTF"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-4964NB1NTF');
</script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="MIT Civic Data Design Lab: Alberto Meouchi, Ashley Louie, Niko McGlashan">
<title>Cost</title>
<link rel="stylesheet" type="text/css" href="./css/bootstrap.min.css">
<link rel="stylesheet" href="https://use.typekit.net/eqc7jzl.css">
<!-- CAVEAT FONT REGULAR 400 and 600 SEMIBOLD-->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Caveat:wght@400;600&display=swap" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="./css/style.css">
<!-- <link rel="stylesheet" type="text/css" href="./css/motivations.css"> -->
<script type="text/javascript" src="./js/jquery-3.6.0.min.js"></script>
<!-- <script type="text/javascript" src="./js/d3.v7.min.js"></script> -->
<script src="//d3js.org/d3.v4.min.js"></script>
<!-- BUBBLE CHART CSS -->
<link rel="stylesheet" href="css/bubble_chart.css">
<script type="text/javascript" src="./js/tooltip.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/ScrollMagic.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/plugins/debug.addIndicators.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3-annotation/2.5.1/d3-annotation.min.js"
integrity="sha512-iBAeBWWWFb8HqSBcrqcz98iIpuVH1la39dEYHtyQ/pGpeCQTQVvLJOWAuhv2Q7JSHp9k7hWA7sGxU3hHJe+tFg=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</head>
<body>
<div id="mobile-button">
<div id="hamburger-menu" onclick="toggleMenu(this)">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
<div class="mobile-menu" id="mobile-menu">
<h1 onclick='redirect_Page(this,"origins.html")'>ORIGINS</h1>
<h1 onclick='redirect_Page(this,"motivations.html")'>MOTIVATIONS</h1>
<h1 onclick='redirect_Page(this,"profiles.html")'>PROFILES</h1>
<h1 onclick='redirect_Page(this,"outcomes.html")'>OUTCOMES</h1>
<h1 onclick='redirect_Page(this,"cost.html")'>COST</h1>
<h1 onclick='redirect_Page(this,"about.html")'>ABOUT</h1>
</div>
</div>
<div id="wrapper">
<section class='chapter' id="closed">
<div class="bk origins-img" onclick='redirect_Page(this,"origins.html")'>
<div class="gradient origins-g">
<h2 class="chapter-title" onclick='redirect_Page(this,"index")'>VIOLENCE, CLIMATE,<br>FOOD INSECURITY,<br>AND POLICY<br>HISTORICALLY DRIVE EMIGRATION</h2>
<!--<h1 class="chapter-summary">ORIGINS</h1>-->
</div>
</div>
<div class="chapter-prompt position-fixed p-3">
<span class="text-uppercase">CLICK HERE TO LEARN MORE</span>
</div>
</section>
<section class='chapter' id="closed">
<div class="bk motivations-img" onclick='redirect_Page(this,"motivations.html")'>
<div class="gradient motivations-g">
<h2 class="chapter-title">FINANCIAL<br>INSECURITY<br>DRIVES<br>MIGRATION</h2>
<!--<h1 class="chapter-summary">MOTIVATIONS</h1>-->
</div>
</div>
<div class="chapter-prompt position-fixed p-3">
<span class="text-uppercase">CLICK HERE TO LEARN MORE</span>
</div>
</section>
<section class='chapter' id="closed">
<div class="bk profiles-img" onclick='redirect_Page(this,"profiles.html")'>
<div class="gradient profiles-g">
<h2 class="chapter-title" onclick='redirect_Page(this,"index")'>HALF OF MIGRANTS<br>WORK IN THE<br>SAME OCCUPATION<br>AFTER RELOCATION</h2>
<!-- <h1 class="chapter-summary">PROFILES
</h1>-->
</div>
</div>
<div class="chapter-prompt position-fixed p-3">
<span class="text-uppercase">CLICK HERE TO LEARN MORE</span>
</div>
</section>
<section class='chapter' id="closed">
<div class="bk outcomes-img" onclick='redirect_Page(this,"outcomes.html")'>
<div class="gradient outcomes-g">
<h2 class="chapter-title" onclick='redirect_Page(this,"index")'>ONLY 57%<br>OF MIGRANTS<br>RESIDE IN THEIR<br>INTENDED<br>DESTINATION</h2>
<!--<h1 class="chapter-summary">OUTCOMES</h1>-->
</div>
</div>
<div class="chapter-prompt position-fixed p-3">
<span class="text-uppercase">CLICK HERE TO LEARN MORE</span>
</div>
</section>
<section class='chapter' id="open">
<div id="shortcutlan" class="position-fixed p-4" style="top: 90vh;font-size: 1.4rem;font-weight: 700;">
<a href="cost.html"><span class="text-uppercase text-white"><u>ENGLISH</u></span></a><span class="text-uppercase text-white"> | </span><a href="es_costos.html"><span class="text-uppercase text-white">ESPAÑOL</span></a>
</div>
<div id="shortcutscr-container" class="position-fixed p-3">
<div id="shortcutscr" class="text-white" >
<span class="ps-2 text-uppercase">Scroll Down to Learn More</span>
</div>
</div>
<div id="shortcut" class="position-sticky p-3">
<a class="text-white" href="#">
<i id="arrow-jump" class="arrow"></i>
<span class="ps-2 text-uppercase">Skip to visualization</span>
</a>
</div>
<div class="bk cost-img" onclick='redirect_Page(this,"cost.html")'>
<div class="gradient cost-g">
<h2 class="chapter-title" onclick='redirect_Page(this,"index")'>MIGRATION<br>COSTS<br>ADD TO<br>FINANCIAL<br>BURDEN</h2>
<!--<h1 class="chapter-summary">COST</h1>-->
</div>
</div>
<div class="content-block">
<div class="container-lg position-sticky">
<div class="row vh-100 px-lg-5 align-items-center">
<div id="viz-col" class="col mb-5">
<!-- frame for d3 visualization -->
<div id="frame-cost" class="frame-cost"></div>
<!-- div for buttons -->
<div id="toolbar" class="row position-relative mt-3 mt-md-5 mt-md-3 mt-lg-5 mb-md-5 mb-lg-0 px-2">
<div class="col-3 px-0">
<button type="button" id="all" class="button btn btn-sm text-uppercase text-blue"
data-bs-toggle="modal" data-bs-target="#modal-motivs">Group Items</button>
</span>
</div>
<div class="col-3 px-0">
<button type="button" id="year" class="button btn btn-sm text-uppercase text-blue">Split
by Migration Pathways</button>
</span>
</div>
<div class="col-3 px-0">
<button type="button" id="country" class="button btn btn-sm text-uppercase text-blue">Split
by Country of
Origin</button>
</span>
</div>
<div class="col-3 px-0">
<button type="bee" id="bee" class="button active btn btn-sm text-uppercase text-blue">Estimated
Time to pay Debt</button>
</span>
</div>
</div>
<!-- tooltip template -->
<div class="tooltip mb-5 mb-md-0 template">
<div class="side-color"></div>
<div class="row mb-1">
<div class="col-7">
<p class="text-label-onemigrant">ONE MIGRANT</p>
<p>From <span class="label-country text-label">El Salvador</span> Spent</p>
</div>
<div class="col-5">
<h3 class="label-cost text-color">$8,500</h3>
</div>
</div>
<h3 class="label-pathway text-color">Irregular Pathway on One's Own or with a Caravan</h3>
</div>
</div><!-- close col -->
</div><!-- close row -->
</div><!-- close container -->
</div>
<div class="content-block">
<section class="scenes 1">
<div class="step1 fully active">
<div class="scrolly-container-cost">
<div class="scrollytelling-text">
<h2 class="scrollytelling">Migrants Spent $2.2 Billion</h2>
<h3 class="scrollytelling description"> to migrate from Central America to the United States in the last year.</h3>
</div>
<div class="forceLink0"><span></span></div>
<div class="forceLink00"><span></span></div>
</div>
</div>
</section>
<div class="col-1 vh-100"></div>
<section class="scenes 10">
<div class="step lefty active">
<div class="scrolly-container-cost">
<div class="scrollytelling-text" style="background-color:#adb5bde0">
<!-- <h2 class="scrollytelling">Migrants Spent $2.2 Billion</h2> -->
<!--
<h3 class="scrollytelling description ">Each circle represents <u>one migrant</u> traveling to the U.S. from El Salvador, Guatemala, or Honduras and the<u> total amount they spent to migrate.</u> The colors distinguish the <u>migration pathway</u> used for their journey: <span style="color:#e23cad"><b>Regular Pathway,</b></span> <span style="color:#662d91"><b>Irregular with a Smuggler,</b></span><span style="color:#faa41a"><b> Irregular on their Own or with a Caravan.</b></span> Empty circles signify that no cost was reported through the survey.</h3>
-->
<div class="row mb-1">
<!-- <div class="col-7"> -->
<h3 class="scrollytelling">Each circle represents <u>One Migrant</u> traveling to the U.S. from El Salvador, Guatemala, or Honduras.</h3>
<!--
<div class="row mb-1">
<h3 class="scrollytelling description">The size of the circle shows the <u>total amount</u> spent by the Migrant to finance the journey.</h3>
<div class="col-7">
<h3 class="scrollytelling description" style="font-size:1em;"><b style="font-weight:600">Higher</b> Cost to Migrate</h3>
<h3 class="scrollytelling description" style="font-size:1em;"><b style="font-weight:600">Lower</b> Cost</b> to Migrate</h3>
<h3 class="scrollytelling description" style="font-size:1em;"><b style="font-weight:600">N.A.</b></h3>
</div>
<div class="col-2">
<div> <svg height="30" width="30" style="margin-top: .6em;"><circle cx="15" cy="15" r="15" fill="#662d91" /></svg></div>
<div> <svg height="25" width="25" style="margin-top: .2em;"><circle cx="15" cy="15" r="7" fill="#662d91" /></svg><div>
<div> <svg height="25" width="25" style="margin-top: .3em;"><circle cx="15" cy="15" r="2.5" stroke="#662d91" stroke-width="1" fill="#fff" /></svg><div>
</div>
-->
<!--
</div>
-->
<!-- </div> -->
<!-- </div> -->
</div>
<div class="row mb-1">
<h3 class="scrollytelling description" style="margin-top: .5em;">The colors distinguish the <u>migration pathway</u> used for each migrant's journey.</h3>
<div class="col-2 align-items-center">
<div> <svg height="34" width="50" style="margin-top: .6em;"><ellipse cx="25" cy="17" rx="15" ry="15" fill="#e23cad" stroke-width="1.4" stroke="#fff"></svg></div>
<div> <svg height="34" width="50" style="margin-top: .6em;"><ellipse cx="25" cy="17" rx="15" ry="15" fill="#662d91" stroke-width="1.4" stroke="#fff"></svg></div>
<div> <svg height="34" width="50" style="margin-top: .67em;"><ellipse cx="25" cy="17" rx="15" ry="15" fill="#faa41a" stroke-width="1.4" stroke="#fff"></svg></div>
</div>
<div class="col-10">
<h3 class="scrollytelling description" style="font-size:1.3em;margin-top:.8em;"><span style=" color:#fff"><b style="font-weight:600">Regular Pathway</b></span></h3>
<h3 class="scrollytelling description" style="font-size:1.3em;margin-top:1.2em;"><span style="color:#fff"><b style="font-weight:600">Irregular with a Smuggler</b></span></h3>
<h3 class="scrollytelling description" style="font-size:1.3em; margin-top: 1em;line-height: 1.2em;"><span style="color:#fff"><b style="font-weight:600"> Irregular on One's Own or with a Caravan</b></span></h3>
</div>
</div>
</div>
<div class="forceLink1"><span></span></div>
<div class="forceLinka"><span></span></div>
</div>
</div>
</section>
<div class="col-1 vh-100"></div>
<section class="scenes 2">
<div class="step fully active">
<div class="scrolly-container-cost">
<div class="ribbon-image">
<img src="./img/cost/cos1.jpg">
</div>
<div class="scrollytelling-caption">
<h2 class="scrollytelling">U.S. Department of Homeland Security Spent $2.9 Billion</h2>
<h3 class="scrollytelling description">in 2018 on apprehending Salvadorans, Guatemalans, and Hondurans at the Southwest Border.*</h3>
<p class="scrollytelling new-footer">* National Immigration Forum. "Border Security Along the Southwest Border: Fact Sheet. March 11, 2019. <a class="text-white" href="https://immigrationforum.org/article/border-security-along-the-southwest-border-fact-sheet/" target="_blank">[external reference]</a></p>
<div class="forceLink2"><span></span></div>
<div class="forceLinkb"><span></span></div>
</div>
</div>
<!-- </section> -->
<div class="col-1 vh-100">
<div class="forceLink3"><span></span></div>
<div class="forceLinkc"><span></span></div>
</div>
<div class="col-1 vh-100">
<div class="forceLink4"><span></span></div>
<div class="forceLinkd"><span></span></div>
</div>
<section class="scenes 3">
<div class="step1 fully active">
<div class="scrolly-container-cost">
<div class="ribbon-image">
<img src="./img/cost/cos2.jpg">
</div>
<div class="scrollytelling-caption">
<h2 class="scrollytelling">Migrants Spent as Much as Governments</h2>
<h3 class="scrollytelling description">Our study found that in 2020, migrants collectively spent close to what their governments spent on primary education to migrate.*</h3>
<p class="scrollytelling new-footer">* The World Bank. "Expenditure on primary education (% of government expenditure on education) - El Salvador, Guatemala, Honduras" UNESCO Institute of Statistics, Data as of February 2020. <a class="text-white" href="https://data.worldbank.org/indicator/SE.XPD.PRIM.ZS?locations=SV" target="_blank">[El Salvador external reference]</a> <a class="text-white" href="https://data.worldbank.org/indicator/SE.XPD.PRIM.ZS?locations=GT" target="_blank">[Guatemala external reference]</a> <a class="text-white" href="https://data.worldbank.org/indicator/SE.XPD.PRIM.ZS?locations=HN" target="_blank">[Honduras external reference]</a></p>
</div>
<div class="forceLink5"><span></span></div>
<div class="forceLinke"><span></span></div>
</div>
</div>
</section>
<div class="col-1 vh-100"> </div>
<div class="step fully active">
<div class="scrolly-container-cost">
<div class="ribbon-image">
<img src="./img/cost/cos3.jpg">
</div>
<div class="scrollytelling-caption">
<h2 class="scrollytelling">Irregular Migration Costs are High in Risk and Finances</h2>
<h3 class="scrollytelling description">Irregular channels, which include migration with the assistance of a smuggler and on one's own or with a caravan to made up 80% of the migration pathways to the U.S. from El Salvador, Guatemala, yet 89% of the cost based on survey respondents. These pathways are extremely dangerous and many do not make it to their intended destination.</h3>
</div>
<div class="forceLink6"><span></span></div>
<div class="forceLinkf"><span></span></div>
</div>
</div>
<div class="col-1 vh-100"> </div>
</section>
<div class="step lefty active">
<div class="scrolly-container-cost">
<div class="ribbon">
<div class="scrollytelling-text">
<h2 class="scrollytelling">Migration with a Smuggler is the Most Expensive</h2>
<h3 class="scrollytelling description">Estimates show that it costed migrants from Central America a total of $1.7 billion in 2020 to travel with a smuggler to the United States. Migrants use smugglers because they protect them on the trip, but often use narcotraffic routes and bribes to get migrants across the border.</h3>
</div>
<div class="forceLink7"><span></span></div>
<div class="forceLinkg"><span></span></div>
</div>
</div>
</div>
<div class="col-1 vh-100"> </div>
<div class="step lefty active">
<div class="scrolly-container-cost2">
<div class="ribbon-image">
<img src="./img/cost/cos4.jpg">
</div>
<div class="scrollytelling-caption">
<h2 class="scrollytelling">Migration on One's Own (Often with Caravans) Often Costs Less</h2>
<h3 class="scrollytelling description">Migrants who chose to travel irregularly on one's own (mostly from Honduras) spent less to migrate; travelling groups protects them along the journey. The average cost to migrate to the U.S. is $2,900 on one's own or with a caravan and is $7,500 with a smuggler.</h3>
</div>
<div class="forceLink8"><span></span></div>
<div class="forceLinkh"><span></span></div>
</div>
</div>
<div class="col-1 vh-100"> </div>
<div class="step righty active">
<div class="scrolly-container-cost3">
<div class="ribbon">
<div class="scrollytelling-text">
<h2 class="scrollytelling">Regular Migration Pathways Reduces Costs</h2>
<h3 class="scrollytelling description">1 in 5 (19%) migrants headed towards any destination used regular migration pathways, including tourist, student, and farm worker visas. This reduces cost for migrants, and also help to reduce enforcement costs.</h3>
</div>
</div>
</div>
</div>
<div class="col-1 vh-100"> </div>
<div class="step1 fully active">
<div class="scrolly-container-cost">
<div class="ribbon-image">
<img src="./img/cost/cos5.jpg">
</div>
<div class="scrollytelling-caption">
<h2 class="scrollytelling">Migrants Have Significant Debt</h2>
<h3 class="scrollytelling description">Migrants often receive assistance from family and friends, use personal savings and/or obtain bank or personal loans to afford the journey. Survey respondents from migrant households reported that 41% of recent migrants heading towards all destinations financed their trip with support from relatives and friends. An additional 19% paid for migration costs using their own savings, and 18% used loans from financial institutions.</h3>
</div>
</div>
</div>
<div class="col-1 vh-100">
<div class="forceLink9"><span></span></div>
<div class="forceLinki"><span></span></div>
</div>
<div class="col-1 vh-100">
<div class="forceLink10"><span></span></div>
<div class="forceLinkj"><span></span></div>
</div>
<div class="col-1 vh-100">
<div class="forceLink11"><span></span></div>
<div class="forceLinkk"><span></span></div>
</div>
<div id="last-scene" class="step1 fully active" style="padding-bottom: 90vh;">
<div class="scrolly-container-cost">
<div class="ribbon-image">
<img src="./img/cost/cos6.jpg">
</div>
<div class="scrollytelling-caption">
<h2 class="scrollytelling">Expand Legal Pathways for Central Americans Interested in Migrating to the United States</h2>
<h3 class="scrollytelling description">Coordinated efforts to increase access to temporary employment visas, for example, could help meet the overwhelming demand for employment opportunities abroad. Shifting even a fraction of irregular migration to regular channels would decrease the estimated $1.7 billion that Central Americans spend annually on irregular migration with a smuggler to the U.S. and instead increase state revenues—for instance, through reasonable application fees—which can then be invested in initiatives to address other drivers of irregular migration.</h3>
</div>
</div>
</div>
<div class="col-1 vh-90"> </div>
</section>
<section class='chapter' id="closed">
<div class="bk about-img" onclick='redirect_Page(this,"about.html")'>
<div class="gradient about-g">
<h2 class="chapter-title">CHARTING A NEW <br>REGIONAL COURSE <br>OF ACTION
<!--<h1 class="chapter-summary">ABOUT</h1>-->
</div>
</div>
<div class="chapter-prompt position-fixed p-3">
<span class="text-uppercase">CLICK HERE TO LEARN MORE</span>
</div>
</section>
</div>
<!-- narrative modal template -->
<div id="" class="modal modal-fullscreen modal-narrative template" tabindex="-1" role="dialog" aria-labelledby=""
aria-hidden="true">
<div class="modal-dialog modal-lg modal-dialog-centered">
<div class="modal-content">
<div class="modal-body display-6 text-uppercase">
<p>Motivations range from violence to climate, but the primary motivation for migration is </p>
<p class="display-1"><strong>economics</strong></p>
<p>to provide for basic needs</p>
</div>
</div>
</div>
</div>
<!-- <script src = './js/scroller.js'></script> -->
<script type="text/javascript" src="./js/chapterClick.js"></script>
<script type="text/javascript" src="./js/bubble_chart.js"></script>
<script type="text/javascript" src="./js/bootstrap.min.js"></script>
<script type="text/javascript" src="./js/script.js"></script>
<script type="text/javascript" src="./js/cost.js"></script>
<script>
// d3.xml("circular.svg").mimeType("image/svg+xml").get(function(error, xml) {
// if (error) throw error;
// document.body.appendChild(xml.documentElement);
// });
</script>
</body>
</html>