forked from asoback/refugees
/
home.html
240 lines (203 loc) · 9.14 KB
/
home.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
<!--
This is the main file, right now it has basically everything it needs, though we might want to move some of the styling over to styles.css, and some of the JS into thier own files.
It relies on the information provided by key.js for your maps API
and also on Data/pop_data.js for the JS array of country, fleeing refugee population, year
-->
<!DOCTYPE html>
<html>
<head>
<!-- Including Bootstrap 3 -->
<!-- downgraded to use sliders. Internet told me to. https://stackoverflow.com/a/42486185 -->
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/9.7.2/css/bootstrap-slider.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/9.7.2/bootstrap-slider.min.js"></script>
<!-- CSS for media queries -->
<link rel="stylesheet" type="text/css" href="style.css">
<title>Scale of the Refugee Crisis</title>
<!-- Maps Section -->
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<!-- IMPORTANT!
This js file listed below is called key.js. It is included in the .gitignore file, so it is not added to the github repo.
In order to get this to work, you will need to sign up for a free google maps api key
See website: https://developers.google.com/maps/documentation/javascript/get-api-key#step-1-get-an-api-key
Click 'Get started' you have to enable billing, but it is free so long as you dont do more than like 150,000 requests this month
You can set max requests, and not be billed no matter what, but this is done for security reasons, explained in CS290,
basically so none of us can post this on reddit and accidentally give a teammate a surprise million views and a $50 charge
On the google dev console, console.developers.google.com search for the geocoding API, and enable that one. Still figuring this part out though.
After you have your api key, create a file called key.js in the same folder as this html doc, add a single line to it. It will look like:
const APIkey = '(copy and paste your api key here)'
Then, this will work on your home computer
-->
<script type="text/javascript" src="key.js"></script>
<!-- Data for filling in the map.
IF you make changes to this data, be sure to look in csv2js.py
Which converts the spreadsheet data into something usable in this page
The Array object is called refugeeData
refugeeData[0] is 1960 data, [1] is 1961, and so on.
-->
<script type="text/javascript" src="Data/pop_data.js"></script>
<!-- Contains the history summary array
The array is a constant called summaryArray -->
<script type="text/javascript" src="summaries.js"></script>
<!-- Want to work on the chart styles, color, etc.? Here are the docs;
https://developers.google.com/chart/interactive/docs/gallery/geochart#top_of_page -->
<script type="text/javascript">
google.charts.load('current', {
'packages':['geochart'],
// Note: to run locally, you need an API key, see above comment
// See: https://developers.google.com/chart/interactive/docs/basic_load_libs#load-settings
'mapsApiKey': APIkey
});
//Load initial chart
google.charts.setOnLoadCallback(drawMap);
//Redraw map every time. Apparently no animations for google geocharts :(
//If called with no val default to 1960
function drawMap(val){
var countryList = document.getElementById('countryList'); //Used to make ordered list in map row
var year;
//Set year array element spot, between 0 and 57 (Add 1960 to it to get actual year)
if (val == undefined){
year = 0;
}
else{
year = val - 1960;
}
//Country array is the refugee popuation data for the current selected year
var countryArray = refugeeData[year];
//Get the total population by adding all of it together
var totalPop = 0;
countryList.innerHTML =''; // empty the list
var i;
for (i =1; i < countryArray.length; i++){
if(countryArray[i][1] > 0){
var listItem = document.createElement('li');
listItem.innerHTML = countryArray[i][0] + ': ' + numberWithCommas(countryArray[i][1]);
countryList.appendChild(listItem);
totalPop += countryArray[i][1];
}
}
//Build title
document.getElementById('yearLabel').textContent = year+1960;
document.getElementById('titleLabel').textContent = "There Are More Than " + numberWithCommas(totalPop) + " Refugees Worldwide";
//Subtitle
if (year > 0){
var pastPop = 0;
var prevCountryArr = refugeeData[year-1];
for (i =1; i < prevCountryArr.length; i++){
if(prevCountryArr[i][1] > 0){
pastPop += prevCountryArr[i][1];
}
}
var changePop = totalPop - pastPop;
var string;
if(changePop > 0){
string = "+ ";
}
else{
string = "";
}
string += numberWithCommas(changePop) + " change since " + (year + 1959);
document.getElementById('subtitleLabel').textContent = string;
}
else{
document.getElementById('subtitleLabel').textContent = "Data gathered from UNHCR.org";
}
//countryArray[0] has to be labels ['Country', 'Fleeing population']
//After that is country:pop pairs, so countryArray[1] will look like ['Angola', '150000']
var data = google.visualization.arrayToDataTable(countryArray);
//We might want to go with displayMode: 'markers' because some of these numbers are so big they overshadow others.
//Like syria has so many refugees fleeing that it is hard to see what is happening in Latin America
//If we go with that style, then we should remove legend:none, max value caps it at 80k, so you can see these others.
var options = {
colorAxis: {colors: ['#2cd619', '#f73909'], maxValue: 80000},
backgroundColor: '#119ac4',
datalessRegionColor: '#2cd619',
defaultColor: '#2cd619',
legend: 'none'
};
//Finally, redraw this map
var chart = new google.visualization.GeoChart(document.getElementById('map_div'));
chart.draw(data, options);
var summaryDiv = document.getElementById('summary');
if (summaryArray[year] != "") {
summaryDiv.textContent = summaryArray[year];
}
}
//Button next to slider calls this function on click
//Takes us to most recent time (2017)
function toPresent(){
drawMap(2017);
$("#year").slider('setValue', 2017);
}
//Number formatting function using regex
//Citation: Elias Zamaria, https://stackoverflow.com/a/2901298
function numberWithCommas(x) {
return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}
</script>
</head>
<body>
<div class="container-fluid">
<!-- year label -->
<div class="row mt-5">
<div class="col-lg-6 col-lg-offset-3 text-center"">
<h2 id=yearLabel></h2>
</div>
</div>
<!-- Title Label -->
<div class="row">
<div class="col-lg-6 col-lg-offset-3 text-center"">
<h1 id=titleLabel></h1>
</div>
</div>
<!-- subtitle Label -->
<div class="row">
<div class="col-lg-6 col-lg-offset-3 text-center"">
<h6 id=subtitleLabel></h6>
</div>
</div>
<!-- Map header -->
<div class="row">
<div class="col">
<h4>Countries of Origin</h4>
</div>
</div>
<br>
<!-- Map Content -->
<div class="row mt-5 vertical-align">
<!-- Left hand side list of countries and populations -->
<div class="col-lg-2 col-md-2">
<h4 id="totalRefugees">Origin: Fleeing Population</h4>
<div class="pre-scrollable">
<ul id="countryList"></ul>
</div>
</div>
<div class="col-lg-6 col-md-6 text-center">
<div id="map_div"></div>
</div>
<!-- This is where the summaries get filled into -->
<div class="col-lg-3 col-md-3 global_conflicts">
<h4> Global Conflicts</h4>
<p id="summary"></p>
<p id="references"> Events and dates gathered from Wikipedia.</p>
</div>
</div>
<br>
<!-- Year selector -->
<div class="row mt-15 pt-5">
<!--slider-->
<div class="col text-center">
<input id="year" type="text" data-provide="slider" data-slider-id='yearSlider' data-slider-min="1960" data-slider-max="2017" data-slider-step="1" data-slider-value="1960" onchange="drawMap(this.value)">
<button id="presentBttn" type="button" class="btn btn-warning btn-arrow-right" onclick="toPresent()"><span class="glyphicon glyphicon-forward"></span></button>
</div>
</div>
</div>
<!-- Footer section, first p is left, second is on right. Position fixed at bottom, see styles.css -->
<footer>
<p style="float: left">OSU Hackathon Winter 2018</p>
<p style="float: right">Data gathered from <a href="https://www.unhcr.org/figures-at-a-glance.html">UN Refugee Agency</a></p>
</footer>
</body>
</html>