263 lines
12 KiB
HTML
263 lines
12 KiB
HTML
<!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 and Max Ogden">
|
||
|
||
<!-- 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/bootstrap/2.0.2/css/bootstrap.css">
|
||
<link rel="stylesheet" href="../vendor/leaflet/0.3.1/leaflet.css">
|
||
<!--[if lte IE 8]>
|
||
<link rel="stylesheet" href="../vendor/leaflet/0.3.1/leaflet.ie.css" />
|
||
<![endif]-->
|
||
<link rel="stylesheet" href="../vendor/slickgrid/2.0.1/slick.grid.css">
|
||
<link rel="stylesheet" href="../vendor/timeline/20120520/css/timeline.css">
|
||
|
||
<!-- Recline CSS components -->
|
||
<link rel="stylesheet" href="../css/grid.css">
|
||
<link rel="stylesheet" href="../css/slickgrid.css">
|
||
<link rel="stylesheet" href="../css/graph.css">
|
||
<link rel="stylesheet" href="../css/map.css">
|
||
<link rel="stylesheet" href="../css/multiview.css">
|
||
<!-- /Recline CSS components -->
|
||
|
||
<!-- Custom CSS for the Data Explorer Online App -->
|
||
<link rel="stylesheet" href="../css/site/site.css">
|
||
<link rel="stylesheet" href="style/demo.css">
|
||
|
||
<link rel="stylesheet" href="../vendor/bootstrap/2.0.2/css/bootstrap-responsive.css">
|
||
|
||
<!-- 3rd party JS libraries -->
|
||
<script type="text/javascript" src="../vendor/jquery/1.7.1/jquery.js"></script>
|
||
<script type="text/javascript" src="../vendor/underscore/1.1.6/underscore.js"></script>
|
||
<script type="text/javascript" src="../vendor/backbone/0.5.1/backbone.js"></script>
|
||
<script type="text/javascript" src="../vendor/moment/1.6.2/moment.js"></script>
|
||
<script type="text/javascript" src="../vendor/jquery.flot/0.7/jquery.flot.js"></script>
|
||
<script type="text/javascript" src="../vendor/mustache/0.5.0-dev/mustache.js"></script>
|
||
<script type="text/javascript" src="../vendor/bootstrap/2.0.2/bootstrap.js"></script>
|
||
<script type="text/javascript" src="../vendor/leaflet/0.3.1/leaflet.js"></script>
|
||
<script type="text/javascript" src="../vendor/slickgrid/2.0.1/jquery-ui-1.8.16.custom.min.js"></script>
|
||
<script type="text/javascript" src="../vendor/slickgrid/2.0.1/jquery.event.drag-2.0.min.js"></script>
|
||
<script type="text/javascript" src="../vendor/slickgrid/2.0.1/slick.grid.min.js"></script>
|
||
<script type="text/javascript" src="../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="../src/costco.js"></script>
|
||
<script type="text/javascript" src="../src/model.js"></script>
|
||
<script type="text/javascript" src="../src/backend/base.js"></script>
|
||
<script type="text/javascript" src="../src/backend/memory.js"></script>
|
||
<script type="text/javascript" src="../src/backend/dataproxy.js"></script>
|
||
<script type="text/javascript" src="../src/backend/elasticsearch.js"></script>
|
||
<script type="text/javascript" src="../src/backend/gdocs.js"></script>
|
||
<script type="text/javascript" src="../src/backend/csv.js"></script>
|
||
|
||
<script type="text/javascript" src="../src/view-grid.js"></script>
|
||
<script type="text/javascript" src="../src/view-slickgrid.js"></script>
|
||
<script type="text/javascript" src="../src/view-transform-dialog.js"></script>
|
||
<script type="text/javascript" src="../src/view-graph.js"></script>
|
||
<script type="text/javascript" src="../src/view-map.js"></script>
|
||
<script type="text/javascript" src="../src/view-timeline.js"></script>
|
||
<script type="text/javascript" src="../src/widget.pager.js"></script>
|
||
<script type="text/javascript" src="../src/widget.queryeditor.js"></script>
|
||
<script type="text/javascript" src="../src/widget.filtereditor.js"></script>
|
||
<script type="text/javascript" src="../src/widget.facetviewer.js"></script>
|
||
<script type="text/javascript" src="../src/view.multiview.js"></script>
|
||
|
||
<!-- non-library javascript specific to this demo -->
|
||
<script type="text/javascript" src="js/app.js"></script>
|
||
<!-- for demo dataset -->
|
||
<script type="text/javascript" src="../test/base.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="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>
|
||
|