-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathindex.html
243 lines (227 loc) · 10.6 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
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
241
242
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Recline Data Explorer</title>
<meta name="description" content="The Recline Data Explorer">
<meta name="author" content="Rufus Pollock">
<!-- Le HTML5 shim, for IE6-8 support of HTML elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link rel="stylesheet" href="vendor/recline/vendor/bootstrap/2.0.2/css/bootstrap.css">
<link rel="stylesheet" href="vendor/recline/vendor/leaflet/0.4.4/leaflet.css">
<!--[if lte IE 8]>
<link rel="stylesheet" href="vendor/recline/vendor/leaflet/0.4.4/leaflet.ie.css" />
<![endif]-->
<link rel="stylesheet" href="vendor/recline/vendor/leaflet.markercluster/MarkerCluster.css">
<link rel="stylesheet" href="vendor/recline/vendor/leaflet.markercluster/MarkerCluster.Default.css">
<link rel="stylesheet" href="vendor/recline/vendor/slickgrid/2.0.1/slick.grid.css">
<link rel="stylesheet" href="vendor/recline/vendor/timeline/20120520/css/timeline.css">
<!-- Recline CSS components -->
<link rel="stylesheet" href="vendor/recline/dist/recline.css">
<!-- /Recline CSS components -->
<!-- Custom CSS for the Data Explorer Online App -->
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="vendor/recline/vendor/bootstrap/2.0.2/css/bootstrap-responsive.css">
<!-- 3rd party JS libraries -->
<script type="text/javascript" src="vendor/recline/vendor/jquery/1.7.1/jquery.js"></script>
<script type="text/javascript" src="vendor/recline/vendor/underscore/1.1.6/underscore.js"></script>
<script type="text/javascript" src="vendor/recline/vendor/backbone/0.5.1/backbone.js"></script>
<script type="text/javascript" src="vendor/recline/vendor/moment/1.6.2/moment.js"></script>
<script type="text/javascript" src="vendor/recline/vendor/flotr2/flotr2.js"></script>
<script type="text/javascript" src="vendor/recline/vendor/mustache/0.5.0-dev/mustache.js"></script>
<script type="text/javascript" src="vendor/recline/vendor/bootstrap/2.0.2/bootstrap.js"></script>
<script type="text/javascript" src="vendor/recline/vendor/leaflet/0.4.4/leaflet.js"></script>
<script type="text/javascript" src="vendor/recline/vendor/leaflet.markercluster/leaflet.markercluster.js"></script>
<script type="text/javascript" src="vendor/recline/vendor/slickgrid/2.0.1/jquery-ui-1.8.16.custom.min.js"></script>
<script type="text/javascript" src="vendor/recline/vendor/slickgrid/2.0.1/jquery.event.drag-2.0.min.js"></script>
<script type="text/javascript" src="vendor/recline/vendor/slickgrid/2.0.1/slick.grid.min.js"></script>
<script type="text/javascript" src="vendor/recline/vendor/timeline/20120520/js/timeline.js"></script>
<!-- recline library -->
<!-- in normal use would just the single recline.js library file. However, for testing it
is easier to reference individual files. See built.html for example using just recline.js -->
<script type="text/javascript" src="vendor/recline/dist/recline.js"></script>
<!-- non-library javascript specific to this demo -->
<script type="text/javascript" src="js/app.js"></script>
</head>
<body>
<div class="recline-app">
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container-fluid">
<a class="brand" href="#">Recline Data Explorer</a>
<ul class="nav pull-right">
<li class="dropdown">
<a data-toggle="dropdown" class="dropdown-toggle">
Load Data <b class="caret"></b></a>
<ul class="dropdown-menu js-load">
<li>
<a href="#" class="js-load-dialog-url" data-type="gdocs" data-help="You must have published your spreadsheet to load it here (File Menu - Publish to the Web)">Load from Google Docs Spreadsheet</a>
</li>
<li>
<a href="#" class="js-load-dialog-url" data-type="datahub" data-help="The link to the Dataset Data Resource on the DataHub to load from - note that the resource must have its Data API enabled">Load from the DataHub</a>
</li>
<li>
<a href="#" class="js-load-dialog-url" data-type="csv" data-help="Provide the link to the CSV file online">Load from CSV online</a>
</li>
<li>
<a href="#" class="js-load-dialog-url" data-type="excel" data-help="Provide the link to the Excel file online">Load from Excel online</a>
</li>
<li>
<a href="#" class="js-load-dialog-url" data-type="elasticsearch" data-help="Provide the link to the ElasticSearch endpoint (either an index or a type/table">Load from ElasticSearch</a>
</li>
<li class="divider"></li>
<li>
<a data-toggle="modal" href=".js-load-dialog-file">Load from CSV on disk</a>
</li>
</ul>
</li>
<li>
<a href=".js-share-and-embed-dialog" data-toggle="modal">
Share and Embed
<i class="icon-share icon-white"></i>
</a>
</li>
<li>
<a href=".js-settings" data-toggle="modal">
Settings
<i class="icon-cog icon-white" style="margin-top: 1px;"></i>
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="container-fluid">
<div class="content">
<div class="page-home backbone-page">
<div class="hero-unit">
<h1>Welcome to the Recline Data Explorer</h1>
<p>Recline allows you to explore and work with data in your browser and then share with others</p>
</div>
<div class="row-fluid">
<div class="span4">
<div class="well">
<h3>View the demo</h3>
<p>Try out the demo using a local example dataset.</p>
<p><a class="btn btn-primary" href="?url=demo#explorer">View the demo dataset »</a></p>
</div>
</div>
<div class="span4">
<div class="well">
<h3>Features</h3>
<ul>
<li>Data grid</li>
<li>Data editing including programmatic data transformation in javascript</li>
<li>Visualizations includes graphs and maps</li>
<li>Load and export from a variety of sources including online sources such as online Excel and CSV files, Google docs and
the <a href="http://datahub.io/">DataHub</a> and offline sources like CSV files on your local machine.</li>
<li>Use online or offline - because the app is built in pure javascript and html you can use it anywhere there's a modern web browser. Using offline is as easy and downloading this web page to your local machine.</li>
</ul>
</div>
</div>
<div class="span4">
<div class="well">
<h3>Get started</h3>
<p>Get started straight away for example by importing some data from an external source <strong>using the menu at the top right</strong> of this page.</p>
</div>
</div>
</div>
</div>
</div>
<div class="page-explorer backbone-page">
<div class="data-explorer-here"></div>
</div>
</div>
<!-- modals for menus -->
<div class="modal fade in js-load-dialog-url" style="display: none;">
<div class="modal-header">
<a class="close" data-dismiss="modal">×</a>
<h3>Load from URL</h3>
</div>
<div class="modal-body">
<form class="js-load-url">
<div class="control-group">
<div class="controls">
<input type="text" name="source" class="span5" placeholder="URL to data source" />
<p class="help-block"></p>
<input name="backend_type" style="display: none;" />
</div>
</div>
<button type="submit" class="btn btn-primary">Load »</button>
</form>
</div>
</div>
<div class="modal fade in js-load-dialog-file" style="display: none;">
<div class="modal-header">
<a class="close" data-dismiss="modal">×</a>
<h3>Load from File</h3>
</div>
<div class="modal-body">
<form class="form-horizontal">
<div class="control-group">
<label class="control-label">File</label>
<div class="controls">
<input type="file" name="source" />
</div>
</div>
<div class="control-group">
<label class="control-label">Separator</label>
<div class="controls">
<input type="text" name="separator" value="," class="spam1"/>
</div>
</div>
<div class="control-group">
<label class="control-label">Text delimiter</label>
<div class="controls">
<input type="text" name="delimiter" value='"' />
</div>
</div>
<div class="control-group">
<label class="control-label">Encoding</label>
<div class="controls">
<input type="text" name="encoding" value="UTF-8" />
</div>
</div>
<div class="form-actions">
<button type="submit" class="btn btn-primary">Load »</button>
</div>
</form>
</div>
</div>
<div class="modal fade in js-share-and-embed-dialog" style="display: none;">
<div class="modal-header">
<a class="close" data-dismiss="modal">×</a>
<h3>Share and Embed</h3>
</div>
<div class="modal-body">
<h4>Sharable Link to current View</h4>
<textarea class="view-link" style="width: 100%; height: 100px;"></textarea>
<h4>Embed this View</h4>
<textarea class="view-embed" style="width: 100%; height: 200px;"></textarea>
</div>
</div>
<div class="modal fade in js-settings" style="display: none;">
<div class="modal-header">
<a class="close" data-dismiss="modal">×</a>
<h3>Settings</h3>
</div>
<div class="modal-body">
<form class="form-horizontal">
<div class="control-group">
<label class="control-label">DataHub API Key</label>
<div class="controls">
<input type="text" name="datahub_api_key" value="" />
<p class="help-block"><strong>Getting your API key:</strong> Register/Login to <a href="http://datahub.io/">http://datahub.io/</a> and then visit your user home page (click on the link at the top right). On your home page your API key is located at the top of the page in the section showing your main user details.</p>
</div>
</div>
<div class="form-actions">
<button type="submit" class="btn btn-primary">Save »</button>
</div>
</form>
</div>
</div>
</div>
</body>
</html>