-
Notifications
You must be signed in to change notification settings - Fork 2
Expand file tree
/
Copy pathhome.html
More file actions
140 lines (120 loc) · 6.79 KB
/
Copy pathhome.html
File metadata and controls
140 lines (120 loc) · 6.79 KB
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
<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<head>
<!-- add stylesheets here-->
<link href="css/styling.css" rel="stylesheet">
<!--- External libs -->
<script src="https://d3js.org/d3.v5.min.js"></script>
<script src="https://d3js.org/topojson.v1.min.js"></script>
<script src="https://d3js.org/d3-geo-projection.v2.min.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.10.3/babel.min.js'></script>
<script src="js/lib/d3-tip.js"></script>
</head>
<body onload="controller()">
<link rel="stylesheet" href="css/w3.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<!-- Navbar (sit on top) -->
<div class="w3-top">
<ul class="w3-navbar w3-cyan w3-wide w3-padding-0 w3-card-2 ">
<font color="white" font-family = "Impact, Charcoal, sans-serif">
<h3><img src = "./data/logo.png" width="70px" height="40px" class="w3-margin-bot-logo">UNESCO Data Exploration Tool</h3></font>
</ul>
</div>
<!-- Selector for years -->
<div style="width:100%; display:inline;" class = "w3-margin-top-custom raisedbox ">
<button id="viewWorldButton" type="button" class="btn btn-primary btn-sm w3-margin-left-custom " style="display:none">Return to World View</button>
<select style="width:200px;" class = "w3-select w3-margin-left-custom w3-margin-top-custom1" id="factor">
<option value="GER.02,SDG_DATA_NATIONAL">Gross enrolment ratio, pre-primary</option>
<!-- <option value="200101,DEM_DATA_NATIONAL">Population</option> EXAMPLE -->
</select>
<select style="width:200px;" class = "w3-select w3-margin-left-custom w3-margin-top-custom1" id="year">
<option value="2018">2018</option>
<option selected="selected" value="2017">2017</option>
<option value="2016">2016</option>
<option value="2015">2015</option>
<option value="2014">2014</option>
<option value="2013">2013</option>
<option value="2012">2012</option>
<option value="2011">2011</option>
<option value="2010">2010</option>
<option value="2009">2009</option>
<option value="2008">2008</option>
<option value="2007">2007</option>
<option value="2006">2006</option>
<option value="2005">2005</option>
<option value="2004">2004</option>
<option value="2003">2003</option>
<option value="2002">2002</option>
<option value="2001">2001</option>
<option value="2000">2000</option>
</select>
<select style="width:200px;display:none" class = "w3-select w3-margin-left-custom w3-margin-top-custom1" id="view">
<option value="World">World</option>
<option value="Region">Region</option>
<option value="Country">Country</option>
</select>
</div>
</div>
<!-- Holds the left and right divs -->
<div style="width: 100%; clear:both; display:inline-block; top:800px">
<!-- Left div -->
<div class="w3-card-4 " >
<div style="width:100%;visibility:visible;display:block;padding-top: 150px">
<div id="dataInfo" style="margin-left:30px;" class="w3-center">
Visualize trends in the UNdata. <br>
<Strong>World map view:</Strong> Clicking on a colored country in the world map visualization will lead you to the regional comparison visualization.<br>
<Strong>Regional comparisons:</Strong> Compares countries in a region based on a given UNESCO variable in a bar chart form. Clicking on a bar will lead you to the country view.<br>
<Strong>Country view:</Strong> Shows how the UNESCO variable has changed over time for each country.<br>
<Strong>Correlation graph:</Strong> Provides an overview of the variables that most significantly affect or correlate with the target variable.<br>
</div>
<h1 class="w3-margin-top fontCustom w3-margin-top w3-center" id="head-title">Global Distribution</h1>
<h3 class="w3-margin-top w3-center" id="sub-title"></h3>
<div class="lastLegend firstDiv">
<!--We mess with the below svg for our drilldowns -->
<svg id="worldMap" preserveAspectRatio="xMidYMid" viewBox="0 -80 1150 650"></svg>
<svg id="region" preserveAspectRatio="xMidYMid" style="display:block;margin:auto" ></svg> <!--TODO add regions-->
<svg id="country" preserveAspectRatio="xMidYMid" style="display:block;margin:auto"></svg> <!-- TODO add country-->
</div>
<div class="w3-margin-left w3-padding-left"><i>Data courtesy of <a href="http://data.uis.unesco.org/" target="_blank">UNESCO</a>, retrieved 3/20/2020</i></div>
</div>
</div>
<!-- Right div -->
<div class="w3-card-4" style="margin-bottom:20px">
<div style="width:100%;visibility:visible;display:block;">
<h5 class="w3-center w3-margin-top fontTitleSmall"></h5>
<div id="grid" class="w3-padding-left w3-padding-top w3-center"></div>
<h5 class="w3-center w3-margin-top fontTitleSmall"> Trends and Correlation between Indicators</h5>
<!--Shubhi's idea here? -->
<div id="selector"></div>
<svg id="correlationChart"></svg>
<svg id="scatterChart" ></svg>
</div>
</div>
</div>
</body>
<!-- Remember to place javascript files we add below here -->
<!-- The core Firebase JS SDK is always required and must be listed first -->
<!-- TODO: Add SDKs for Firebase products that you want to use
https://firebase.google.com/docs/web/setup#available-libraries -->
<script src="https://www.gstatic.com/firebasejs/7.14.0/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.14.0/firebase-firestore.js"></script>
<!-- Initialize Firebase -->
<!-- add js libraries here-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.10.0/d3.min.js"></script>
<script src="js/lib/jquery-3.1.1.min.js"></script>
<script src="js/lib/jquery-ui.min.js"></script>
<script src="js/lib/topojson.js"></script>
<!-- <script src="http://d3js.org/d3.v3.min.js"></script> -->
<!-- <script src="http://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js"></script> -->
<!--script src="js/bootstrap.min.js"></script-->
<script src="js/lib/queue.v1.min.js"></script>
<!-- add custom js files here -->
<script src="js/correlation.js"></script>
<!-- add custom js files here -->
<script src="js/world-map.js"></script>
<script src="js/controller.js"></script>
<script src="js/linechart.js"></script>
<script src="js/bargraph.js"></script>
<script src="js/ui.js"></script>
</html>