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 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

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

// 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
• Views including the main Data Explorer

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.