Refactor of Liquid Space code.

I took the code for liquid space apart to try to find what shape it needed to be in. It’s looking much cleaner under the good now.

You can play with it now at

Key features

Cards (nodes to the graph nerds in the audience)

Cards have Actions – things you can do with the card such as destroying it or setting an alternate View.

Cards have views, which alter the content, and may alter how the card is displayed. All views of a card will work with the same metadata inside the card.

Move around the display using click and drag and mousewheel to zoom. Like an online map.

We’re trying to make sure this all works on mobile, but have not tested this new version yet.

You can save a copy of your current view using [Q] which downloads the whole display as a single HTML document.

Features of all cards

  • Drag & Resize like you would a window in a WIMP environment.
  • Drag onto another card to make a basic link.
  • Double click to create a text comment card linked to this card.
  • REMOVE – remove the card
  • METADATA– see the data that is used to load/save this card
  • DOT – turn this into a simple dot. Click to get it back to normal.
  • ICON – turn this into an icon. Click to get back to normal. Most cards are a bit boring but I’m working on it.
  • There should be a view that lets you inspect and edit the links to/from a card, but isn’t yet.
  • UPDATE – many cards get data from the web, update forces a refresh. Right now they all get data every time, but a cache time should be added to reduce bandwidth and bothering.

Text card

These are the most basic. You can create a text card by double clicking on the background or another card, or pasting plain text into the background. They can be altered using the EDIT action.

HTML card

As with text, but the only way to create these (for now) is to paste in HTML.

Augmented citation card

If you copy and paste from a page with our augmented javascript (such as the blog posts on and it will create a citation card which understands the details of where it came from and shows the citation info. The final format for augmented citations is undecided as there’s many options and issues. Extra actions let you visit the source and hide the source using an alternate view.

Graph API cards

You can kick off this feature using the [G] in the tools menu which will ask for the base URL of a Graph API endpoint. Examples to try

  • — a lexicon of Webscience terms and publications relating to them.
  • — a live graph connection to the JRNL blog.

The WordPress plugin is a hacky horror but can easily be made vastly more efficient. — ideally eventually we’d have was to write changes back and maybe even have realtime changes pushed from the source using something like websockets. It would also be possible to have applications on your local machine provide mini webservers providing information in the GraphAPI format. This format is also not set in stone, it works for our demos and that’s good enough for now.

The first Graph API card asks for  an endpoint; use one of the ones above.

The second presents available types of node, pick one.

This now shows all of nodes of that type, pick one and it’ll open and icon-ify the previous card.

It now opens a card representing that item in the graph. You can use the GRAPH LINKS action to open linked items. I’d like a “open all linked items” button but it’s not done yet. If a node is already open it’ll just focus on it instead.

I’d like to make this smarter about how it navigates large graphs. I’d like to add an interface to my University’s public SPARQL endpoint, and one to WikiPedia/DBPedia. For those, listing all nodes of a type makes little sense, so an alternate “pick and ID” feature may be required.

Embed cards

TODO.  This is a bit broken but will work again soon. When you paste a URL into the background the system should use oEmbed to get the embed information if available, and maybe other strategies, to describe the content of that URL in a useful way. Many sites like twitter & youtube support this. I should make an alternate simplified view.

Image cards

TODO: When you “copy” an image in a browser it really just copies an HTML fragment with an <img> in. I’d like to detect that and make a special “image” style card.

Actually, there’s a million more TODO items.