-
- Recline Data Explorer and Library
-
- A. Powerful data explorer built in pure javascript and html
-
- B. Suite of data components - grid, graphing and data connectors
-
- — All built with Backbone
-
-
+ Recline is Two Things
+-
+
- A Data Explorer combining a data grid, Google Refine-style data + transforms and visualizations all in lightweight javascript and html. +
- A 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 +
+ Recline is two things:
+Data Explorer Documentation
+Usage instructions are built into the Data Explorer + itself so no specific additional documentation is provided on usage.
+To embed the data explorer in another site you can use a simple iframe in + your web page:
+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: app.js.
+Library Documentation
+ +Examples
+ +Note: A quick read through of the Concepts section will + likely be useful in understanding the details of the examples.
+ +Note: for all the following examples you should have + included relevant Recline dependencies.
+ +Simple in-memory dataset.
+
+ // Some data you have
+ // Your data must be in the form of list of documents / rows
+ // Each document/row is an Object with keys and values
+ var data = [
+ {id: 0, x: 1, y: 2, z: 3, country: 'UK', label: 'first'}
+ , {id: 1, x: 2, y: 4, z: 6, country: 'UK', label: 'second'}
+ , {id: 2, x: 3, y: 6, z: 9, country: 'US', label: 'third'}
+ ];
+
+ // Create a Dataset object from local in-memory data
+ // Dataset object is a Backbone model - more info on attributes in model docs below
+ var dataset = recline.Backend.createDataset(data);
+
+ // Now create the main explorer view (it will create other views as needed)
+ // 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();
+
+
+ Creating a Dataset Explicitly with a Backend
+
+ // Connect to ElasticSearch index/type as our data source
+ // There are many other backends you can use (and you can write your own)
+ var backend = new recline.Backend.ElasticSearch();
+
+ // Dataset is a Backbone model so the first hash become model attributes
+ var dataset = recline.Model.Dataset({
+ id: 'my-id',
+ // url for source of this dataset - will be used by backend
+ url: 'http://localhost:9200/my-index/my-type',
+ // any other metadata e.g.
+ title: 'My Dataset Title'
+ },
+ backend
+ );
+
+ 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). +
Additional, related models:
+-
+
- Field: a field/column on a + dataset. +
- Query: an object to encapsulate a + query to the backend (useful both for creating queries and for storing and + manipulating query state - e.g. from a query editor). +
- Facet: Object to store Facet + information, that is summary information (e.g. values and counts) about a + field obtained by some faceting method on the backend. +
More detail of how these work can be found in the Model source docs.
+ + +-
-
- A Data Explorer combining a data grid, Google Refine-style data - transforms and visualizations all in lightweight javascript and html. -
- A simple but powerful library of extensible of data components - data - grid, graphing, and data connectors - which you can selectively use and build - on. -
Backends
+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. +
- Grid: the data grid view. +
- Graph: a simple graphing view using Flot. +
- Map: a map view using Leaflet. +
There are additional views which do not display a whole dataset but which + are useful:
+-
+
- QueryEditor: a query editor view +
- FacetViewer: display facets +
Source Docs (via Docco)
+Models and Views (Widgets)
+ +Tests
+ +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.
+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.
+Dependencies
+-
+
- JQuery >= 1.6 +
- Backbone >= 0.5.1 +
- Underscore >= 1.0 +
- JQuery Mustache +
- JQuery Flot >= 0.7: (Optional) for graphing +
- Leaflet >= 0.3.1: (Optional) for mapping +
- Bootstrap >= v2.0: (Optional) for CSS/JS +
Documentation
+ +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 »
- -Data Explorer Documentation
- -Usage instructions are built into the Data Explorer -itself so no specific additional documentation is provided on usage.
- -To embed the data explorer in another site you can use a simple iframe in -your web page:
- - - -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: app.js.
- - -Library Documentation
- -Examples
- -Note: A quick read through of the Concepts section will -likely be useful in understanding the details of the examples.
- -Note: for all the following examples you should have -included relevant Recline dependencies.
- -Simple in-memory dataset.
-
-// Some data you have
-// Your data must be in the form of list of documents / rows
-// Each document/row is an Object with keys and values
-var data = [
- {id: 0, x: 1, y: 2, z: 3, country: 'UK', label: 'first'}
- , {id: 1, x: 2, y: 4, z: 6, country: 'UK', label: 'second'}
- , {id: 2, x: 3, y: 6, z: 9, country: 'US', label: 'third'}
- ];
-
-// Create a Dataset object from local in-memory data
-// Dataset object is a Backbone model - more info on attributes in model docs below
-var dataset = recline.Backend.createDataset(data);
-
-// Now create the main explorer view (it will create other views as needed)
-// 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();
-
-
-Creating a Dataset Explicitly with a Backend
-
-// Connect to ElasticSearch index/type as our data source
-// There are many other backends you can use (and you can write your own)
-var backend = new recline.Backend.ElasticSearch();
-
-// Dataset is a Backbone model so the first hash become model attributes
-var dataset = recline.Model.Dataset({
- id: 'my-id',
- // url for source of this dataset - will be used by backend
- url: 'http://localhost:9200/my-index/my-type',
- // any other metadata e.g.
- title: 'My Dataset Title'
- },
- backend
-);
-
-
-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). -
Additional, related models:
--
-
- Field: a field/column on a - dataset. -
- Query: an object to encapsulate a - query to the backend (useful both for creating queries and for storing and - manipulating query state - e.g. from a query editor). -
- Facet: Object to store Facet - information, that is summary information (e.g. values and counts) about a - field obtained by some faceting method on the backend. -
More detail of how these work can be found in the Model source docs.
- -Backends
-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. -
- Grid: the data grid view. -
- Graph: a simple graphing view using Flot. -
- Map: a map view using Leaflet. -
There are additional views which do not display a whole dataset but which -are useful:
--
-
- QueryEditor: a query editor view -
- FacetViewer: display facets -
Source Docs (via Docco)
-Models and Views (Widgets)
--
-
- Models -
- DataExplorer View (plus common view code) -
- (Data) Grid View -
- Graph View (based on Flot) -
- Map View (based on Leaflet) -
Backends
--
-
- 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) -
- Backend: Local CSV file -
Tests
- - -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.
- -