

Cola.js – Constraint-Based Layout in the Browser - moklick
http://marvl.infotech.monash.edu/webcola/#

======
thechao
HotDrink is a declarative, constraint-based UI system that models the flow of
_data_ across the elements in the UI[1]. Trivially, it can repurposed for
layout; although, most UI designers balk at the loss of control. The basic
idea comes from a sizing dialog:

    
    
        height: [   ]
        width : [   ]
         area : [   ]
    

If the user enters a height & width, the form should update area [2]. If the
user then updates area, then height is the free constraint (last recently
updated). The whole system scales to work with incredibly large interfaces
[3]. The experience section in [4] describes Adobe's experience porting chunks
of Photoshop to using this system. (I did the figures for [4]; I'm quite proud
of them.)

[1] [https://code.google.com/p/hotdrink/](https://code.google.com/p/hotdrink/)

[2]
[http://dl.acm.org/citation.cfm?id=2371413](http://dl.acm.org/citation.cfm?id=2371413)

[3]
[http://dl.acm.org/citation.cfm?id=2047892&CFID=690849385&CFT...](http://dl.acm.org/citation.cfm?id=2047892&CFID=690849385&CFTOKEN=46545378;)
[http://dl.acm.org/citation.cfm?id=1449927&CFID=690849385&CFT...](http://dl.acm.org/citation.cfm?id=1449927&CFID=690849385&CFTOKEN=46545378;)
[http://dl.acm.org/citation.cfm?id=1621630&CFID=690849385&CFT...](http://dl.acm.org/citation.cfm?id=1621630&CFID=690849385&CFTOKEN=46545378)

[4]
[https://parasol.tamu.edu/~jarvi/papers/gpce08.pdf](https://parasol.tamu.edu/~jarvi/papers/gpce08.pdf)

------
amelius
Nice. But as with most of these libraries, I don't think it can handle large
numbers of nodes/edges and show such graphs in a meaningful way. It really
takes more than a force-directed algorithm to present data in an
understandable way.

Here is a nice collection of large graphs: [1] Visualize that in a useful way,
and I'm impressed.

[1] [https://snap.stanford.edu/data/](https://snap.stanford.edu/data/)

------
supercoder
This is interesting, but had hoped it would be something like iOS's Auto
Layout for the browser.

~~~
joubert
Auto Layout is based on the University of Washington's Cassowary Constraint
Solving Toolkit.

There's a JS version:
[http://constraints.cs.washington.edu/cassowary/](http://constraints.cs.washington.edu/cassowary/)

~~~
mjwybrow
Auto Layout and cola.js have a common lineage. Kim Marriott and Peter Stuckey
are authors of the original Cassowary paper and are members of the MArVL
research group at Monash University that publishes cola.js and related
technologies.

------
voltagex_
Offtopic - why does monash.edu.au redirect to monash.edu? This is an
Australian university.

Edit: also, [http://nic.monash/](http://nic.monash/)

~~~
danieltillett
Because they are special snowflakes. They apparently aspire to seen as some
sort of ivy league university and don’t want the “stigma” of being mistaken
for being in Australia. As an Australian this sort of cultural cringe makes me
angry, but it is all too common :(

------
techwizrd
Wow. How long did this take to build? This is pretty impressive.

------
pyvpx
can anyone recommend more papers/algorithms/reading material on layout
algorithms in general? I'm very interested in layout algorithms of smaller
node/edge counts (less than 1000). most material I've found is geared towards
"big data" and hundreds of thousands (or more) of nodes/edges.

~~~
harrigan
Graph Drawing: Algorithms for the Visualization of Graphs by Tollis, Di
Battista, Eades and Tamassia ([http://www.amazon.com/Graph-Drawing-Algorithms-
Visualization...](http://www.amazon.com/Graph-Drawing-Algorithms-
Visualization-Graphs/dp/0133016153)). The book is from 1998 but is a good
basis for reading future papers and algorithms in this area.

------
istvan__
Wow, this is pretty cool.

