4 ms·
Cola.js – Constraint-Based Layout in the Browser
- istvan__ 11y agoWow, this is pretty cool.
- supercoder 11y agoThis is interesting, but had hoped it would be something like iOS's Auto Layout for the browser.
- elithrar 11y agoThat'd be https://gridstylesheets.org/ https://gridstylesheets.org/ (and its alternatives)
- joubert 11y agoAuto 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 11y agoAuto 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.
- jflatow 11y agoI thought it would be too, but this is just as awesome.
- techwizrd 11y agoWow. How long did this take to build? This is pretty impressive.
- voltagex_ 11y agoOfftopic - why does monash.edu.au redirect to monash.edu? This is an Australian university. Edit: also, http://nic.monash/ http://nic.monash/
- danieltillett 11y agoBecause 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 :(
- deleted 11y ago[deleted]
- elcct 11y agoat least it doesn't redirect to monash.edu.at ;)
- thechao 11y agoHotDrink 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&CFTOKEN=46545378; http://dl.acm.org/citation.cfm?id=2047892&CFID=690849385&CFT... http://dl.acm.org/citation.cfm?id=1449927&CFID=690849385&CFTOKEN=46545378; http://dl.acm.org/citation.cfm?id=1449927&CFID=690849385&CFT... http://dl.acm.org/citation.cfm?id=1621630&CFID=690849385&CFTOKEN=46545378 http://dl.acm.org/citation.cfm?id=1621630&CFID=690849385&CFT... [4] https://parasol.tamu.edu/~jarvi/papers/gpce08.pdf https://parasol.tamu.edu/~jarvi/papers/gpce08.pdf
- pyvpx 11y agocan 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 11y agoGraph Drawing: Algorithms for the Visualization of Graphs by Tollis, Di Battista, Eades and Tamassia (http://www.amazon.com/Graph-Drawing-Algorithms-Visualization-Graphs/dp/0133016153 http://www.amazon.com/Graph-Drawing-Algorithms-Visualization...). The book is from 1998 but is a good basis for reading future papers and algorithms in this area.
- amelius 11y agoNice. 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/