Recline combines a data grid, Google Refine-style data transforms and visualizations all in lightweight javascript and html.

Designed for standalone use or as a library to integrate into your own app.

Main Features

• 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 the simple but powerful Backbone giving a clean and robust design which is easy to extend
• Properly designed model with clean separation of data and presentation
• Componentized design means you use only what you need

Demo

For Recline Demo Click Here »

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.

Documentation

Recline has a simple structure layered on top of the basic Model/View distinction inherent in Backbone. There are the following two main 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).

Backends (more info below) then connect Dataset and Documents to 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.

Complementing the model are 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.
• DataGrid: the data grid view.
• FlotGraph: a simple graphing view using Flot.

Using It

// Note: you should have included the relevant JS libraries (and CSS)
// See above for dependencies

// Dataset is a Backbone model so the first hash become model attributes
var dataset = recline.Model.Dataset({
    id: 'my-id'
  },
  // Either a backend instance or string id for a backend in the registry
  backend
);
// 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 -- just hit view source (NB: the javascript for the demo is in: app.js).

Backends

Backends are connectors to backend data sources from which data can be retrieved.

Backends are implemented as Backbone models but this is just a convenience (they do not save or load themselves from any remote source). You can see detailed examples of backend implementation in the source documentation below.

A backend must implement two methods:

sync(method, model, options)
query(dataset, queryObj)

sync(method, model, options)

This is an implemntation of Backbone.sync and is used to override Backbone.sync on operations for Datasets and Documents which are using this backend.

For read-only implementations you will need only to implement read method for Dataset models (and even this can be a null operation). The read method should return relevant metadata for the Dataset. We do not require read support for Documents because they are loaded in bulk by the query method.

For backends supporting write operations you must implement update and delete support for Document objects.

All code paths should return an object conforming to the jquery promise API.

query(dataset, queryObj)

Query the backend for documents returning them in bulk. This method will be used by the Dataset.query method to search the backend for documents, retrieving the results in bulk. This method should also set the docCount attribute on the dataset.

queryObj should be either a recline.Model.Query object or a Hash. The structure of data in the Query object or Hash should follow that defined in issue 34. (That said, if you are writing your own backend and have control over the query object you can obviously use whatever structure you like).

Source Docs (via Docco)

• Models
• DataExplorer View plus common view code
• DataGrid View
• Graph View (based on Flot)
• Backend: Memory (local data)
• Backend: ElasticSearch
• Backend: Google Docs (Spreadsheet)

Tests

Run the tests online.

History

Max Ogden was developing Recline as the frontend data browser and editor for his http://datacouch.com/ project. Meanwhile, Rufus Pollock and the CKAN team at the Open Knowledge Foundation had been working on a Data Explorer for use in the DataHub and CKAN software.

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.

The new project forked off Max's original recline codebase combining some portions of the original Data Explorer. However, it has been rewritten from the ground up using Backbone.