- Recline Data Explorer Data explorer and refinery all in pure Javascript + Recline Data Explorer Data explorer library and app all in pure Javascript
Recline combines a data grid, Google Refine-style data transforms
@@ -68,31 +68,81 @@
Main Features
- - Open-source (and heavy reuser of existing open-source libraries like
- Backbone)
- - Pure javascript (no Flash) and designed for integration -- so it is
- easy to embed in other sites and applications
- - View and edit your data in a clean grid interface
+ - View and edit your data in a clean grid / table interface
- Bulk update/clean your data using an easy scripting UI
- Easily extensible with new Backends so you can connect to your
database or storage layer
- Visualize data
+ - Pure javascript (no Flash) and designed for integration -- so it is
+ easy to embed in other sites and applications
+ - Open-source
+ - Built on Backbone - so
+ robust design and extremely easy to exend
+ - Properly designed model with clean separation of data and presentation
+ - Componentized design means you use only what you need
Demo
-
- - Demo
-
+
Downloads & Dependencies (Right-click, and use 'Save As')
- +Recline Current Version (v0.2) »
+Dependencies
+Javascript Libraries:
+-
+
- Jquery >= 1.6 +
- Underscore and Backbone (0.5.1) +
- JQuery Mustache +
- (Optional) JQuery Flot - for graphing +
CSS: the demo utilizes bootstrap but you can integrate with your own HTML and CSS. Data Explorer specific CSS can be found here in the repo: https://github.com/okfn/recline/tree/master/css.
Using It
-Check out the the Demo and view source. The - javascript you want for actual integration is in: app.js.
++// Note: you should have included the relevant JS libraries (and CSS) +// See above for dependencies -+Docs
+// Dataset is a Backbone model +var dataset = recline.Model.Dataset({ + id: 'my-id' + backend: { + // backend ID so we can look backend up in the registry (see below) + type: 'memory' + // other backend config (e.g. API url with which to communicate) + // this will usually be backend specific + ... + } +}); +// DataExplorer is a Backbone View +var explorer = recline.View.DataExplorer({ + model: dataset, + // you can specify any element to bind to in the dom + el: $('.data-explorer-here') +}); +// Start Backbone routing (if you want routing support) +Backbone.history.start(); +
More details and examples: see docs below and the Demo (hit view source). The javascript you want for + actual integration is in: app.js.
+ +Documentation
+Recline has a simple structure layered on top of the basic Model/View + distinction inherent in Backbone. There are the following three domain objects (all Backbone Models):
+-
+
- Dataset: 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. +
- Document: 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). +
- Backend: provides a way to get data from a specific 'Backend' data source. They provide methods for loading and saving Datasets and individuals Documents as well as for bulk loading via a query API and doing bulk transforms on the backend +
There are then various Views (you can easily write your own). Each view holds a pointer to a Dataset:
+-
+
- DataExplorer: the parent view which manages the overall app and sets up sub views. +
- DataTable: the data grid / table view. +
- FlotGraph: a simple graphing view using Flot. +
Source
- Models
- Backends @@ -117,7 +167,7 @@ href="https://github.com/maxogden/recline">Max's original recline codebase combining some portions of the original Data Explorer. - However, it has been rapidly rewritten from the ground up using Backbone. + However, it has been rewritten from the ground up using Backbone.