-
Notifications
You must be signed in to change notification settings - Fork 0
/
DataScatter.html
151 lines (134 loc) · 6.29 KB
/
DataScatter.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
<!DOCTYPE html>
<html>
<head>
<title>Data Scatterplot App</title>
<script src="assets/js/d3.v2.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.0.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.js"></script>
<script src="assets/js/DataScatter.js"></script>
<script src="assets/js/bootstrap.js"></script>
<script src="assets/js/bootstrapx-clickover.js"></script>
<script>$('rel["clickover"]').clickover();</script>
<link rel="icon" href="img/KBase_favicon.ico" type="image/x-icon">
<link type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables.css" rel="stylesheet" />
<link href="assets/css/bootstrap.css" rel="stylesheet">
<link href="assets/css/bootstrap-responsive.min.css" rel="stylesheet">
<link href="assets/css/identity.css" rel="stylesheet">
<link href="assets/css/kbase-common.css" rel="stylesheet">
<link type="text/css" rel="stylesheet" href="assets/css/DataScatter.css" />
<style type="text/css">
body {
/* padding to make room for the fixed nav bar,
modify in css as needed. */
padding-top: 60px;
}
</style>
</head>
<body>
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<a href="http://www.kbase.us/labs/"><img class="logo" src="assets/img/labs_icon.png" width="46"></a>
<a class="brand" href="index.html">Data Scatter</a>
<ul class="nav">
<li class=""><a role="button" data-toggle="modal" href="#uploadModal">Upload Data</a></li>
<li class=""><a role="button" data-toggle="modal" href="#" onclick="$('#loading').removeClass('hidden'); d3.json('assets/data/mr1.FitnessData.json', load_test_data)">Load Example Data</a></li>
</ul>
<ul class="nav" style="float:right;">
<li class=''><a role='button' data-toggle='modal' href='#settingsControl'>Settings</a></li>
<li><a>Sign In<span id="counter"></span></a></li>
</ul>
</div>
</div>
<div class="container">
<div class="row">
<div class="span9">
<div id="plotarea">
</div>
</div>
<div class="span3">
<ul class="nav nav-tabs" id="myTab">
<li class="active"><a href="#dataSets" data-toggle="tab">Data Sets</a></li>
<li><a href="#dataPointTags" data-toggle="tab">Tags</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="dataSets">
<table id="key" class="accordian">
</table>
</div>
<div class="tab-pane" id="dataPointTags">
<form class='form-horizontal'>
<input class="span3" type="text" id="inputTag" placeholder="tag name" data-provide="typeahead" autocomplete="off" onchange="check_tag()">
<textarea class="span3" rows="3" id="inputTagDataPointNames" placeholder="data point names..."></textarea>
<button id="addTagButton"class="btn btn-primary btn-block" type="button" onclick="addTag()">Add</button>
<table id="tagTable">
</table>
</div>
</div>
</div>
</div>
<div class="row">
<div id="dataPointsTableContainer" class="span12">
<table id="dataPointsTable">
</table>
</div>
</div>
<div class="row">
<div class="span12">
<div id="table">
</div>
</div>
</div>
<script>
//d3.json("mr1.FitnessData.json", KBScatterDraw);
//KBScatterDraw(data1);
</script>
</div>
<!-- Begin Data Entry Modal -->
<div id="uploadModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="uploadLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="uploadLabel">Data File Upload</h3>
</div>
<div class="modal-body">
<h5>File Formatting</h5>
<p>File must be a tab delimited text file, with rows as data points and columns as data sets. There should be only one header row with one column for data point names, one column for data point descriptions and the remaining columns for the data set names. Each data point row should have a unique name.</p>
<table class="table">
<tr>
<td>File</td><td><input type="file" id="dataFile" name="dataFile" /></td>
</tr>
<tr>
<td>Name Column#</td><td><input required="1" id="nameColumn" type="text" placeholder="1"/></td>
</tr>
<tr>
<td>Description Column#</td><td><input required="1" id="descriptionColumn" type="text" placeholder="2" /></td>
</tr>
<tr>
<td>Dataset Start Column#</td><td><input required="1" id="datasetStartColumn" type="text" placeholder="3" /></td>
</tr>
</table>
</div>
<div class="modal-footer">
<a href="#" class="close btn" data-dismiss="modal">Cancel</a>
<a href="#" class="btn btn-primary" onclick="processDataFile()">Save Changes</a>
</div>
</div>
<!-- Begin Settings Control modal -->
<div id='settingsControl' class='modal hide fade' tabindex='-1' role='dialog' aria-labelledby='settingsControlLabel' aria-hidden='true'>
<div class='modal-header'>
<button type='button' class='close' data-dismiss='modal' aria-hidden='true'>×</button>
<h3 id='settingsControlLabel'>Settings</h3>
</div>
<div class='modal-body'>
</div>
<div class='modal-footer'>
<a href='#' class='close btn' data-dismiss='modal'>Cancel</a>
<a href='#' class='btn btn-primary' >Save</a>
</div>
</div>
<!-- Begin tooltip div -->
<div id='tooltip' style="position: absolute; z-index: 10; visibility: hidden; opacity: 0.8; background-color: rgb(34, 34, 34); color: rgb(255, 255, 255); padding: 0.5em;">
</div>
<!-- Begin loading div -->
<div id='loading' class='hidden' style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 10; opacity: 0.8; background: rgb(34,34,34) url(assets/img/kbase_animated_logo.gif) no-repeat center center;"></div>
</body>
</html>