-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy pathindex.html
More file actions
200 lines (184 loc) · 9.96 KB
/
Copy pathindex.html
File metadata and controls
200 lines (184 loc) · 9.96 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
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
<!DOCTYPE html>
<meta charset="UTF-8">
<!--
---Copyright 2015 Stateware Team: William Bittner, Joshua Crafts,
---Nicholas Denaro, Dylan Fetch, Paul Jang, Arun Kumar, Drew Lopreiato,
---Kyle Nicholson, Emma Roudabush, Berty Ruan, Vanajam Soni
---
---This file is part of Dav3i.
---
---Dav3i is free software: you can redistribute it and/or modify
---it under the terms of the GNU General Public License as published by
---the Free Software Foundation, either version 3 of the License, or
---(at your option) any later version.
---
---Dav3i is distributed in the hope that it will be useful,
---but WITHOUT ANY WARRANTY; without even the implied warranty of
---MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
---GNU General Public License for more details.
---
---You should have received a copy of the GNU General Public License
---along with Dav3i. If not, see <http://www.gnu.org/licenses/>.
-->
<!-- File Name: index.html
Description: Web interface for data visualization
Date Created: 2/19/2015
Contributors: Emma Roudabush, Vanajam Soni, Paul Jang, Joshua Crafts, Nicholas Denaro, Arun Kumar
Date Last Modified: 4/23/2015
Last Modified By: Kyle Nicholson
Dependencies: style.css, loading_script.js, lookup_table.js, map.js, data.js
Additional Notes: N/A
-->
<html>
<head>
<title>DAV3I</title>
<!-- begin link module -->
<!-- begin remote linkages -->
<link href='http://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'/>
<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300' rel='stylesheet' type='text/css'/>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<!-- end remote linkages -->
<!-- begin external css -->
<link rel="stylesheet" href="GUI/jvectormap/jquery-jvectormap-2.0.1.css" type="text/css" media="screen"/>
<!-- end external css -->
<!-- begin app-wide css -->
<link rel="stylesheet" type="text/css" href="res/reset.css"/>
<!-- end app-wide css -->
<!-- begin page-specific css -->
<link rel="stylesheet" type="text/css" href="res/style.css"/>
<!-- end page-specific css -->
<!-- begin external libraries -->
<script type="text/javascript" src="GUI/jvectormap/jquery.js"></script>
<script type="text/javascript" src="GUI/jvectormap/jquery-jvectormap-2.0.1.min.js"></script>
<script type="text/javascript" src="GUI/jvectormap/jquery-jvectormap-world-mill-en.js"></script>
<script type="text/javascript" src="GUI/wnumb-1.0.0/wNumb.js"></script>
<!-- end external libraries -->
<!-- begin internal libraries -->
<script type="text/javascript" src="GUI/data.js"></script>
<script type="text/javascript" src="GUI/data_pull.js"></script>
<script type="text/javascript" src="GUI/settings.js"></script>
<script type="text/javascript" src="GUI/graph.js"></script>
<script type="text/javascript" src="GUI/dynamic_markup.js"></script>
<!-- end internal libraries -->
<!-- begin page-specific scripts -->
<script type="text/javascript" src="GUI/map.js"></script>
<!-- end page-specific scripts -->
<!-- begin inline scripts -->
<script type="text/javascript">
google.load('visualization', '1.0', {'packages':['corechart']});
</script>
<!-- end inline scripts -->
<!-- end link module -->
</head>
<body>
<div class="loading-screen">
<center>
<img src="res/logo.png" alt="Logo"/>
<br>
<h1 class="open-sans">Disease and Virus Vaccination Visualization Interface<h1>
<br>
<div class="spinner">
<div class="bounce1"></div>
<div class="bounce2"></div>
<div class="bounce3"></div>
</div>
<button onclick="SwitchToMain()" class="begin">Begin</button>
</center>
</div>
<div class="settings-black" onclick="ApplyAndClose()">
</div>
<div class="help-black" onclick="CloseHelp()">
</div>
<div class="settings-screen">
<h1 style="position: relative; top: 5%;">Settings</h1>
<div class="graph-choice">
<h3>Graph Type</h3>
<form action="">
<input id="graph-regional" type="radio" onclick="SetGraphType(0)" name="graphType" value="0">Regional</input><br>
<input id="graph-combined" type="radio" onclick="SetGraphType(1)" name="graphType" value="1">Combined</input><br>
<input id="graph-whole" type="radio" onclick="SetGraphType(2)" name="graphType" value="2">Whole Selection</input><br>
</form>
</div>
<div class="timespan">
<h3>Timespan Selection</h3>
<table class="settings-timespans-table">
<tr><td class="settings-timespans-text">Start Year: </td><td class="settings-timespans-boxes"><input id="year-range-start" class="year-selector" maxlength="4" size="4" required></input></td><td id="year-range-start-error" style="cursor: default;"> </td></tr>
<tr><td class="settings-timespans-text">End Year: </td><td class="settings-timespans-boxes"><input id="year-range-end" class="year-selector" maxlength="4" size="4" required></input></td><td id="year-range-end-error" style="cursor: default;"> </td></tr>
<tr><td class="settings-timespans-text">Heatmap Year: </td><td class="settings-timespans-boxes"><input id="heatmap-year" class="year-selector" maxlength="4" size="4" required></input></td><td id="heatmap-year-error" style="cursor: default;"> </td></tr>
</table>
</div>
<div class="vacc-choice">
<h3>Statistic Heat Mapped When Integrated Stat Selected</h3>
<form action="">
<input id="int0" type="radio" onclick="SetIntHms(0)" name="graphType" value="0">Stat 1</input>
<input id="int1" type="radio" onclick="SetIntHms(1)" name="graphType" value="1">Stat 2</input>
<input id="int2" type="radio" onclick="SetIntHms(2)" name="graphType" value="2">Stat 3</input>
</form>
</div>
<div class="buttons">
<button id="apply-button" class="flat-button" onclick="ApplySettings()">Apply</button>
<button id="ok-button" class="flat-button" onclick="ApplyAndClose()">OK</button>
<button id="close-button" class="flat-button" onclick="CancelSettings()">Cancel</button>
</div>
</div>
<div class="help-screen">
<div class="scrollbar-hover" style="overflow-y: scroll; height: 85%;">
<h1>Help</h1>
<h3>Graphs</h3>
<p>Graph type may be switched by going to the settings </br> Clicking on a graph expands/shrinks it.</p>
<h4>Regional</h4>
<p>This displays graphs seperately per country.</p>
<h4>Combined</h4>
<p>This displays all countries on one graph.</p>
<h4>Whole Selection</h4>
<p>This displays a single graph with aggregate data.</p>
<h3>Heatmap</h3>
<p>The heatmap values can be changed by changing the current tab. </br>
The heatmap can be cleared of selection by clicking the button in </br>
the bottom left corner of the map.</p>
<h4>Vaccinations heatmap</h4>
<p>When the vaccinations stat tab is selected, the stat that the heatmap </br>
shows can be changed via the "stat for vaccinations heat map" selection </br>
area in the settings menu. You can choose from SIA, MCV1, and MCV2 to be</br>
to be shown by clicking the radio buttion to the left of your choice.</p>
</div>
<button id="close-help" class="flat-button" style="position: relative; top: 0" onclick="CloseHelp()">Close</button>
</div>
<div class="main-screen">
<section class="spacer">
</section>
<div class="control-panel">
<section class="settings">
<img class="logo" src="res/logo.png" alt="Logo"/>
<h1 class="open-sans" style="margin: 0">Measles Data Visualization</h1>
<button id="settings" class="flat-button" onclick="OpenSettings()">Settings</button>
<button id="help" class="flat-button" onclick="OpenHelp()">Help</button>
</section>
<section class="graph" id="graph">
<div>
<img src="res/arrow_left.png" width="22" height="22" id="scroll-left" class="graph-tab" onclick="RotateTabs(-1);" style="cursor: pointer;"></img>
<div id="tabsDiv" class="tabWrapper"></div>
<img src="res/arrow_right.png" width="22" height="22" id="scroll-right" class="graph-tab" onclick="RotateTabs(1);" style="cursor: pointer;"></img>
</div>
<div id="graphs">
</div>
</section>
<section class="expand">
<img src="res/arrow_right.png" id="expand" onclick="Expand()"/>
</section>
</div>
<div class="expand-black">
</div>
<div id="map-container">
<div id="map">
</div>
<button id="clear" class="flat-button" onclick>Clear Selection</button>
</div>
<div class="footer">
<p class="footer-text">Copyright <span onclick="teamPopup()" onmouseover="this.style.cursor='pointer'"><strong>Stateware Team</strong></span>. Licensed under version 3 of the <strong><a href="http://www.gnu.org/licenses/">GNU General Public License</a></strong>. Built using <strong><a href="http://jvectormap.com/">jVectorMap</a></strong> and <strong><a href ="https://developers.google.com/chart/">Google Charts</a></strong>. <strong><a href ="http://www.stateware.org/">Learn more about Stateware</a></strong></p>
<p onclick="bugPopup()" onmouseover="this.style.cursor='pointer'" class="bug-report"><strong>Report an issue</strong></p>
</div>
</div>
</body>
</html>