vege-table

Description

vege-table is a custom element, built with Polymer, that provides a web interface for building a table of data.

It does this by adding items (seeds) to a collection, then adding properties (leaves) to those items.

Each leaf is simply a JavaScript function, wrapped in a promise. This allows the properties of items to be fetched asynchronously, and for leaves with dependencies to be chained together.

Once the table of data has been built, the data and table description can be exported and easily published online, viewed in the same interface but without the ability to update the data.

Status

Pre-alpha. To create vege-tables you need to be able to write functions in JavaScript, set up some helper tools, and deal with things going unexpectedly wrong.

Getting started

The easiest way to get started is to use the vege-table web interface to create projects.

Alternatively - or if you'd like to help with development - follow the full instructions below.

Usage

1. Make sure you have Bower installed.
2. Create a new project folder, and run bower init.
3. Install vege-table and its dependencies: bower install vege-table --save
4. Create an index.html file.
5. Include the Polymer platform: <script src="bower_components/platform/platform.js"></script>
6. Use an HTML import to import the vege-table element: <link rel="import" href="bower_components/vege-table/vege-table.html">
7. Add the vege-table element to the page: <vege-table db="your-database-name"></vege-table>. Note that the “db” value should be a unique database identifier for each project.
8. Start a web server in the project folder: python -m SimpleHTTPServer 9000 and open http://localhost:9000/ in a web browser (ideally the very latest version of Chrome or Firefox).

Now you can add some seeds and some leaves to create your table.

Important notes

There are several important things to bear in mind:

• There are bugs (both known and unknown) - this is still a very early release, and it uses some technologies that are not yet fully stable.
• To get maximum performance, switch on Object.observe: in Chrome 34, this is done by enabling “experimental JavaScript” in chrome://extensions - without Object.observe, polling objects for changes can get slow when there are a lot of items.
• Only some services add the CORS Access-Control-Allow-Origin header to their resources, so often resources cannot be fetched directly. To work around this (and providing benefits in other ways, such as caching), pass all request through cache-proxy. View source on an example table to see how to use Request.prototype.prepare to manipulate the URL before the request is sent.
• By default, IndexedDB (where the data is stored) is allowed to use up to 10% of the free disk space. After that, properties may start silently going missing and things may stop saving. TODO: a browser extension will help with this.
• There’s very little error reporting yet, so keep the JavaScript console open to watch for progress and errors. ES6 Promises like to swallow exceptions, so sometimes nothing will be reported.

Colophon

• Polymer
• CodeMirror
• Bootstrap
• PouchDB
• marked
• prism
• web-resource
• cache-proxy

Inspirations

• OpenRefine / Google Refine / Piggybank / David Huynh
• Google Sheets / Apps Script / Fusion Tables
• Tabulator / Tim Berners-Lee
• Wolfram Language / Stephen Wolfram
• dat / Max Ogden
• R / Hadley Wickham
• iPython Notebook
• ScraperWiki
• import.io
• Yahoo Pipes
• Discussions in the W3C CSV on the Web Working Group, and the work of group chairs Jeni Tennison and Dan Brickley.