diff --git a/css/site.css b/css/site.css index bbdd302d..63242ea2 100644 --- a/css/site.css +++ b/css/site.css @@ -110,28 +110,10 @@ a.dotted:hover { background-color: #bc130e \9; } -a.btn-large.showtitle[title] { - position:relative; - margin-bottom:26px; - min-width:117px; -} -a.btn-large.showtitle[title]:after { - content: attr(title); - position:absolute; - bottom:-26px; - left:0px; - font-size:12px; - height:26px; - line-height:26px; - min-width:145px; - text-align:center; -} - .btn-large .icon-large { height:25px; width:25px; - margin-top:-2px; - margin-left:-25px; + margin-top:-4px; margin-right:7px; } .btn-large .icon-white.icon-large { @@ -177,12 +159,16 @@ a.btn-large.showtitle[title]:after { box-shadow: none; } +body { + padding-top: 60px; +} + section { padding-top:20px; } -.page-header { - margin-top:50px; +.home-page.page-header { + margin-top:-10px; background: #2d2d2d; /* Old browsers */ background: -moz-linear-gradient(top, #2d2d2d 0%, #040404 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#2d2d2d), color-stop(100%,#040404)); /* Chrome,Safari4+ */ @@ -197,31 +183,31 @@ section { border:none; font-family:'Open Sans', Helvetica, Arial, sans-serif; } -.page-header a { +.home-page.page-header a { color:#FFF; } -.page-header a.dotted { +.home-page.page-header a.dotted { border-color:#FFF; } -.page-header .container { +.home-page.page-header .container { background-image: url(images/header-screen.png); background-repeat: no-repeat; background-position: -3px 0px; } -.page-header .inner { +.home-page.page-header .inner { padding:0px 0px 30px 40px; font-size:16px; } -.page-header .inner ol { +.home-page.page-header .inner ol { list-style-type:upper-latin; font-size:20px; font-style:italic; } -.page-header .inner .header-button { +.home-page.page-header .inner .header-button { display:inline-block; } -.page-header:after { +.home-page.page-header:after { margin-top:-14px; } @@ -229,15 +215,6 @@ section.grey { background-color:#f5f5f5; } -section:after { - content: " "; - height:14px; - display:block; - background-image: url(images/zigzags.png); - background-repeat: repeat-x; - background-position: center 1px; -} - section.grey:after { background-position: center -50px; } @@ -245,6 +222,7 @@ section.grey:after { .footer { background-color:#040404; color:#CCC; + margin-top: 30px; } .footer:before { content: " "; diff --git a/index.html b/index.html index abcacef4..b7d55bba 100644 --- a/index.html +++ b/index.html @@ -3,7 +3,7 @@ layout: default title: Home --- -
+
@@ -13,13 +13,13 @@ title: Home
  1. Powerful data explorer built in pure javascript and html
    2. -
  2. Suite of data components - grid, graphing and data connectors
    3. +
  3. A library of data components - grid, graphing and data connectors
— All built with Backbone
- Use It - Get It + Use the Explorer + Use the Library
@@ -74,195 +74,8 @@ title: Home
-
+
-
-
-

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)

- -
-
-

Backends

- -
-
-
-
-

Tests

-

Run the tests online.

-
-

History

diff --git a/library.html b/library.html new file mode 100644 index 00000000..e771e7ab --- /dev/null +++ b/library.html @@ -0,0 +1,171 @@ +--- +layout: default +title: Library - Home +--- + +
+ +
+

+ The Data Library +

+
+
+
+

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)

+ +
+
+

Backends

+ +
+
+
+
+