forked from youthfuly/Parallax_Effect
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
234 lines (175 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Central American Migration</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="css/style_map.css">
<link rel="stylesheet" href="css/household_style.css">
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" integrity="sha256-kLaT2GOSpHechhsozzB+flnD+zUyjE2LlfWPgU04xyI=" crossorigin=""/>
<script src="https://unpkg.com/[email protected]/dist/leaflet.js" integrity="sha256-WBkoXOwTeyKclOHuWtc+i2uENFpDZ9YPdf5Hf+D7ewM=" crossorigin=""></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/p5.js"></script>
</head>
<body>
<!-- First scene: Introduction ------------------------------------------------------------------------------------------------------->
<div class="scene1">
<div class="head">
Northern Triangle Migration
</div>
<!-- Pop Up disclaimer: below will be the code for a pop-up disclaimer-------------------------------------------------------- -->
<div class="contentBox">
<div class="close"></div>
<div class="imgBox">
<img src="img/character/flower.png">
</div>
<div class="disclaimer_content">
<h2> DISCLAIMER </h2>
<p> All characters and events in this story are fictitious but the poverty, hunger, and violence that Central American migrants are facing are very real.</p>
</div>
</div>
<script src="./js/disclaimer_popup.js"></script>
<!-- End of Pop Up disclaimer----------------------------------------------------------------------------------------------- -->
</div>
<!-- End of First scene: Introduction ------------------------------------------------------------------------------------------------------->
<!-- Second scene: Introduce the character --------------------------------------------------------------------------------------------->
<div class="scene2">
<img class="maria_s2" src="img/character/sad.png" id="maria_s3">
<div class="s2_content">
<p> This is Maria. Maria is a 6 years old girl from Guatemala city. She lives in a <br/> family of 4 people with her mom, her dad, and her younger sister.</p>
</div>
</div>
<section>
<h2>The Northern Triangle countries - Guatemala, Honduras and El Salvador - account for the greatest percentage of unaccompanied children arriving at the US southern border. </h2>
<h3>This was as high as 17 - 26% & of all migrants encountered in 2022. </h3>
<!--
<div id="map" class = "leafMap"></div>
<script src="js/script_map.js"></script>
-->
<div class="flourish-embed flourish-map" data-src="visualisation/13742261"><script src="https://public.flourish.studio/resources/embed.js"></script></div>
</section>
<div id = "motitext">
<h2>...<br>Poverty, Food Insecurity and Violence are major motivations for migrants from the <br> Northern Triangle to leave their home countries.<br>...</h2>
</div>
<section>
<h2>Explore all motivations below.</h2>
<p>This visualisation is based on data provided by the World Food Programme (WFP).</p>
<div class="flourish-embed flourish-survey" data-src="visualisation/13738358"><script src="https://public.flourish.studio/resources/embed.js"></script></div>
</section>
<!-- Second scene 2A: Introduce the theme on poverty --------------------------------------------------------------------------------------------->
<div class="scene2a">
<img class="maria_s2a" src="img/character/poor.png" id="maria_s2a">
<div class="s2a_content">
<p>Maria is faced with extreme poverty at home. Children from The Northern Triangle Countries <br/> often do not have access to basic facilities and resources due to financial difficulty. </p>
</div>
</div>
<!-- Household section: Talk about what household items Maria has at home -->
<section>
<h1>Economic Developement (GDP) in the Americas has been unfavorable to the Northern Triangle over the past 50 years.</h1>
<p>Notice how the Northern Triangle Countries have consistently remained near the bottom. </p>
<div class="flourish-embed flourish-bar-chart-race" data-src="visualisation/13657182"><script src="https://public.flourish.studio/resources/embed.js"></script></div>
<h1>Maria's family lacks also many basic household items</h1>
<div class="household_items">
<p>
Colored items are household items that Maria' family has in posession. Click on the icons to explore!
</p>
<button class="object_button" type="button" onclick = "set_object('tv')"><img src="img/household/tv.png"/></button>
<button class="object_button" type="button" onclick = "set_object('fridge')"><img src="img/household/fridge.png"/></button>
<button class="object_button" type="button" onclick = "set_object('microwave')"><img src="img/household/microwave.png"/></button>
<button class="object_button" type="button" onclick = "set_object('stove')"><img src="img/household/stove.png"/></button>
<button class="object_button" type="button" onclick = "set_object('computer')"><img src="img/household/computer.png"/></button>
<button class="object_button" type="button" onclick = "set_object('internet')"><img src="img/household/internet.png"/></button>
<button class="object_button" type="buttson" onclick = "set_object('telephone')"><img src="img/household/telephone.png"/></button>
<button class="object_button" type="button" onclick = "set_object('ac')"><img src="img/household/airconditioner.png" /></button>
<button class="object_button" type="button" onclick = "set_object('car')"><img src="img/household/car.png" /></button>
<button class="object_button" type="button" onclick = "set_object('washer')"><img src="img/household/washer.png"/></button>
<button class="object_button" type="button" onclick = "set_object('stereo')"><img src="img/household/stereo.png"/></button>
<!--
<div class="tvmodal" id="tvmodal">
<button class="tv_close">×</button>
<div class="flourish-embed flourish-chart" data-src="visualisation/13659012"><script src="https://public.flourish.studio/resources/embed.js"></script></div>
</div>
-->
<div>
<div id ="tv" class="flourish-embed flourish-household" data-src="visualisation/13741777"><script src="https://public.flourish.studio/resources/embed.js"></script></div>
<div id ="fridge" class="flourish-embed flourish-household" data-src="visualisation/13741782"><script src="https://public.flourish.studio/resources/embed.js"></script></div>
<div id ="microwave" class="flourish-embed flourish-household" data-src="visualisation/13741792"><script src="https://public.flourish.studio/resources/embed.js"></script></div>
<div id ="stove" class="flourish-embed flourish-household" data-src="visualisation/13741939"><script src="https://public.flourish.studio/resources/embed.js"></script></div>
<div id ="computer" class="flourish-embed flourish-household" data-src="visualisation/13741961"><script src="https://public.flourish.studio/resources/embed.js"></script></div>
<div id ="internet" class="flourish-embed flourish-household" data-src="visualisation/13741970"><script src="https://public.flourish.studio/resources/embed.js"></script></div>
<div id ="telephone" class="flourish-embed flourish-household" data-src="visualisation/13741979"><script src="https://public.flourish.studio/resources/embed.js"></script></div>
<div id ="ac" class="flourish-embed flourish-household" data-src="visualisation/13741986"><script src="https://public.flourish.studio/resources/embed.js"></script></div>
<div id ="car" class="flourish-embed flourish-household" data-src="visualisation/13741992"><script src="https://public.flourish.studio/resources/embed.js"></script></div>
<div id ="washer" class="flourish-embed flourish-household" data-src="visualisation/13742017"><script src="https://public.flourish.studio/resources/embed.js"></script></div>
<div id ="stereo" class="flourish-embed flourish-household" data-src="visualisation/13742031"><script src="https://public.flourish.studio/resources/embed.js"></script></div>
</div>
<script src="./js/household.js"></script>
</div>
</section>
<!-- Second scene 2B: Introduce the theme on Food Insecurity --------------------------------------------------------------------------------------------->
<div class="scene2b">
<!--
<img class="maria_s2b" src="img/character/poor.png" id="maria_s2b">
-->
<div class="s2b_content">
<p>Many children in the Northern Triangle are also plagued by Food Insecurity. <br> Between 25-35% of houselholds report having borrowed money to meet everyday food requirements. </p>
</div>
</div>
<section>
<h2>Hunger is a real problem for children like Maria.</h2>
<h2>In most cases, food Insecurity is closely tied to economic vulnerability. </h2>
<div class="flourish-embed flourish-food-expenditure" data-src="visualisation/13742430"><script src="https://public.flourish.studio/resources/embed.js"></script></div>
<h2>Food security also determines the way families spend on other aspects of their lives. </h2>
<div class="flourish-embed flourish-food-category" data-src="visualisation/13742386"><script src="https://public.flourish.studio/resources/embed.js"></script></div>
<h2>It also serves as a strong motivation for families to migrate in search of a more secure life. </h2>
<div class="flourish-embed flourish-hunger" data-src="visualisation/13742444"><script src="https://public.flourish.studio/resources/embed.js"></script></div>
</section>
<div class="scene3">
<img class="maria_s3" src="img/character/scared.png" id="maria_s3">
<img class="gang" src="img/character/gang.png" id="gang">
<div class="s3_content">
<p> Maria also constantly witnesses gang violence in her hometown on a day-to-day basis. <br/>
Central American gangs are responsible for brutal act of violence, chronic abuse of <br/>
women, forced displacement of many children and families in Maria's village.</p>
</div>
</div>
<section>
<div>
<h3>Lethal violence against girls and women in the Northern Triangle</h3>
<script src="./js/sketch.js"></script>
<h3 class = "centerContent">The Journey of Life Cut Short</h3>
<div class = "centerContent" id="canvasForHTML"></div>
<div class = "centerContent">
<button onclick="setSLV()" type="button">El Salvador</button>
<button onclick="setHND()" type="button">Honduras</button>
<button onclick="setGT()" type="button">Guatemala</button>
<p><br></p>
</div>
</div>
</section>
<div class="scene4">
<img class="maria_s4" src="img/character/sad.png" id="maria_s4">
<div class="s4_content">
<p> The poverty, hunger, and violence in her hometown causes Maria's family to undertake <br/>
the perilous journey to the US in order to seek better and safer living condition. </p>
</div>
</div>
<section>
<h2>Maria is one of nearly 130,000 unaccompanied migrant children that entered the U.S. shelter system in 2022. This was a record.</h2>
<div>
<a href="https://www.cbsnews.com/news/immigration-unaccompanied-migrant-children-record-numbers-us-shelter-system/">Source: CBS News</a>
</div>
</section>
<div class="scene5">
<img class="children_border" src="img/character/friends.png" id="maria_s5">
<div class="s5_content">
<p> In many cases, unaccompanied children founded at the border started the <br/>
journey with their parents and were separated during the long dangerous trip.</p>
</div>
</div>
<footer>
Copyright © 2023 - All rights Reserved - Designed by Anh, Han, & Rohit for 6.C35 Data Visualization
<br> The data visualizations on this page was made with data contributed by the United Nations World Food Programme (WFP) and UNICEF.
</footer>
</body>
</html>