From 7709da98fc6836d85de563888d38a750ea43275f Mon Sep 17 00:00:00 2001 From: Rufus Pollock Date: Mon, 15 Oct 2012 19:43:54 +0100 Subject: [PATCH 1/5] [build][s]: regular build. --- dist/recline.dataset.js | 53 ++++++++++--- dist/recline.js | 172 ++++++++++++++++++++++++++++------------ 2 files changed, 164 insertions(+), 61 deletions(-) diff --git a/dist/recline.dataset.js b/dist/recline.dataset.js index 86359d90..dd15f128 100644 --- a/dist/recline.dataset.js +++ b/dist/recline.dataset.js @@ -380,6 +380,9 @@ my.Field = Backbone.Model.extend({ if (this.attributes.label === null) { this.set({label: this.id}); } + if (this.attributes.type.toLowerCase() in this._typeMap) { + this.attributes.type = this._typeMap[this.attributes.type.toLowerCase()]; + } if (options) { this.renderer = options.renderer; this.deriver = options.deriver; @@ -389,6 +392,17 @@ my.Field = Backbone.Model.extend({ } this.facets = new my.FacetList(); }, + _typeMap: { + 'text': 'string', + 'double': 'number', + 'float': 'number', + 'numeric': 'number', + 'int': 'integer', + 'datetime': 'date-time', + 'bool': 'boolean', + 'timestamp': 'date-time', + 'json': 'object' + }, defaultRenderers: { object: function(val, field, doc) { return JSON.stringify(val); @@ -396,7 +410,7 @@ my.Field = Backbone.Model.extend({ geo_point: function(val, field, doc) { return JSON.stringify(val); }, - 'float': function(val, field, doc) { + 'number': function(val, field, doc) { var format = field.get('format'); if (format === 'percentage') { return val + '%'; @@ -470,16 +484,15 @@ my.Query = Backbone.Model.extend({ } } }, - // ### addFilter + // ### addFilter(filter) // - // Add a new filter (appended to the list of filters) + // Add a new filter specified by the filter hash and append to the list of filters // // @param filter an object specifying the filter - see _filterTemplates for examples. If only type is provided will generate a filter by cloning _filterTemplates addFilter: function(filter) { // crude deep copy var ourfilter = JSON.parse(JSON.stringify(filter)); - // not full specified so use template and over-write - // 3 as for 'type', 'field' and 'fieldType' + // not fully specified so use template and over-write if (_.keys(filter).length <= 3) { ourfilter = _.extend(this._filterTemplates[filter.type], ourfilter); } @@ -595,7 +608,7 @@ this.recline.Backend.Memory = this.recline.Backend.Memory || {}; } else { if (data) { this.fields = _.map(data[0], function(value, key) { - return {id: key}; + return {id: key, type: 'string'}; }); } } @@ -670,10 +683,20 @@ this.recline.Backend.Memory = this.recline.Backend.Memory || {}; geo_distance : geo_distance }; var dataParsers = { - number : function (e) { return parseFloat(e, 10); }, + integer: function (e) { return parseFloat(e, 10); }, + 'float': function (e) { return parseFloat(e, 10); }, string : function (e) { return e.toString() }, - date : function (e) { return new Date(e).valueOf() } + date : function (e) { return new Date(e).valueOf() }, + datetime : function (e) { return new Date(e).valueOf() } }; + var keyedFields = {}; + _.each(self.fields, function(field) { + keyedFields[field.id] = field; + }); + function getDataParser(filter) { + var fieldType = keyedFields[filter.field].type || 'string'; + return dataParsers[fieldType]; + } // filter records return _.filter(results, function (record) { @@ -686,9 +709,8 @@ this.recline.Backend.Memory = this.recline.Backend.Memory || {}; }); // filters definitions - function term(record, filter) { - var parse = dataParsers[filter.fieldType]; + var parse = getDataParser(filter); var value = parse(record[filter.field]); var term = parse(filter.term); @@ -696,12 +718,19 @@ this.recline.Backend.Memory = this.recline.Backend.Memory || {}; } function range(record, filter) { - var parse = dataParsers[filter.fieldType]; + var startnull = (filter.start == null || filter.start === ''); + var stopnull = (filter.stop == null || filter.stop === ''); + var parse = getDataParser(filter); var value = parse(record[filter.field]); var start = parse(filter.start); var stop = parse(filter.stop); - return (value >= start && value <= stop); + // if at least one end of range is set do not allow '' to get through + // note that for strings '' <= {any-character} e.g. '' <= 'a' + if ((!startnull || !stopnull) && value === '') { + return false; + } + return ((startnull || value >= start) && (stopnull || value <= stop)); } function geo_distance() { diff --git a/dist/recline.js b/dist/recline.js index a0bbbd77..083279fc 100644 --- a/dist/recline.js +++ b/dist/recline.js @@ -9,17 +9,38 @@ this.recline.Backend.Ckan = this.recline.Backend.Ckan || {}; // // General notes // + // We need 2 things to make most requests: + // + // 1. CKAN API endpoint + // 2. ID of resource for which request is being made + // + // There are 2 ways to specify this information. + // + // EITHER (checked in order): + // // * Every dataset must have an id equal to its resource id on the CKAN instance - // * You should set the CKAN API endpoint for requests by setting API_ENDPOINT value on this module (recline.Backend.Ckan.API_ENDPOINT) + // * The dataset has an endpoint attribute pointing to the CKAN API endpoint + // + // OR: + // + // Set the url attribute of the dataset to point to the Resource on the CKAN instance. The endpoint and id will then be automatically computed. my.__type__ = 'ckan'; // Default CKAN API endpoint used for requests (you can change this but it will affect every request!) + // + // DEPRECATION: this will be removed in v0.7. Please set endpoint attribute on dataset instead my.API_ENDPOINT = 'http://datahub.io/api'; // ### fetch my.fetch = function(dataset) { - var wrapper = my.DataStore(); + if (dataset.endpoint) { + var wrapper = my.DataStore(dataset.endpoint); + } else { + var out = my._parseCkanResourceUrl(dataset.url); + dataset.id = out.resource_id; + var wrapper = my.DataStore(out.endpoint); + } var dfd = $.Deferred(); var jqxhr = wrapper.search({resource_id: dataset.id, limit: 0}); jqxhr.done(function(results) { @@ -55,8 +76,14 @@ this.recline.Backend.Ckan = this.recline.Backend.Ckan || {}; } my.query = function(queryObj, dataset) { + if (dataset.endpoint) { + var wrapper = my.DataStore(dataset.endpoint); + } else { + var out = my._parseCkanResourceUrl(dataset.url); + dataset.id = out.resource_id; + var wrapper = my.DataStore(out.endpoint); + } var actualQuery = my._normalizeQuery(queryObj, dataset); - var wrapper = my.DataStore(); var dfd = $.Deferred(); var jqxhr = wrapper.search(actualQuery); jqxhr.done(function(results) { @@ -89,15 +116,24 @@ this.recline.Backend.Ckan = this.recline.Backend.Ckan || {}; } return that; - } + }; + + // Parse a normal CKAN resource URL and return API endpoint etc + // + // Normal URL is something like http://demo.ckan.org/dataset/some-dataset/resource/eb23e809-ccbb-4ad1-820a-19586fc4bebd + my._parseCkanResourceUrl = function(url) { + parts = url.split('/'); + var len = parts.length; + return { + resource_id: parts[len-1], + endpoint: parts.slice(0,[len-4]).join('/') + '/api' + } + }; var CKAN_TYPES_MAP = { 'int4': 'integer', 'int8': 'integer', - 'float8': 'float', - 'text': 'string', - 'json': 'object', - 'timestamp': 'date' + 'float8': 'float' }; }(jQuery, this.recline.Backend.Ckan)); @@ -917,7 +953,7 @@ this.recline.Backend.Memory = this.recline.Backend.Memory || {}; } else { if (data) { this.fields = _.map(data[0], function(value, key) { - return {id: key}; + return {id: key, type: 'string'}; }); } } @@ -992,10 +1028,20 @@ this.recline.Backend.Memory = this.recline.Backend.Memory || {}; geo_distance : geo_distance }; var dataParsers = { - number : function (e) { return parseFloat(e, 10); }, + integer: function (e) { return parseFloat(e, 10); }, + 'float': function (e) { return parseFloat(e, 10); }, string : function (e) { return e.toString() }, - date : function (e) { return new Date(e).valueOf() } + date : function (e) { return new Date(e).valueOf() }, + datetime : function (e) { return new Date(e).valueOf() } }; + var keyedFields = {}; + _.each(self.fields, function(field) { + keyedFields[field.id] = field; + }); + function getDataParser(filter) { + var fieldType = keyedFields[filter.field].type || 'string'; + return dataParsers[fieldType]; + } // filter records return _.filter(results, function (record) { @@ -1008,9 +1054,8 @@ this.recline.Backend.Memory = this.recline.Backend.Memory || {}; }); // filters definitions - function term(record, filter) { - var parse = dataParsers[filter.fieldType]; + var parse = getDataParser(filter); var value = parse(record[filter.field]); var term = parse(filter.term); @@ -1018,12 +1063,19 @@ this.recline.Backend.Memory = this.recline.Backend.Memory || {}; } function range(record, filter) { - var parse = dataParsers[filter.fieldType]; + var startnull = (filter.start == null || filter.start === ''); + var stopnull = (filter.stop == null || filter.stop === ''); + var parse = getDataParser(filter); var value = parse(record[filter.field]); var start = parse(filter.start); var stop = parse(filter.stop); - return (value >= start && value <= stop); + // if at least one end of range is set do not allow '' to get through + // note that for strings '' <= {any-character} e.g. '' <= 'a' + if ((!startnull || !stopnull) && value === '') { + return false; + } + return ((startnull || value >= start) && (stopnull || value <= stop)); } function geo_distance() { @@ -1628,6 +1680,9 @@ my.Field = Backbone.Model.extend({ if (this.attributes.label === null) { this.set({label: this.id}); } + if (this.attributes.type.toLowerCase() in this._typeMap) { + this.attributes.type = this._typeMap[this.attributes.type.toLowerCase()]; + } if (options) { this.renderer = options.renderer; this.deriver = options.deriver; @@ -1637,6 +1692,17 @@ my.Field = Backbone.Model.extend({ } this.facets = new my.FacetList(); }, + _typeMap: { + 'text': 'string', + 'double': 'number', + 'float': 'number', + 'numeric': 'number', + 'int': 'integer', + 'datetime': 'date-time', + 'bool': 'boolean', + 'timestamp': 'date-time', + 'json': 'object' + }, defaultRenderers: { object: function(val, field, doc) { return JSON.stringify(val); @@ -1644,7 +1710,7 @@ my.Field = Backbone.Model.extend({ geo_point: function(val, field, doc) { return JSON.stringify(val); }, - 'float': function(val, field, doc) { + 'number': function(val, field, doc) { var format = field.get('format'); if (format === 'percentage') { return val + '%'; @@ -1718,16 +1784,15 @@ my.Query = Backbone.Model.extend({ } } }, - // ### addFilter + // ### addFilter(filter) // - // Add a new filter (appended to the list of filters) + // Add a new filter specified by the filter hash and append to the list of filters // // @param filter an object specifying the filter - see _filterTemplates for examples. If only type is provided will generate a filter by cloning _filterTemplates addFilter: function(filter) { // crude deep copy var ourfilter = JSON.parse(JSON.stringify(filter)); - // not full specified so use template and over-write - // 3 as for 'type', 'field' and 'fieldType' + // not fully specified so use template and over-write if (_.keys(filter).length <= 3) { ourfilter = _.extend(this._filterTemplates[filter.type], ourfilter); } @@ -1964,7 +2029,8 @@ my.Graph = Backbone.View.extend({ var xfield = self.model.fields.get(self.state.attributes.group); // time series - var isDateTime = xfield.get('type') === 'date'; + var xtype = xfield.get('type'); + var isDateTime = (xtype === 'date' || xtype === 'date-time' || xtype === 'time'); if (self.model.records.models[parseInt(x)]) { x = self.model.records.models[parseInt(x)].get(self.state.attributes.group); @@ -2078,7 +2144,8 @@ my.Graph = Backbone.View.extend({ var x = doc.getFieldValue(xfield); // time series - var isDateTime = xfield.get('type') === 'date'; + var xtype = xfield.get('type'); + var isDateTime = (xtype === 'date' || xtype === 'date-time' || xtype === 'time'); if (isDateTime) { // datetime @@ -3770,7 +3837,7 @@ my.SlickGrid = Backbone.View.extend({ }); // Order them if there is ordering info on the state - if (this.state.get('columnsOrder')){ + if (this.state.get('columnsOrder') && this.state.get('columnsOrder').length > 0) { visibleColumns = visibleColumns.sort(function(a,b){ return _.indexOf(self.state.get('columnsOrder'),a.id) > _.indexOf(self.state.get('columnsOrder'),b.id) ? 1 : -1; }); @@ -4301,20 +4368,27 @@ this.recline.View = this.recline.View || {}; (function($, my) { +// ## FacetViewer +// +// Widget for displaying facets +// +// Usage: +// +// var viewer = new FacetViewer({ +// model: dataset +// }); my.FacetViewer = Backbone.View.extend({ - className: 'recline-facet-viewer well', + className: 'recline-facet-viewer', template: ' \ - × \ -
\ -
\ -

Facets

\ -
\ +
\ {{#facets}} \ -
\ - {{id}} {{label}} \ -
    \ +
    \ +

    \ + {{id}} \ +

    \ +
      \ {{#terms}} \ -
    • {{term}} ({{count}})
      • \ +
    • {{term}} ({{count}})
      • \ {{/terms}} \ {{#entries}} \
    • {{term}} ({{count}})
      • \ @@ -4326,7 +4400,6 @@ my.FacetViewer = Backbone.View.extend({ ', events: { - 'click .js-hide': 'onHide', 'click .js-facet-filter': 'onFacetFilter' }, initialize: function(model) { @@ -4338,10 +4411,9 @@ my.FacetViewer = Backbone.View.extend({ }, render: function() { var tmplData = { - facets: this.model.facets.toJSON(), fields: this.model.fields.toJSON() }; - tmplData.facets = _.map(tmplData.facets, function(facet) { + tmplData.facets = _.map(this.model.facets.toJSON(), function(facet) { if (facet._type === 'date_histogram') { facet.entries = _.map(facet.entries, function(entry) { entry.term = new Date(entry.time).toDateString(); @@ -4364,10 +4436,13 @@ my.FacetViewer = Backbone.View.extend({ this.el.hide(); }, onFacetFilter: function(e) { + e.preventDefault(); var $target= $(e.target); var fieldId = $target.closest('.facet-summary').attr('data-facet'); var value = $target.attr('data-value'); - this.model.queryState.addTermFilter(fieldId, value); + this.model.queryState.addFilter({type: 'term', field: fieldId, term: value}); + // have to trigger explicitly for some reason + this.model.query(); } }); @@ -4504,18 +4579,18 @@ my.FilterEditor = Backbone.View.extend({ Add filter \ \ @@ -4535,7 +4610,7 @@ my.FilterEditor = Backbone.View.extend({
      \ \ {{field}} {{type}} \ - × \ + × \ \ \
      \ @@ -4546,7 +4621,7 @@ my.FilterEditor = Backbone.View.extend({
      \ \ {{field}} {{type}} \ - × \ + × \ \ \ \ @@ -4560,7 +4635,7 @@ my.FilterEditor = Backbone.View.extend({
      \ \ {{field}} {{type}} \ - × \ + × \ \ \ \ @@ -4613,15 +4688,14 @@ my.FilterEditor = Backbone.View.extend({ $target.hide(); var filterType = $target.find('select.filterType').val(); var field = $target.find('select.fields').val(); - var fieldType = this.model.fields.find(function (e) { return e.get('id') === field }).get('type'); - this.model.queryState.addFilter({type: filterType, field: field, fieldType: fieldType}); + this.model.queryState.addFilter({type: filterType, field: field}); // trigger render explicitly as queryState change will not be triggered (as blank value for filter) this.render(); }, onRemoveFilter: function(e) { e.preventDefault(); var $target = $(e.target); - var filterId = $target.closest('.filter').attr('data-filter-id'); + var filterId = $target.attr('data-filter-id'); this.model.queryState.removeFilter(filterId); }, onTermFiltersUpdate: function(e) { From 8c252c84dd554c0e0121dcf7f32049bcfecc2921 Mon Sep 17 00:00:00 2001 From: Rufus Pollock Date: Mon, 15 Oct 2012 19:48:14 +0100 Subject: [PATCH 2/5] [recline-deps][xs]: include ckan backend. --- _includes/recline-deps.html | 1 + 1 file changed, 1 insertion(+) diff --git a/_includes/recline-deps.html b/_includes/recline-deps.html index 2d0784c0..718b3197 100644 --- a/_includes/recline-deps.html +++ b/_includes/recline-deps.html @@ -49,6 +49,7 @@ + From 1db381e1ee0dcf4dec21c42bca0c9acdc47f1c54 Mon Sep 17 00:00:00 2001 From: Mark Silverberg Date: Fri, 13 Jun 2014 11:27:55 -0400 Subject: [PATCH 3/5] Fix 'FielterEditor' typo https://github.com/okfn/recline/search?q=FielterEditor&ref=cmdform --- src/view.multiview.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/view.multiview.js b/src/view.multiview.js index 918f0e16..5c8aa85f 100644 --- a/src/view.multiview.js +++ b/src/view.multiview.js @@ -61,7 +61,7 @@ this.recline.View = this.recline.View || {}; // { // id: 'filterEditor', // used for routing // label: 'Filters', // used for view switcher -// view: new recline.View.FielterEditor({ +// view: new recline.View.FilterEditor({ // model: dataset // }) // }, From 47503e284c7a782e56a7e0bbb3ad7ae9c12e639a Mon Sep 17 00:00:00 2001 From: Matt Fullerton Date: Sat, 21 Mar 2015 10:38:42 +0100 Subject: [PATCH 4/5] [docs/demos] Fixes #400, Typos --- _includes/views-list.html | 12 +- docs/tutorial-multiview.markdown | 239 +++++++++++++++++++++++++++++++ docs/tutorial-views.markdown | 8 +- docs/tutorials.html | 5 + 4 files changed, 254 insertions(+), 10 deletions(-) create mode 100644 docs/tutorial-multiview.markdown diff --git a/_includes/views-list.html b/_includes/views-list.html index 36bb87ca..9cb68d3b 100644 --- a/_includes/views-list.html +++ b/_includes/views-list.html @@ -1,7 +1,7 @@ -* Grid (simple) -* Grid (SlickGrid) -* Map +* Grid (simple) +* Grid (SlickGrid) +* Map * Choropleth Map -* Graph -* Timeline -* Multiview (combines views) \ No newline at end of file +* Graph +* Timeline +* Multiview (combines views) \ No newline at end of file diff --git a/docs/tutorial-multiview.markdown b/docs/tutorial-multiview.markdown new file mode 100644 index 00000000..13df5205 --- /dev/null +++ b/docs/tutorial-multiview.markdown @@ -0,0 +1,239 @@ +--- +layout: container +title: Library - Multiview Tutorial +recline-deps: true +root: ../ +--- + +
      +

      + Multiview Tutorial +
      + This tutorial will quickly get you started with Recline Multiview +

      +
      + +
      +The full source code along with all dependencies for the tutorial can be found at this GitHub repository. Do not try to assemble a working example from the code snippets in this page! See it in action via GitHub Pages. + The code is almost identical to that used for the site demo, with the advantage of the code being separated out of the main recline website. You can also see Multiview in action in many CKAN-based data catalogs (resource views) and in the OKFN Labs DataDeck
      + +### Multiview + +Multiview, as its name suggests, combines multiple [Recline views](views.html) into one visualization. The different views are synced to one dataset. The [technical documentation for Multiview](src/view.multiview.html) details the nuts and bolts. + +When building a Multiview from scratch, it is advised to start by getting each individual view to work satisfactorily before combining into a Multiview, to aid debugging. + +### Preparing your page + +Before writing any code with Recline, you need to do the following preparation steps on your page: + +* [Download ReclineJS]({{page.root}}download.html) (downloading the master, developer code is recommended as this example is based on that and all dependencies should be available) or the all-in-one demo code. +* Include the Multiview CSS as well as the CSS for each view in the head section of your document, as well as any 3rd party CSS for each view e.g.: + {% highlight html %} + + + + + + + + + + + + + + + + + {% endhighlight %} + +* Include the relevant Javascript files somewhere on the page (preferably before body close tag). You will need to include any necessary Javascript dependencies for each view as well, e.g.: + {% highlight html %} + + + + + + + + + + + + + + + + + + + + + + + + + + {% endhighlight %} + +### Creating a Dataset + +Here's the function to create an example dataset we are going to work with: + +{% highlight javascript %} +function createDemoDataset() { + var dataset = new recline.Model.Dataset({ + records: [ + {id: 0, date: '2011-01-01', x: 1, y: 2, z: 3, country: 'DE', sometext: 'first', lat:52.56, lon:13.40}, + {id: 1, date: '2011-02-02', x: 2, y: 4, z: 24, country: 'UK', sometext: 'second', lat:54.97, lon:-1.60}, + {id: 2, date: '2011-03-03', x: 3, y: 6, z: 9, country: 'US', sometext: 'third', lat:40.00, lon:-75.5}, + {id: 3, date: '2011-04-04', x: 4, y: 8, z: 6, country: 'UK', sometext: 'fourth', lat:57.27, lon:-6.20}, + {id: 4, date: '2011-05-04', x: 5, y: 10, z: 15, country: 'UK', sometext: 'fifth', lat:51.58, lon:0}, + {id: 5, date: '2011-06-02', x: 6, y: 12, z: 18, country: 'DE', sometext: 'sixth', lat:51.04, lon:7.9} + ], + // let's be really explicit about fields + // Plus take opportunity to set date to be a date field and set some labels + fields: [ + {id: 'id'}, + {id: 'date', type: 'date'}, + {id: 'x', type: 'number'}, + {id: 'y', type: 'number'}, + {id: 'z', type: 'number'}, + {id: 'country', 'label': 'Country'}, + {id: 'sometext', 'label': 'Some text'}, + {id: 'lat'}, + {id: 'lon'} + ] + }); + return dataset; +} +{% endhighlight %} + +In this data we have 6 documents / rows. Each document is a javascript object +containing keys and values (note that all values here are 'simple' but there is +no reason you cannot have objects as values allowing you to nest data. + +### Setting up the Multiview + +To create a Multiview, we first create each view that we want to include, and include these in an array. A function to do everything for SlickGrid, Graph and Map views is shown below: + +{% highlight javascript %} +var createMultiView = function(dataset, state) { + // remove existing multiview if present + var reload = false; + if (window.multiView) { + window.multiView.remove(); + window.multiView = null; + reload = true; + } + + var $el = $('
      '); + $el.appendTo(window.explorerDiv); + + // customize the subviews for the MultiView + var views = [ + { + id: 'grid', + label: 'Grid', + view: new recline.View.SlickGrid({ + model: dataset, + state: { + gridOptions: { + editable: true, + // Enable support for row add + enabledAddRow: true, + // Enable support for row delete + enabledDelRow: true, + // Enable support for row ReOrder + enableReOrderRow:true, + autoEdit: false, + enableCellNavigation: true + }, + columnsEditor: [ + { column: 'date', editor: Slick.Editors.Date }, + { column: 'sometext', editor: Slick.Editors.Text } + ] + } + }) + }, + { + id: 'graph', + label: 'Graph', + view: new recline.View.Graph({ + model: dataset + + }) + }, + { + id: 'map', + label: 'Map', + view: new recline.View.Map({ + model: dataset + }) + } + ]; + + var multiView = new recline.View.MultiView({ + model: dataset, + el: $el, + state: state, + views: views + }); + return multiView; +} +{% endhighlight %} + +To tie it all together: +{% highlight javascript %} +jQuery(function($) { + window.multiView = null; + window.explorerDiv = $('.data-explorer-here'); + + // create the demo dataset + var dataset = createDemoDataset(); + // now create the multiview + // this is rather more elaborate than the minimum as we configure the + // MultiView in various ways (see function below) + window.multiview = createMultiView(dataset); + + // last, we'll demonstrate binding to changes in the dataset + // this will print out a summary of each change onto the page in the + // changelog section + dataset.records.bind('all', function(name, obj) { + var $info = $('
      '); + $info.html(name + ': ' + JSON.stringify(obj.toJSON())); + $('.changelog').append($info); + $('.changelog').show(); + }); +}); +{% endhighlight %} + +The HTML is very simple: +{% highlight html %} +
      + + +
      +

      Changes

      +
      + +
      +
      +
      +{% endhighlight %} diff --git a/docs/tutorial-views.markdown b/docs/tutorial-views.markdown index 8f850c30..05dfc922 100644 --- a/docs/tutorial-views.markdown +++ b/docs/tutorial-views.markdown @@ -21,15 +21,15 @@ Views display Recline datasets in different ways. This page covers the interesti Before writing any code with Recline, you need to do the following preparation steps on your page: -1. [Download ReclineJS]({{page.root}}download.html) and relevant dependencies. -2. Include the relevant CSS in the head section of your document: +* [Download ReclineJS]({{page.root}}download.html) and relevant dependencies. +* Include the relevant CSS in the head section of your document: {% highlight html %} {% endhighlight %} -3. Include the relevant Javascript files somewhere on the page (preferably before body close tag): +* Include the relevant Javascript files somewhere on the page (preferably before body close tag): {% highlight html %} @@ -50,7 +50,7 @@ You're now ready to start working with Recline. ### Creating a Dataset -Here's some example data We are going to work with: +Here's some example data we are going to work with: {% highlight javascript %} {% include data.js %} diff --git a/docs/tutorials.html b/docs/tutorials.html index 6ef1e832..35dae7df 100644 --- a/docs/tutorials.html +++ b/docs/tutorials.html @@ -53,6 +53,11 @@ root: ../

      Views Quickstart - Grids, Graphs, Maps & Timelines

      +
      +
      +

      Multiview - Multiple tabbed views

      +
      +

      Doing more with maps

      From aae967ae415e6baa38d2c97cd24cd22f3b732419 Mon Sep 17 00:00:00 2001 From: Rufus Pollock Date: Sat, 28 May 2016 16:20:09 +0100 Subject: [PATCH 5/5] [CNAME][xs]: remove so that this lives at okfnlabs.org/recline/. --- CNAME | 1 - 1 file changed, 1 deletion(-) delete mode 100644 CNAME diff --git a/CNAME b/CNAME deleted file mode 100644 index a14a1404..00000000 --- a/CNAME +++ /dev/null @@ -1 +0,0 @@ -reclinejs.com