knight/datahub
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[refactor,docs][xs]: indentation and text-wrap.

Browse Source
This commit is contained in:
Rufus Pollock
2012-04-04 10:53:50 +01:00
parent 76d709a1eb
commit 2b8f1bcf64
1 changed files with 142 additions and 119 deletions
Download Patch File Download Diff File Expand all files Collapse all files

257
index.html
View File

@@ -77,75 +77,85 @@
</div> </div>
</div> </div>
</div> </div>
<div class="container"><div class="row"> <div class="container">
<div class="span9"><div class="content"> <div class="row"><div class="span9"><div class="content">
<div class="page-header">
<h1>
Recline Data Explorer and Library<br />
<small>
A. Powerful data explorer using only javascript and html
<br />
B. Suite of data components - grid, graphing and data connectors
<br />
&mdash; All built on <a href="http://backbonejs.org/">Backbone</a></small>
</h1>
</div>
<p>Recline is two things:</p>
<ul>
<li>A Data Explorer combining a data grid, Google Refine-style data
transforms and visualizations all in lightweight javascript and html.</li>
<li>A simple but powerful library of extensible of data components - data
grid, graphing, and data connectors - which you can selectively use and
build on.</li>
</ul>
<p>The Explorer can be used standalone (just download and use) or can be
embedded into your own site. Recline builds on the powerful but lightweight
Backbone framework making it extremely easy to extend and adapt. The
library's modular design mean means you only have to take what you
need.</p>
<h2 id="features">Main Features</h2> <div class="page-header">
<ul> <h1>
<li>View and edit your data in a clean grid / table interface</li> Recline Data Explorer and Library<br />
<li>Bulk update/clean your data using an easy scripting UI</li> <small>
<li>Easily extensible with new Backends so you can connect to your A. Powerful data explorer using only javascript and html
database or storage layer</li> <br />
<li>Visualize data</li> B. Suite of data components - grid, graphing and data connectors
<li>Open-source, pure javascript and designed for integration -- so it is <br />
easy to embed in other sites and applications</li> &mdash; All built on <a href="http://backbonejs.org/">Backbone</a></small>
<li>Built on the simple but powerful <a </h1>
href="http://documentcloud.github.com/backbone/">Backbone</a> giving a </div>
clean and robust design which is easy to extend</li>
<li>Properly designed model with clean separation of data and presentation</li>
<li>Componentized design means you use only what you need</li>
</ul>
<h2>Screenshots</h2> <p>Recline is two things:</p>
<p><a href="app/"><img src="http://farm8.staticflickr.com/7020/6847468031_0f474de5f7_b.jpg" alt="Recline Data Explorer Screenshot" style="width: 700px; display: block; margin-bottom: 30px;" /></a></p>
<h2 id="demo">Demo</h2> <ul>
<p><a href="app/index.html" class="btn">For demo see the Data Explorer &raquo;</a></p> <li>A Data Explorer combining a data grid, Google Refine-style data
transforms and visualizations all in lightweight javascript and html.</li>
<li>A simple but powerful library of extensible of data components - data
grid, graphing, and data connectors - which you can selectively use and build
on.</li>
</ul>
<h2 id="docs">Data Explorer Documentation</h2> <p>The Explorer can be used standalone (just download and use) or can be
<p>Usage instructions are built into the <a href="app/">Data Explorer</a> embedded into your own site. Recline builds on the powerful but lightweight
itself so no specific additional documentation is provided on usage.</p> Backbone framework making it extremely easy to extend and adapt. The library's
<p>To embed the data explorer in another site you can use a simple iframe modular design mean means you only have to take what you need.</p>
in your web page:</p>
<textarea class="span6">&lt;iframe src="http://okfnlabs.org/recline/app/" width="100%"&gt;&lt;/iframe&gt;</textarea> <h2 id="features">Main Features</h2>
<p>Alternatively, you can initialize the explorer yourself from javascript. To see how <ul>
to do this just take at look at the Explorer's initialization javascript <li>View and edit your data in a clean grid / table interface</li>
in: <a href="app/js/app.js">app.js</a>.</p> <li>Bulk update/clean your data using an easy scripting UI</li>
<li>Easily extensible with new Backends so you can connect to your
database or storage layer</li>
<li>Visualize data</li>
<li>Open-source, pure javascript and designed for integration -- so it is
easy to embed in other sites and applications</li>
<li>Built on the simple but powerful <a
href="http://documentcloud.github.com/backbone/">Backbone</a> giving a
clean and robust design which is easy to extend</li>
<li>Properly designed model with clean separation of data and presentation</li>
<li>Componentized design means you use only what you need</li>
</ul>
<h2>Screenshots</h2>
<p><a href="app/"><img src="http://farm8.staticflickr.com/7020/6847468031_0f474de5f7_b.jpg" alt="Recline Data Explorer Screenshot" style="width: 700px; display: block; margin-bottom: 30px;" /></a></p>
<h2 id="demo">Demo</h2>
<p><a href="app/index.html" class="btn">For demo see the Data Explorer &raquo;</a></p>
<h2 id="docs">Data Explorer Documentation</h2>
<p>Usage instructions are built into the <a href="app/">Data Explorer</a>
itself so no specific additional documentation is provided on usage.</p>
<p>To embed the data explorer in another site you can use a simple iframe in
your web page:</p>
<textarea class="span6">&lt;iframe src="http://okfnlabs.org/recline/app/" width="100%"&gt;&lt;/iframe&gt;</textarea>
<p>Alternatively, you can initialize the explorer yourself from javascript. To
see how to do this just take at look at the Explorer's initialization
javascript in: <a href="app/js/app.js">app.js</a>.</p>
<h2 id="docs">Library Documentation</h2> <h2 id="docs">Library Documentation</h2>
<h3 id="docs-using">Examples</h3> <h3 id="docs-using">Examples</h3>
<p><strong>Note:</strong> A quick read through of the Concepts section will
likely be useful in understanding the details of the examples.</p> <p><strong>Note:</strong> A quick read through of the Concepts section will
<p><strong>Note</strong>: for all the following examples you should have likely be useful in understanding the details of the examples.</p>
included relevant Recline dependencies.</p>
<h4>Simple in-memory dataset.</h4> <p><strong>Note</strong>: for all the following examples you should have
<pre> included relevant Recline dependencies.</p>
<h4>Simple in-memory dataset.</h4>
<pre>
// Some data you have // Some data you have
// Your data must be in the form of list of documents / rows // Your data must be in the form of list of documents / rows
// Each document/row is an Object with keys and values // Each document/row is an Object with keys and values
@@ -170,7 +180,7 @@ var explorer = recline.View.DataExplorer({
Backbone.history.start(); Backbone.history.start();
</pre> </pre>
<h4>Creating a Dataset Explicitly with a Backend</h4> <h4>Creating a Dataset Explicitly with a Backend</h4>
<pre> <pre>
// Backend can be an instance or string id for a backend in the // Backend can be an instance or string id for a backend in the
// recline.Model.backends registry // recline.Model.backends registry
@@ -192,66 +202,79 @@ var dataset = recline.Model.Dataset({
); );
</pre> </pre>
<h3 id="docs-concepts">Concepts and Structure</h3> <h3 id="docs-concepts">Concepts and Structure</h3>
<p>Recline has a simple structure layered on top of the basic Model/View
distinction inherent in Backbone.</p>
<p><strong>Models</strong>: there are two main model objects:</p> <p>Recline has a simple structure layered on top of the basic Model/View
<ul> distinction inherent in Backbone.</p>
<li><a href="docs/model.html#section-2">Dataset</a>: represents the dataset. Holds dataset info and a pointer to list of data items (Documents in our terminology) which it can load from the relevant Backend.</li>
<li><a href="docs/model.html#section-4">Document</a>: an individual data item (e.g. a row from a relational database or a spreadsheet, a document from from a document DB like CouchDB or MongoDB).</li>
</ul>
<p>More detail of how these work can be found in the <a href="docs/model.html">Model source docs</a>.</p>
<p><strong>Backends</strong> connect Dataset and Documents to data <p><strong>Models</strong>: there are two main model objects:</p>
from a specific 'Backend' data source. They provide methods for loading and <ul>
saving Datasets and individuals Documents as well as for bulk loading via a <li><a href="docs/model.html#section-2">Dataset</a>: represents the dataset.
query API and doing bulk transforms on the backend.</p> Holds dataset info and a pointer to list of data items (Documents in our
<p>A template Base class can be found <a href="docs/backend/base.html">in terminology) which it can load from the relevant Backend.</li>
the Backend base module of the source docs</a>. It documents both the <li><a href="docs/model.html#section-4">Document</a>: an individual data item
relevant methods a Backend must have and (optionally) provides a base (e.g. a row from a relational database or a spreadsheet, a document from from
'class' for inheritance. You can also find detailed examples of backend a document DB like CouchDB or MongoDB).</li>
implementations in the source documentation below.</p> </ul>
<p><strong>Views</strong>: complementing the model are various Views (you can also easily write your own). Each view holds a pointer to a Dataset:</p> <p>More detail of how these work can be found in the <a
<ul> href="docs/model.html">Model source docs</a>.</p>
<li>DataExplorer: the parent view which manages the overall app and sets up sub views.</li>
<li>DataGrid: the data grid view.</li>
<li>FlotGraph: a simple graphing view using <a href="http://code.google.com/p/flot/">Flot</a>.</li>
</ul>
<h3 id="docs-source">Source Docs (via Docco)</h3> <p><strong>Backends</strong> connect Dataset and Documents to data from a
<ul> specific 'Backend' data source. They provide methods for loading and saving
<li><a href="docs/model.html">Models</a></li> Datasets and individuals Documents as well as for bulk loading via a query API
<li><a href="docs/view.html">DataExplorer View (plus common view code)</a></li> and doing bulk transforms on the backend.</p>
<li><a href="docs/view-grid.html">DataGrid View</a></li>
<li><a href="docs/view-flot-graph.html">Graph View (based on Flot)</a></li>
<li><a href="docs/backend/base.html">Backend: Base (base class providing a template for backends)</a></li>
<li><a href="docs/backend/memory.html">Backend: Memory (local data)</a></li>
<li><a href="docs/backend/elasticsearch.html">Backend: ElasticSearch</a></li>
<li><a href="docs/backend/dataproxy.html">Backend: DataProxy (CSV and XLS on the Web)</a></li>
<li><a href="docs/backend/gdocs.html">Backend: Google Docs (Spreadsheet)</a></li>
</ul>
<h2 id="tests">Tests</h2> <p>A template Base class can be found <a href="docs/backend/base.html">in the
<p><a href="test/index.html">Run the tests online</a>.</p> Backend base module of the source docs</a>. It documents both the relevant
methods a Backend must have and (optionally) provides a base 'class' for
inheritance. You can also find detailed examples of backend implementations in
the source documentation below.</p>
<h2 id="history">History</h2> <p><strong>Views</strong>: complementing the model are various Views (you can
<p>Max Ogden was developing Recline as the frontend data browser and editor also easily write your own). Each view holds a pointer to a Dataset:</p>
for his <a href="http://datacouch.com/">http://datacouch.com/</a> project. <ul>
Meanwhile, Rufus Pollock and the <a href="http://ckan.org/">CKAN team</a> <li>DataExplorer: the parent view which manages the overall app and sets up
at the <a href="http://okfn.org/">Open Knowledge Foundation</a> had been sub views.</li>
working on a <a href="http://github.com/okfn/dataexplorer">Data <li>DataGrid: the data grid view.</li>
Explorer</a> for use in <a href="http://thedatahub.org">the DataHub</a> <li>FlotGraph: a simple graphing view using <a
and <a href="http://ckan.org/">CKAN software</a>.</p> href="http://code.google.com/p/flot/">Flot</a>.</li>
<p>When they met up, they realized that they were pretty much working on </ul>
the same thing and so decided to join forces to produce the new Recline
Data Explorer.</p> <h3 id="docs-source">Source Docs (via Docco)</h3>
<p>The new project forked off <a <ul>
href="https://github.com/maxogden/recline">Max's original recline <li><a href="docs/model.html">Models</a></li>
codebase</a> combining some portions of the <a <li><a href="docs/view.html">DataExplorer View (plus common view code)</a></li>
href="http://github.com/okfn/dataexplorer">original Data Explorer</a>. <li><a href="docs/view-grid.html">DataGrid View</a></li>
However, it has been rewritten from the ground up using Backbone.</p> <li><a href="docs/view-flot-graph.html">Graph View (based on Flot)</a></li>
<li><a href="docs/backend/base.html">Backend: Base (base class providing a template for backends)</a></li>
<li><a href="docs/backend/memory.html">Backend: Memory (local data)</a></li>
<li><a href="docs/backend/elasticsearch.html">Backend: ElasticSearch</a></li>
<li><a href="docs/backend/dataproxy.html">Backend: DataProxy (CSV and XLS on the Web)</a></li>
<li><a href="docs/backend/gdocs.html">Backend: Google Docs (Spreadsheet)</a></li>
</ul>
<h2 id="tests">Tests</h2>
<p><a href="test/index.html">Run the tests online</a>.</p>
<h2 id="history">History</h2>
<p>Max Ogden was developing Recline as the frontend data browser and editor for
his <a href="http://datacouch.com/">http://datacouch.com/</a> project.
Meanwhile, Rufus Pollock and the <a href="http://ckan.org/">CKAN team</a> at
the <a href="http://okfn.org/">Open Knowledge Foundation</a> had been working
on a <a href="http://github.com/okfn/dataexplorer">Data Explorer</a> for use in
<a href="http://thedatahub.org">the DataHub</a> and <a
href="http://ckan.org/">CKAN software</a>.</p>
<p>When they met up, they realized that they were pretty much working on the
same thing and so decided to join forces to produce the new Recline Data
Explorer.</p>
<p>The new project forked off <a
href="https://github.com/maxogden/recline">Max's original recline
codebase</a> combining some portions of the <a
href="http://github.com/okfn/dataexplorer">original Data Explorer</a>.
However, it has been rewritten from the ground up using Backbone.</p>
</div></div> <!-- /span9 /content --> </div></div> <!-- /span9 /content -->
<div class="span3 sidebar"> <div class="span3 sidebar">