-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathes_motivaciones.html
339 lines (316 loc) · 27.8 KB
/
es_motivaciones.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
<!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: Ashley Louie & Niko McGlashan">
<title>Motivaciones</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-transition-svg.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 type="text/javascript" src="./js/ScrollMagic-2.0.7.min.js"></script>
<!-- MAPBOX & DECKGL -->
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v2.0.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v2.0.0/mapbox-gl.css' rel='stylesheet' />
<!-- MAPBOX CONFIG + SCROLLAMA -->
<script type="text/javascript" src="./js/scrollama-2.0.0.min.js"></script>
<script src="https://unpkg.com/intersection-observer@0.5.1/intersection-observer.js"></script>
<!-- DECK GL -->
<script src="https://unpkg.com/deck.gl@8.6.0/dist.min.js"></script>
<!-- SVG TRANSITION -->
<script type="text/javascript" src="./js/motivationsTransition.js"></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,"es_origenes.html")'>ORÍGENES</h1>
<h1 onclick='redirect_Page(this,"es_motivaciones.html")'>MOTIVACIONES</h1>
<h1 onclick='redirect_Page(this,"es_perfiles.html")'>PERFILES</h1>
<h1 onclick='redirect_Page(this,"es_concecuencias.html")'>CONCECUENCIAS</h1>
<h1 onclick='redirect_Page(this,"es_costos.html")'>COSTOS</h1>
<h1 onclick='redirect_Page(this,"es_acerca.html")'>ACERCA</h1>
</div>
</div>
<div id="wrapper">
<section class='chapter' id="closed">
<div class="bk origins-img" onclick='redirect_Page(this,"es_origenes.html")'>
<div class="gradient origins-g">
<h2 class="chapter-title">LA VIOLENCIA, EL CLIMA,<br>LA INSEGURIDAD ALIMENTARIA,<br>Y LAS POLÍTICAS PÚBLICAS<br>HAN IMPULSADO LA MIGRACIÓN HISTORICAMENTE</h2>
<!--<h1 class="chapter-summary">ORIGINS</h1>-->
</div>
</div>
<div class="chapter-prompt position-fixed p-3">
<span class="text-uppercase">HAGA CLIC AQUÍ PARA SABER MÁS</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="motivations.html"><span class="text-uppercase text-white">ENGLISH</span></a><span class="text-uppercase text-white"> | </span><a href="es_motivaciones.html"><span class="text-uppercase text-white"><u>ESPAÑOL</u></span></a>
</div>
<div id="shortcutscr-container" class="position-fixed p-3">
<div id="shortcutscr" class="text-white" >
<span class="ps-2 text-uppercase">Desplázate Hacia Abajo para Saber Más</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">Saltar a Visualización</span>
</a>
</div>
<div class="bk motivations-img">
<div class="gradient motivations-g">
<h2 class="chapter-title">LA INSEGURIDAD<br>FINANCIERA<br>IMPULSA<br>LA MIGRACIÓN</h2>
<!--<h1 class="chapter-summary">MOTIVATIONS</h1>-->
</div>
</div>
<div class="content-block position-relative">
<!-- <div id="map"></div> -->
<div class="step active fully pb-0">
<div id="map-state-1" class="scrolly-container-motivations pb-0">
<div class="ribbon-image">
<img src="./img/motivations/mot1.jpg">
</div>
<div class="scrollytelling-caption">
<h2 class="scrollytelling">Las Intenciones de Migrar han Aumentado Significativamente</h2>
<h3 class="scrollytelling description">Aproximadamente cuatro de cada diez hogares (43%) indicaron un deseo de migrar en 2021, en comparación con el 8% en 2019. La intención de migrar está impulsada en gran medida por la economía y agravada por la violencia externa, la inseguridad y los desastres naturales.</h3>
</div>
</div>
</div>
<div id="motivs-content" class="position-sticky top-0 vh-100 row align-items-center">
<div id="transition" class="container-lg position-absolute top-50 start-50 translate-middle">
<div class="row align-items-center">
<svg class="" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1570 1900">
<!-- <g id="background">
<rect width="1570" height="1900" fill="#0070ff"/>
</g> -->
<g id="map-outline">
<polygon class="cls-2" points="768.77 1136.43 793.19 1128.89 839.52 1193.92 876.77 1193.92 920.31 1150.66 912.22 1088.01 971.1 1086.01 1005.33 1045.45 1042.91 1075.78 1162.36 940.52 1220.96 966.94 1307.84 943.31 1355.84 912.8 1403.1 914.1 1307.66 1345.17 1324.26 1462.94 1492.54 1685 1570 1706.57 1570 1871.5 1425.56 1856.43 1330.66 1725.77 1124.17 1648.8 1041.98 1444.48 835.1 1191.13 768.77 1136.43"/>
<polygon class="cls-2" points="907.35 10.94 764.31 462.48 703.3 420.17 714.36 636.34 620.4 788.15 578.91 784.8 587.66 516.06 339.85 516.06 339.01 594.75 278.17 594.75 363.57 658.38 420.22 719.22 410.54 762.48 239.01 762.48 173.24 876.62 192.22 902.85 168.22 976.52 0 851.78 0 451.59 297.6 372.8 297.6 344.99 434.31 71.5 907.35 10.94"/>
<polygon class="cls-2" points="1250.73 797.64 1305.14 848.71 1257.56 836.85 1318.4 885.68 1357.45 879.49 1250.73 797.64"/>
<polygon class="cls-3" points="339.85 516.06 587.66 516.06 578.91 784.8 620.4 788.15 714.36 811.87 588.22 903.68 589.89 958.38 560.87 994.1 487.75 1047.13 459.85 1088.71 387.57 1062.75 285.43 1056.62 168.22 976.52 192.22 902.85 173.24 876.62 239.01 762.48 410.54 762.48 420.22 719.22 363.57 658.38 278.17 594.75 339.01 594.75 339.85 516.06"/>
<polygon class="cls-3" points="560.87 994.1 589.89 958.38 588.22 903.68 714.36 811.87 784.12 783.78 807.75 800.43 966.45 805.64 1027.29 774.1 1083.1 788.71 1150.73 774.2 1204.59 804.52 1250.73 797.64 1305.14 848.71 1257.56 836.85 1318.4 885.68 1367.94 877.83 1403.1 914.1 1355.84 912.8 1307.84 943.31 1220.96 966.94 1162.36 940.52 1042.91 1075.78 1005.33 1045.45 971.1 1086.01 912.22 1088.01 920.31 1150.66 876.77 1193.92 839.52 1193.92 793.19 1128.89 768.77 1136.43 785 1079.03 717.05 1055.13 677.89 1071.68 605.15 1007.68 560.87 994.1"/>
<polygon class="cls-3" points="497.85 1118.55 459.85 1088.71 487.75 1047.13 560.87 994.1 605.15 1007.68 677.89 1071.68 717.05 1055.13 785 1079.03 768.77 1136.43 752.87 1170.29 641.24 1160.62 567.94 1125.64 497.85 1118.55"/>
</g>
<g id="sq" class="cell"></g>
<g id="tri-overlay" class="cell"></g>
<g id="labels">
<rect class="cls-5" x="963.01" y="918.48" width="86.51" height="22.6"/>
<g>
<path class="cls-1" d="M967.37,923.34h3.19v4.88h4.52v-4.88h3.19v12.87h-3.19v-5.36h-4.52v5.36h-3.19Z"/>
<path class="cls-1" d="M979.43,931.62a4.93,4.93,0,1,1,4.94,4.88A4.73,4.73,0,0,1,979.43,931.62Zm6.88,0c0-1.67-.68-2.81-2-2.81s-2,1.14-2,2.81.67,2.79,2,2.79S986.31,933.3,986.31,931.62Z"/>
<path class="cls-1" d="M990.27,927h2.83v1.26h0a3.23,3.23,0,0,1,2.85-1.53c2,0,3.2,1.44,3.2,3.5v6h-2.93v-5.4c0-1-.49-1.64-1.44-1.64a1.72,1.72,0,0,0-1.63,2v5.09h-2.93Z"/>
<path class="cls-1" d="M1000.12,931.6c0-2.88,1.65-4.88,4-4.88a2.85,2.85,0,0,1,2.57,1.32h.06v-4.7h2.93v12.87h-2.81V935h0a3.06,3.06,0,0,1-2.72,1.53C1001.79,936.5,1000.12,934.68,1000.12,931.6Zm6.73,0c0-1.54-.63-2.66-1.91-2.66s-1.85,1.08-1.85,2.63.68,2.61,1.81,2.61S1006.85,933.12,1006.85,931.6Z"/>
<path class="cls-1" d="M1011,933v-6H1014v5.44c0,1,.45,1.57,1.38,1.57a1.64,1.64,0,0,0,1.62-1.86V927h2.94v9.22h-2.81v-1.13H1017a3.16,3.16,0,0,1-2.76,1.4C1012.16,936.48,1011,935.1,1011,933Z"/>
<path class="cls-1" d="M1021.3,927h2.81v1.44h.05a2.74,2.74,0,0,1,2.52-1.58,1.68,1.68,0,0,1,.58.07v2.52h-.07c-1.8-.25-3,.63-3,2.63v4.14h-2.94Z"/>
<path class="cls-1" d="M1027.49,933.64c0-2,1.62-2.65,3.53-2.9,1.73-.22,2.34-.4,2.34-1s-.38-1-1.26-1-1.4.42-1.49,1.19h-2.7c.07-1.71,1.38-3.17,4.17-3.17a4.74,4.74,0,0,1,3,.76,3,3,0,0,1,1.17,2.63v4.64c0,.74.08,1.15.33,1.32v.12h-2.85a2.64,2.64,0,0,1-.3-1h0a3,3,0,0,1-2.74,1.26C1028.81,936.45,1027.49,935.46,1027.49,933.64Zm5.94-.72v-1.1a7,7,0,0,1-1.51.49c-1.13.25-1.6.54-1.6,1.24s.54,1,1.26,1A1.67,1.67,0,0,0,1033.43,932.92Z"/>
<path class="cls-1" d="M1037.1,933.22h2.78a1.49,1.49,0,0,0,1.69,1.37c.88,0,1.44-.32,1.44-.92,0-.82-1.12-.91-2.34-1.13-1.6-.27-3.31-.7-3.31-2.86,0-1.95,1.8-3,4-3,2.62,0,4,1.14,4.16,3h-2.7c-.1-.83-.66-1.08-1.47-1.08s-1.28.27-1.28.84,1,.74,2.21,1c1.62.27,3.53.68,3.53,3,0,2-1.78,3.06-4.19,3.06C1038.89,936.5,1037.19,935.26,1037.1,933.22Z"/>
</g>
<rect class="cls-5" x="549.15" y="1086.07" width="99.76" height="22.6"/>
<g>
<path class="cls-1" d="M554.73,1090.93h9.68v2.63h-6.52v2.3h5.59v2.49h-5.59v2.75h6.63v2.7h-9.79Z"/>
<path class="cls-1" d="M565.79,1090.93h2.94v12.87h-2.94Z"/>
<path class="cls-1" d="M572.48,1099.75h3.18c.14,1.3,1,1.84,2.5,1.84,1,0,2.05-.38,2.05-1.35s-1-1.25-2.78-1.68c-2.22-.52-4.56-1.2-4.56-3.9s2.22-4,5.07-4,4.91,1.26,5,4h-3.09c-.12-1-.87-1.55-2-1.55s-1.84.48-1.84,1.2c0,.9,1,1.12,2.89,1.55,2.37.56,4.52,1.3,4.52,4.05s-2.29,4.2-5.23,4.2C574.78,1104.11,572.55,1102.6,572.48,1099.75Z"/>
<path class="cls-1" d="M584.09,1101.23c0-2,1.6-2.65,3.5-2.9,1.71-.22,2.32-.4,2.32-1s-.38-1-1.25-1-1.39.42-1.48,1.19H584.5c.07-1.71,1.37-3.17,4.14-3.17a4.69,4.69,0,0,1,3,.76,3,3,0,0,1,1.16,2.63v4.64c0,.74.08,1.15.33,1.32v.12h-2.83a2.64,2.64,0,0,1-.3-1h0a3,3,0,0,1-2.72,1.26C585.39,1104,584.09,1103.05,584.09,1101.23Zm5.89-.72v-1.1a7.33,7.33,0,0,1-1.5.49c-1.13.25-1.59.54-1.59,1.24s.54,1,1.25,1A1.66,1.66,0,0,0,590,1100.51Z"/>
<path class="cls-1" d="M594.19,1090.93h2.95v12.87h-2.95Z"/>
<path class="cls-1" d="M597.8,1094.58h3l1.25,4.16c.27.92.5,1.86.5,1.86h0s.23-.94.5-1.86l1.26-4.16h2.91l-3.16,9.22H601Z"/>
<path class="cls-1" d="M607.12,1101.23c0-2,1.61-2.65,3.5-2.9,1.71-.22,2.32-.4,2.32-1s-.37-1-1.25-1-1.39.42-1.48,1.19h-2.68c.07-1.71,1.38-3.17,4.14-3.17a4.7,4.7,0,0,1,3,.76,3.06,3.06,0,0,1,1.16,2.63v4.64c0,.74.07,1.15.32,1.32v.12H613.3a2.64,2.64,0,0,1-.3-1h0a3,3,0,0,1-2.71,1.26C608.42,1104,607.12,1103.05,607.12,1101.23Zm5.89-.72v-1.1a7.13,7.13,0,0,1-1.5.49c-1.12.25-1.59.54-1.59,1.24s.54,1,1.25,1A1.66,1.66,0,0,0,613,1100.51Z"/>
<path class="cls-1" d="M616.8,1099.19c0-2.88,1.64-4.88,4-4.88a2.83,2.83,0,0,1,2.55,1.32h.06v-4.7h2.91v12.87h-2.79v-1.24h0a3,3,0,0,1-2.69,1.53C618.46,1104.09,616.8,1102.27,616.8,1099.19Zm6.68,0c0-1.55-.63-2.66-1.9-2.66s-1.83,1.08-1.83,2.63.67,2.61,1.8,2.61S623.48,1100.71,623.48,1099.19Z"/>
<path class="cls-1" d="M627.3,1099.21a4.88,4.88,0,1,1,4.89,4.88A4.7,4.7,0,0,1,627.3,1099.21Zm6.82,0c0-1.67-.68-2.81-2-2.81s-1.92,1.14-1.92,2.81.66,2.79,1.92,2.79S634.12,1100.89,634.12,1099.21Z"/>
<path class="cls-1" d="M638.05,1094.58h2.78V1096h.06a2.7,2.7,0,0,1,2.5-1.58,1.65,1.65,0,0,1,.57.07V1097h-.07c-1.79-.25-2.93.63-2.93,2.63v4.14h-2.91Z"/>
</g>
<rect class="cls-5" x="334.51" y="932.3" width="96.03" height="22.6"/>
<g>
<path class="cls-1" d="M340.55,948.52a7.11,7.11,0,0,1-1.72-4.88,7,7,0,0,1,1.9-5,5.9,5.9,0,0,1,4.37-1.71c3.28,0,5.25,1.76,5.66,4.46h-3.07a2.35,2.35,0,0,0-2.48-1.83c-2.11,0-3.16,1.76-3.16,4.1s1.21,4.11,3.21,4.11A2.63,2.63,0,0,0,348,945.5v0h-2.39v-2.34H351V950h-2.22l-.18-1.54h0a4,4,0,0,1-3.63,1.83A5.69,5.69,0,0,1,340.55,948.52Z"/>
<path class="cls-1" d="M352.24,946.87v-6h2.9v5.43c0,1,.44,1.57,1.37,1.57a1.64,1.64,0,0,0,1.61-1.85v-5.15H361V950h-2.79V948.9h-.05a3.12,3.12,0,0,1-2.73,1.4C353.35,950.3,352.24,948.92,352.24,946.87Z"/>
<path class="cls-1" d="M362,947.46c0-2,1.61-2.65,3.5-2.9,1.72-.22,2.32-.39,2.32-1s-.37-1-1.25-1-1.39.42-1.48,1.19H362.4c.08-1.71,1.38-3.17,4.15-3.17a4.75,4.75,0,0,1,3,.76,3.09,3.09,0,0,1,1.16,2.63v4.64c0,.74.07,1.16.32,1.32V950h-2.82a2.53,2.53,0,0,1-.3-1h0a3,3,0,0,1-2.71,1.26C363.3,950.27,362,949.28,362,947.46Zm5.89-.72v-1.1a7.13,7.13,0,0,1-1.5.49c-1.12.25-1.58.54-1.58,1.24s.53,1,1.25,1A1.67,1.67,0,0,0,367.88,946.74Z"/>
<path class="cls-1" d="M372.62,947.6v-5H371.4v-1.83h1.22V937.9h2.84v2.92h1.66v1.83h-1.66V947c0,.72.39.9,1,.9h.65V950a6.89,6.89,0,0,1-1.59.14C373.83,950.14,372.62,949.58,372.62,947.6Z"/>
<path class="cls-1" d="M377.67,945.41a4.62,4.62,0,0,1,4.7-4.86,4.46,4.46,0,0,1,3.12,1.15,5.88,5.88,0,0,1,1.61,4.48h-6.57c.18,1.24.85,2,2.05,2a1.51,1.51,0,0,0,1.52-.92h2.84a3.75,3.75,0,0,1-1.54,2.18,4.8,4.8,0,0,1-2.86.84A4.64,4.64,0,0,1,377.67,945.41Zm6.48-1a1.78,1.78,0,0,0-1.73-1.81c-1.11,0-1.68.71-1.87,1.81Z"/>
<path class="cls-1" d="M388.08,940.82h2.79v1.31h.05a3.05,3.05,0,0,1,2.77-1.58,2.75,2.75,0,0,1,2.57,1.62h0a3.25,3.25,0,0,1,2.88-1.62c2.07,0,3.1,1.42,3.1,3.49v6h-2.91v-5.47c0-1-.41-1.57-1.28-1.57s-1.45.78-1.45,1.88V950h-2.91v-5.47c0-1-.41-1.57-1.28-1.57s-1.45.78-1.45,1.88V950h-2.91Z"/>
<path class="cls-1" d="M403.17,947.46c0-2,1.61-2.65,3.5-2.9,1.71-.22,2.32-.39,2.32-1s-.37-1-1.25-1-1.39.42-1.48,1.19h-2.68c.07-1.71,1.38-3.17,4.14-3.17a4.76,4.76,0,0,1,3,.76,3.09,3.09,0,0,1,1.16,2.63v4.64c0,.74.07,1.16.32,1.32V950h-2.82a2.67,2.67,0,0,1-.31-1h0a3,3,0,0,1-2.72,1.26C404.47,950.27,403.17,949.28,403.17,947.46Zm5.89-.72v-1.1a7.13,7.13,0,0,1-1.5.49c-1.12.25-1.59.54-1.59,1.24s.54,1,1.25,1A1.67,1.67,0,0,0,409.06,946.74Z"/>
<path class="cls-1" d="M413.28,937.16h2.94V950h-2.94Z"/>
<path class="cls-1" d="M417.21,947.46c0-2,1.6-2.65,3.49-2.9,1.72-.22,2.33-.39,2.33-1s-.38-1-1.25-1-1.4.42-1.49,1.19h-2.67c.07-1.71,1.37-3.17,4.14-3.17a4.75,4.75,0,0,1,3,.76,3.06,3.06,0,0,1,1.16,2.63v4.64c0,.74.07,1.16.32,1.32V950h-2.82a2.53,2.53,0,0,1-.3-1h0a3,3,0,0,1-2.71,1.26C418.51,950.27,417.21,949.28,417.21,947.46Zm5.89-.72v-1.1a7.33,7.33,0,0,1-1.5.49c-1.13.25-1.59.54-1.59,1.24s.53,1,1.25,1A1.67,1.67,0,0,0,423.1,946.74Z"/>
</g>
</g>
</svg>
</div>
</div>
<div id="motivations" class="container-lg position-absolute">
<div id="viz-content" class="row vh-100 px-xl-5 align-items-center">
<div id="viz-col" class="col">
<!-- div for buttons -->
<div id="buttons-motivations" class="row mb-3 me-0">
<div class="col-6 px-0">
<span data-bs-toggle="tooltip" data-bs-placement="top"
title="Households who had members migrate in the last 5 years specified the motivations of those migrants.">
<button type="button" id="btn-motivs"
class="btn btn-sm text-uppercase text-blue" data-bs-toggle="modal"
data-bs-target="#modal-motivs">Motivaciones</button>
</span>
</div>
<div id="btn-center" class="col-3 px-0">
<span data-bs-toggle="tooltip" data-bs-placement="top"
title="Motivations for migration split up by the monthly income per capita levels of households with a migrant in the last 5 years.">
<button type="button" id="btn-income"
class="btn btn-sm text-uppercase text-blue" data-bs-toggle="modal"
data-bs-target="#modal-income">Nivel de Ingresos</button>
</span>
</div>
<div class="col-3 px-0">
<span data-bs-toggle="tooltip" data-bs-placement="top"
title="Food Security is measured by the Consolidated Approach to Reporting Indicators of Food Security (CARI) score. Used to classify households into four groups by their food security status, this index is based on indicators that measure different dimensions of food security: the current status of food consumption score and/or food energy shortfall and the capacity of livelihood coping strategies and food expenditure share or poverty status.">
<button type="button" id="btn-cari" class="btn btn-sm text-uppercase text-blue"
data-bs-toggle="modal" data-bs-target="#modal-cari">Seguridad Alimentaria</button>
</span>
</div>
</div>
<!-- frame for d3 visualization -->
<div id="frame-motivations" class="position-relative"></div>
<!-- motivs tooltip template -->
<div class="tooltip template">
<div class="side-color"></div>
<p>Motivación para Migrar</p>
<h3 class="text-color">
<span class="label-motiv-pct">90</span>%
<span class="label-motiv text-uppercase">Económica</span>
</h3>
<span class="text-hh text-color">de los
<span class="label-hh">hogares</span> Encuestados
</span>
<div class="row mt-1">
<div class="col-left">
<p>Razones para Migrar</p>
<span class="label-motiv-detail text-label">Búsqueda de un mejor empleo, salario o condiciones laborales, falta de dinero para comprar alimentos, falta de dinero para cubrir necesidades básicas</span>
</div>
<div class="col-right">
<p>País de Origen</p>
<span class="label-country text-label">El Salvador</span>
</div>
</div>
</div>
<!-- side tooltip template -->
<div class="tooltip-side p-2 template">
<p class="text-uppercase mb-1">
<span class="label-group px-1 text-white">Ingresos Bajos</span> <b class="text-blue"><span class="label-group-pct">42</span>%</b>
</p>
<p>
de los Hogares encuestados con un Migrante<br>en los Últimos 5 Años
</p>
<p class="label-descr mb-0">Ingreso Mensual de cada Hogar per Cápita:</p>
<!-- <p class="text-range mb-0">
<span class="label-range">$128.70–436.50</span>
</p> -->
</div>
</div><!-- close col -->
</div><!-- close row -->
</div><!-- close container -->
</div>
<!-- <div id="story"></div> -->
<div id="narrative-scroll" class="content-block">
<section class="scenes position-relative">
<div id="" class="step active scrolly-container-motivations template">
<!-- <div class="scrolly-container-motivations"> -->
<div class="ribbon-image">
<img src="./img/motivations/mot2.jpg">
</div>
<div class="scrollytelling-caption">
<h2 class="scrollytelling">Los Migrantes Quieren Quedarse</h2>
<h3 class="scrollytelling description">A pesar del creciente deseo de migrar, solo una fracción de la población encuestada planea hacerlo. La principal motivación para migrar es impulsada, en gran medida, por la economía.</h3>
</div>
<div class="scrollytelling-text">
<h2 class="scrollytelling">Los Migrantes Vienen de Todos los Niveles de Ingresos</h2>
<h3 class="scrollytelling description">Nuestros datos contrastan con estudios previos que indicaban que los hogares con más recursos tienen más probabilidades de poder migrar. Esta encuesta mostró que la migración ocurre desde todos los niveles de ingresos.</h3>
</div>
<!-- </div> -->
</div>
</section>
</div><!-- close narrative scroll content block -->
</div>
</section>
<section class='chapter' id="closed">
<div class="bk profiles-img" onclick='redirect_Page(this,"es_perfiles.html")'>
<div class="gradient profiles-g">
<h2 class="chapter-title">LA MITAD DE LOS MIGRANTES<br>TRABAJAN EN LA<br>MISMA OCUPACIÓN<br>EN SU DESTINO FINAL</h2>
<!--<h1 class="chapter-summary">PROFILES</h1>-->
</div>
</div>
<div class="chapter-prompt position-fixed p-3">
<span class="text-uppercase">HAGA CLIC AQUÍ PARA SABER MÁS</span>
</div>
</section>
<section class='chapter' id="closed">
<div class="bk outcomes-img" onclick='redirect_Page(this,"es_concecuencias.html")'>
<div class="gradient outcomes-g">
<h2 class="chapter-title">SÓLO UN 57%<br>DE LOS MIGRANTES<br>RESIDEN EN EL<br>DESTINO<br>DESEADO</h2>
<!--<h1 class="chapter-summary">OUTCOMES</h1>-->
</div>
</div>
<div class="chapter-prompt position-fixed p-3">
<span class="text-uppercase">HAGA CLIC AQUÍ PARA SABER MÁS</span>
</div>
</section>
<section class='chapter' id="closed">
<div class="bk cost-img" onclick='redirect_Page(this,"es_costos.html")'>
<div class="gradient cost-g">
<h2 class="chapter-title">LOS COSTOS DE<br>MIGRACIÓN<br>REPRESENTAN UNA<br>CARGA FINANCIERA<br>ADICIONAL</h2>
<!--<h1 class="chapter-summary">COST</h1>-->
</div>
</div>
<div class="chapter-prompt position-fixed p-3">
<span class="text-uppercase">HAGA CLIC AQUÍ PARA SABER MÁS</span>
</div>
</section>
<section class='chapter' id="closed">
<div class="bk about-img" onclick='redirect_Page(this,"es_acerca.html")'>
<div class="gradient about-g">
<h2 class="chapter-title">TRAZANDO UN <br>NUEVO RUMBO <br>REGIONAL
<!--<h1 class="chapter-summary">ABOUT</h1>-->
</div>
</div>
<div class="chapter-prompt position-fixed p-3">
<span class="text-uppercase">HAGA CLIC AQUÍ PARA SABER MÁS</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">
<h2 class='scrollytelling'>La Principal Motivación para Migrar es la Económica</h2>
<h3 class='scrollytelling description'>Las motivaciones para migrar son diversas; desde la violencia hasta el cambio climático. En los últimos cinco años, la reunificación familiar fue la segunda motivación más común para migrar entre los migrantes encuestados.</h3>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="./js/chapterClick.js"></script>
<script type="text/javascript" src="./js/popper.min.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/motivations_sp.js"></script>
<script type="text/javascript" src="./js/motivationsMapConfig_sp.js"></script>
<script type="text/javascript" src="./js/motivationsmap.js"></script>
</body>
</html>