Recline is two things:

• Data Explorer combining a data grid, Google Refine-style data transforms and visualizations all in lightweight javascript and html.
• Simple but powerful library of extensible of data components - data grid, graphing, and data connectors - which you can selectively use and build on.

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.

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
• Open-source, pure javascript and designed for integration -- so it is easy to embed in other sites and applications
• 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

Screenshots

Demo

For demo see the Data Explorer »

Documentation

Quickstart

// 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).

Concepts and Structure

Recline has a simple structure layered on top of the basic Model/View distinction inherent in Backbone.

Models: there are two main model objects:

• 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).

More detail of how these work can be found in the Model source docs.

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

A template Base class can be found in the Backend base module of the source docs. 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.

Views: complementing the model are various Views (you can also 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.

Source Docs (via Docco)

• Models
• DataExplorer View (plus common view code)
• DataGrid View
• Graph View (based on Flot)
• Backend: Base (base class providing a template for backends)
• Backend: Memory (local data)
• Backend: ElasticSearch
• Backend: DataProxy (CSV and XLS on the Web)
• 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.