Annotation,  Authoring,  Citations,  Demo @ 50,  High Resolution Addressability,  Meetings

Webleau progress (Liquid Space)

Hi, this is a quick update on Webleau (Web Tableau) part of my suite of ideas for how I’d like information systems to work. A guiding principle for me is that people should be able to get a feel for what’s going on and it should be “easy to do the right thing”, rather than a chore.

Try the current work in progress here:

The webleau idea is based on an older tool I made, wiki explorer, which was a tool for exploring wikipedia, linked data and other graphs of information. It used <canvas> and didn’t save well, nor did I really think about how to load/save things. None the less the idea was to create something mostly aimed at a big (touch) screen where you could lay out your web research spatially.

The new version uses SVG over the top of HTML and is designed from scratch to be able to save and restore it’s state. Later I hope that the state of a webleau can be stored in a wordpress node

  • double click to make a comment
  • double click on a node to make a comment on that node (makes it with a
  • click edit icon to alter a comment
  • click [+] icon to (try to) scale a node.
  • click [i] icon to see citation and other metadata stored in the node
    (nb. this metadata is all over the place, I’ve not put much thought into
  • paste a URL from common media sites; youtube, wikipedia, twitter, etc. will
    use oembed protocol to make a nice looking node
  • [firefox only for now] copy a range of text from an “ultralinks”  enabled
    blog, eg.
    and paste into the webleau and it’ll store a citation with the deep link
    URL, plus metadata from the blog. Use the [i] icon to see the metadata it stored with the node (we can be more clever with this later). Firefox has an interesting option to store JSON on the clipboard as well as text & html. I’m thinking a hack to work in other browsers would be to embed this JSON in a data attribute in the HTML clipboard (blurgh!).  If you want to see what’s on your clipboard, I made a clipboard debug tool. nb. “ultralinks” was a working title for this, rather than a product name.
  • use the sliders to zoom the layout out or change the scale of all nodes
  • move node using their title bar
  • scale node using the right, bottom edges, and bottom right corner. Nb. nodes are anchored at their centre point, not the top left. It’s a little alien but makes sense in the interface.
  • make generic links between nodes by dragging a node onto another node

What I’m working on now:

  • import nodes and links from blog (I’m planning on mocking this up
    using the JSON file and PHP for tomorrow)
  • save / load the layout to a text string
  • change default location so boxes load in the middle of the area, not
    the top left, which will make zooming nicer.

The code is here;, but it’s unpolished, and if you want the oembed to work you’ll need to do the “composer install” thing.

Nb. I’ve deliberately given little energy to worrying about XSS and other security issues. It’s not that they are not important, but the goal of this work is to show people novel ways to interact with information. If it’s successful we can invest the work “doing it properly”.


  • Samim

    This is fantastic! been thinking of developing a similar thing for some time. Happy to see you’ve done it. I wonder, what are your thoughts on interaction design once these graphs scale to 100s or 1000s of nodes?

    • Christopher Gutteridge

      Hi. The code is all on github so can be forked or extended. 100s of nodes should be OK on a modern setup, but we’ve not yet got the backend storage setup well enough to build one that big. The plan is to use 3rd party open tools as storage rather than have a native one. I’m trying (and failing) not to be a giggling fanboy when I say that I talked with Tim Berners-Lee about the possibility of using his SOLID platform for a storage option! But two other members of the community also have backends which might work well and I’d like a solution that’s agnostic.

      Scaling is partly about pure RAM issues but mostly about the big wobbly amount of stuff in the DOM. For DOM issues I’ve two solutions. 1 is to only render cards when they are just off screen. No need to have a youtube iframe loaded when it’s 50 screens away. The other is to move it squish/icon/dot view after a certain zoom out level. [play with these views directly from the dev menu]

      Right now the code is in several feature forks which I’ll try to merge over the rest of the month.

Leave a Reply

Your email address will not be published. Required fields are marked *