-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html~
212 lines (169 loc) · 6.91 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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<!-- JavaScript files go here -->
<head>
<title>IS3 AX2</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<!-- CSS -->
<!--<link rel="stylesheet" type="text/css" href="css/style.css" />-->
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/skeleton/base.css">
<link rel="stylesheet" href="css/skeleton/skeleton.css">
<link rel="stylesheet" href="css/skeleton/layout.css">
<!-- load all JavaScript objects -->
<script src="https://www.google.com/jsapi"></script> <!-- Google charts API -->
<script src="js/jquery-1.9.1.min.js"></script> <!-- jQuery -->
<script src="js/map.js"></script> <!-- Map view -->
<script src="js/scatter.js"></script><!-- Scatter view -->
<script src="js/comparison.js"></script><!-- Comparison view -->
<script src="js/countryInfo.js"></script><!-- Country info box -->
<script src="js/jquery.autocomplete.min.js"></script>
<script src="js/countrySelect.js"></script>
<!--<script src="js/countries.js"></script>-->
<script src="js/sampleD.js"></script>
<script src="js/model.js"></script>
<script src="js/results.js"></script>
<!-- render all components -->
<script>
// model
var model = new Model(headers, fullDataSet);
var mapheadings = ["Country", model.headers[0] + " / " + model.headers[1]];
// map component
var mapdata = model.getMapData(model.headers[0], model.headers[1]);
var map = new Map("map", mapheadings, mapdata);
// scatterplot component
var scatterdata = model.getScatterplotData(model.headers[0], model.headers[1]);
var scatter = new Scatter("scatterplot", [model.headers[0], model.headers[1]], scatterdata);
// bar chart component (comparison view)
var comparisondata = model.getComparisonData(model.headers[0], model.headers[1], 10);
var comparison = new Comparison("comparison", comparisondata);
function updateViews(prop1, prop2) {
// update map
mapheadings = ["Country", prop1 + " / " + prop2];
mapdata = model.getMapData(prop1, prop2);
map.redraw(mapheadings, mapdata);
// update scatterplot view
scatterdata = model.getScatterplotData(prop1, prop2);
scatter.update([prop1, prop2], scatterdata);
// update comparison view
comparisondata = model.getComparisonData(prop1, prop2, 10);
comparison.redraw(comparisondata);
}
// document has loaded
$(function() {
// region selector
// TODO should be moved inside map object
$("#regionSelector input[type='button']").click(function(evt) {
// redraw map
map.drawRegion(evt.target.id);
});
// country info
var cInfo = new CountryInfo("countryInfo", model);
map.addListener(cInfo);
// tabs
var mapview = $("#mapContainer");
var scatterplotview = $("#scatterplot");
var comparisonview = $("#comparison");
mapview.show(); scatterplotview.hide(); comparisonview.hide();
var maptab = $("#maptab");
var scatterplottab = $("#scatterplottab");
var comparisontab = $("#comparisontab");
maptab.click(function() { mapview.show(); scatterplotview.hide(); comparisonview.hide(); });
scatterplottab.click(function() { mapview.hide(); scatterplotview.show(); comparisonview.hide(); });
comparisontab.click(function() { mapview.hide(); scatterplotview.hide(); comparisonview.show(); });
// criteria selection
var sel1 = $("#sel1");
var sel2 = $("#sel2");
$('#selVal1').html(sel1);
$('#selVal2').html(sel2);
// create option tags
var option;
for(i = 0; i < model.headers.length; i++) {
option = "<option value='" + model.headers[i] + "'>" + model.headers[i] + "</option>";
sel1.append(option);
sel2.append(option);
}
$("#sel2 option:nth-child(2)").attr("selected", true);
sel1.change(function() {
updateViews(sel1.val(), sel2.val());
});
sel2.change(function(evt) {
updateViews(sel1.val(), sel2.val());
});
// autocomplete
var autocomplete = document.getElementById("autocomplete");
autocomplete.onblur = function() {
if(this.value=='') this.value='Enter Country';
};
autocomplete.onfocus = function() {
if(this.value=='Enter Country') this.value='';
};
// selected countries
var selected = $("#selectedList");
for(i = 0; i < model.selected.length; i++)
selected.append("<option value='" + model.selected[i]["ISO"] + "'>" + model.selected[i]["Country"] + "</option>");
// country selection object
var countrySelect = new CountrySelect("selectedList", "autocomplete", "deselect", "deselectAll", model, function() {
updateViews(sel1.val(), sel2.val());
});
});
</script>
</head>
<!-- Document layout -->
<body>
<div id="wrapper" class="container">
<div id="mapContainer" class="twelve columns">
<div id="regionSelector">
<input type="button" id="world" value="World" />
<input type="button" id="002" value="Africa" />
<input type="button" id="142" value="Asia" />
<input type="button" id="150" value="Europe" />
<input type="button" id="021" value="North America" />
<input type="button" id="005" value="South America" />
<input type="button" id="009" value="Oceania" />
</div>
<div id="map"></div>
</div>
<div id="scatterplot" class="twelve columns"></div>
<div id="comparison" class="twelve columns"></div>
<div class="four columns">
<div id="countryInfo">
</div>
<div id="resultsOutput">
<div id="resultsOutputText"></div><!-- Country Name, based on 'selectedList' ID-->
<div id="selVal1"></div>
<div id="selVal2"></div>
<!-- This box will be repeated for every country selected -->
</div><!-- End ResultsOutput-->
<div id="selectionBar">
<select id="sel1">
</select>
<select id="sel2">
</select>
</div><!-- End SelectionBar -->
</div>
<div class="sixteen columns">
<div id="tabs" class="four columns">
<input type="button" id="maptab" value="Map" />
<input type="button" id="scatterplottab" value="ScatterPlot" />
<input type="button" id="comparisontab" value="Comparison" />
</div>
<div id="searchfield" class="four columns">
<form>
<input type="text" name="country" class="biginput" id="autocomplete" value="Enter Country" />
</form>
</div><!-- End Searchfield -->
<div id="outputbox" class="four columns">
<form>
<select id="selectedList" size="3">
</select>
<input type="button" id="selectAll" value="Select All">
<input type="button" id="deselect" value="Deselect">
<input type="button" id="deselectAll" value="Deselect All">
</form>
</div><!-- End OutputBox-->
</div>
</div><!-- End Wrapper-->
</body>
</html>