Recent Changes for "Laying out Graphs" - Graph Exploration System (GUESS)http://guess.wikispot.org/Laying_out_GraphsRecent Changes of the page "Laying out Graphs" on Graph Exploration System (GUESS).en-us Laying out Graphshttp://guess.wikispot.org/Laying_out_Graphs2007-08-11 00:09:49EytanAdar <div id="content" class="wikipage content"> Differences for Laying out Graphs<p><strong></strong></p><table> <tr> <td> <span> Deletions are marked with - . </span> </td> <td> <span> Additions are marked with +. </span> </td> </tr> <tr> <td> Line 45: </td> <td> Line 45: </td> </tr> <tr> <td> </td> <td> <span>+ --&gt; [[Image(cc.jpg)]]&lt;--</span> </td> </tr> <tr> <td> Line 48: </td> <td> Line 49: </td> </tr> <tr> <td> <span>- --&gt; [[Image(cc.jpg)]]&lt;--</span> </td> <td> </td> </tr> </table> </div> Laying out Graphshttp://guess.wikispot.org/Laying_out_Graphs2007-08-11 00:09:22EytanAdarUpload of image <a href="http://guess.wikispot.org/Laying_out_Graphs?action=Files&do=view&target=adjust.gif">adjust.gif</a>.Laying out Graphshttp://guess.wikispot.org/Laying_out_Graphs2007-08-11 00:08:59EytanAdarUpload of image <a href="http://guess.wikispot.org/Laying_out_Graphs?action=Files&do=view&target=isom.jpg">isom.jpg</a>.Laying out Graphshttp://guess.wikispot.org/Laying_out_Graphs2007-08-11 00:08:46EytanAdarUpload of image <a href="http://guess.wikispot.org/Laying_out_Graphs?action=Files&do=view&target=cc.jpg">cc.jpg</a>.Laying out Graphshttp://guess.wikispot.org/Laying_out_Graphs2007-08-11 00:07:02EytanAdarUpload of image <a href="http://guess.wikispot.org/Laying_out_Graphs?action=Files&do=view&target=mds.jpg">mds.jpg</a>.Laying out Graphshttp://guess.wikispot.org/Laying_out_Graphs2007-08-11 00:06:45EytanAdarUpload of image <a href="http://guess.wikispot.org/Laying_out_Graphs?action=Files&do=view&target=physics.jpg">physics.jpg</a>.Laying out Graphshttp://guess.wikispot.org/Laying_out_Graphs2007-08-11 00:06:30EytanAdarUpload of image <a href="http://guess.wikispot.org/Laying_out_Graphs?action=Files&do=view&target=gem.jpg">gem.jpg</a>.Laying out Graphshttp://guess.wikispot.org/Laying_out_Graphs2007-08-11 00:06:16EytanAdarUpload of image <a href="http://guess.wikispot.org/Laying_out_Graphs?action=Files&do=view&target=fr.jpg">fr.jpg</a>.Laying out Graphshttp://guess.wikispot.org/Laying_out_Graphs2007-08-11 00:06:00EytanAdarUpload of image <a href="http://guess.wikispot.org/Laying_out_Graphs?action=Files&do=view&target=spring.jpg">spring.jpg</a>.Laying out Graphshttp://guess.wikispot.org/Laying_out_Graphs2007-08-11 00:05:37EytanAdarUpload of image <a href="http://guess.wikispot.org/Laying_out_Graphs?action=Files&do=view&target=circle.jpg">circle.jpg</a>.Laying out Graphshttp://guess.wikispot.org/Laying_out_Graphs2007-08-11 00:05:26EytanAdarUpload of image <a href="http://guess.wikispot.org/Laying_out_Graphs?action=Files&do=view&target=random.jpg">random.jpg</a>.Laying out Graphshttp://guess.wikispot.org/Laying_out_Graphs2007-08-11 00:05:07EytanAdar <div id="content" class="wikipage content"> Differences for Laying out Graphs<p><strong></strong></p><table> <tr> <td> <span> Deletions are marked with - . </span> </td> <td> <span> Additions are marked with +. </span> </td> </tr> <tr> <td> Line 23: </td> <td> Line 23: </td> </tr> <tr> <td> <span>-</span> --&gt; [[Image(r<span>a</span>n<span>dom</span>.jpg)]]&lt;-- </td> <td> <span>+</span> --&gt; [[Image(<span>sp</span>r<span>i</span>n<span>g</span>.jpg)]]&lt;-- </td> </tr> <tr> <td> Line 27: </td> <td> Line 27: </td> </tr> <tr> <td> <span>-</span> --&gt; [[Image(r<span>andom</span>.jpg)]]&lt;-- </td> <td> <span>+</span> --&gt; [[Image(<span>f</span>r.jpg)]]&lt;-- </td> </tr> <tr> <td> Line 31: </td> <td> Line 31: </td> </tr> <tr> <td> <span>-</span> --&gt; [[Image(<span>rando</span>m.jpg)]]&lt;-- </td> <td> <span>+</span> --&gt; [[Image(<span>ge</span>m.jpg)]]&lt;-- </td> </tr> <tr> <td> Line 36: </td> <td> Line 36: </td> </tr> <tr> <td> <span>-</span> --&gt; [[Image(<span>random</span>.jpg)]]&lt;-- </td> <td> <span>+</span> --&gt; [[Image(<span>physics</span>.jpg)]]&lt;-- </td> </tr> <tr> <td> Line 41: </td> <td> Line 41: </td> </tr> <tr> <td> <span>-</span> --&gt; [[Image(<span>ran</span>d<span>om</span>.jpg)]]&lt;-- </td> <td> <span>+</span> --&gt; [[Image(<span>m</span>d<span>s</span>.jpg)]]&lt;-- </td> </tr> <tr> <td> Line 48: </td> <td> Line 48: </td> </tr> <tr> <td> <span>-</span> --&gt; [[Image(<span>random</span>.jpg)]]&lt;-- </td> <td> <span>+</span> --&gt; [[Image(<span>cc</span>.jpg)]]&lt;-- </td> </tr> </table> </div> Laying out Graphshttp://guess.wikispot.org/Laying_out_Graphs2007-08-11 00:04:29EytanAdar <div id="content" class="wikipage content"> Differences for Laying out Graphs<p><strong></strong></p><table> <tr> <td> <span> Deletions are marked with - . </span> </td> <td> <span> Additions are marked with +. </span> </td> </tr> <tr> <td> Line 8: </td> <td> Line 8: </td> </tr> <tr> <td> <span>-</span> * Commands: random() or random(width,height) </td> <td> <span>+</span> * Commands: random<span>Layout</span>() or random<span>Layout</span>(width,height) </td> </tr> <tr> <td> Line 10: </td> <td> Line 10: </td> </tr> <tr> <td> </td> <td> <span>+ --&gt; [[Image(random.jpg)]]&lt;--</span> </td> </tr> <tr> <td> Line 13: </td> <td> Line 14: </td> </tr> <tr> <td> </td> <td> <span>+ --&gt; [[Image(circle.jpg)]]&lt;--</span> </td> </tr> <tr> <td> Line 21: </td> <td> Line 23: </td> </tr> <tr> <td> </td> <td> <span>+ --&gt; [[Image(random.jpg)]]&lt;--</span> </td> </tr> <tr> <td> Line 24: </td> <td> Line 27: </td> </tr> <tr> <td> </td> <td> <span>+ --&gt; [[Image(random.jpg)]]&lt;--</span> </td> </tr> <tr> <td> Line 27: </td> <td> Line 31: </td> </tr> <tr> <td> </td> <td> <span>+ --&gt; [[Image(random.jpg)]]&lt;--</span> </td> </tr> <tr> <td> Line 31: </td> <td> Line 36: </td> </tr> <tr> <td> </td> <td> <span>+ --&gt; [[Image(random.jpg)]]&lt;--</span> </td> </tr> <tr> <td> Line 35: </td> <td> Line 41: </td> </tr> <tr> <td> </td> <td> <span>+ --&gt; [[Image(random.jpg)]]&lt;--</span> </td> </tr> <tr> <td> Line 41: </td> <td> Line 48: </td> </tr> <tr> <td> </td> <td> <span>+ --&gt; [[Image(random.jpg)]]&lt;--</span> </td> </tr> <tr> <td> Line 47: </td> <td> Line 55: </td> </tr> <tr> <td> <span>-</span> * Shift overlapping edges a little bit along a curve so that you can see that there are multiple edges between nodes. See Figure <span>n</span> for an example. </td> <td> <span>+</span> * Shift overlapping edges a little bit along a curve so that you can see that there are multiple edges between nodes. See Figure <span>below</span> for an example. </td> </tr> <tr> <td> Line 51: </td> <td> Line 59: </td> </tr> <tr> <td> <span>- </span> </td> <td> <span>+ * Isom Layout<br> + * Command: isomLayout()<br> + --&gt; [[Image(isom.jpg)]]&lt;--</span> </td> </tr> <tr> <td> Line 58: </td> <td> Line 68: </td> </tr> <tr> <td> <span>- --&gt;<br> - randomLayout()</span> </td> <td> <span>+ --&gt; [[Image(adjust.gif)]]&lt;--</span> </td> </tr> <tr> <td> Line 61: </td> <td> Line 70: </td> </tr> <tr> <td> <span>- [[Image(random.jpg)]]<br> - &lt;--</span> </td> <td> </td> </tr> </table> </div> Laying out Graphshttp://guess.wikispot.org/Laying_out_Graphs2007-08-11 00:00:17EytanAdar <div id="content" class="wikipage content"> Differences for Laying out Graphs<p><strong></strong></p><table> <tr> <td> <span> Deletions are marked with - . </span> </td> <td> <span> Additions are marked with +. </span> </td> </tr> <tr> <td> Line 1: </td> <td> Line 1: </td> </tr> <tr> <td> </td> <td> <span>+ = Laying out Graphs =<br> + <br> + One of the most critical aspects of visualizing graphs is to get nice looking layouts. The figures above represent a sampling of the layouts provided by GUESS which you can apply to your graphs. A number of the guess layouts are iterative. That is they are always trying to “improve” and thus may never converge. For these layouts you may predefine how many loops they should run for. If you choose not to define a limit the layout algorithms will run until convergence or will show a dialog every 30 seconds asking if you would like to continue.<br> + <br> + Currently GUESS provides the following layouts<br> + <br> + * Random<br> + * Commands: random() or random(width,height)<br> + * Randomly lays out nodes in a 1000 x 1000 pixel space or width x height if specified<br> + * Circlular<br> + * Commands: circleLayout()<br> + * Lay all nodes in a circle<br> + * Kamada-Kawai<br> + * There are currently 3 Kamada-Kawai implementations in GUESS: kkLayout(), jkkLayout1(), and jkkLayout2()<br> + * The first was transferred from Zoomgraph and the second two are the KKLayout and KKLayoutInt from the JUNG toolkit<br> + * Note: the kkLayout command will fail on graphs that have multiple components<br> + * Spring Layouts<br> + * There are currently 2 Spring layout implementations in GUESS: springLayout(…) and jSpringLayout(…)<br> + * The first was transferred from Zoomgraph. The second is the JUNG implementation.<br> + * Both will accept a “max” parameter to indicate how many loops should be run<br> + * Fruchterman-Rheingold<br> + * There are currently 2 Fructerman-Rheingold implementations in GUESS: frLayout() and jfrLayout()<br> + * The first was transferred from Zoomgraph and contains a slight modification to ensure nodes do not overlap. The second is the JUNG implementation<br> + * GEM Layout<br> + * Commands: gemLayout()<br> + * Lay all nodes in using the GEM algorithm<br> + * Physics Layout<br> + * Commands: physicsLayout(…)<br> + * Lay all nodes in using a “physics” (spring-type) layout algorithm. You may use a “max” parameter to indicate when this should stop.<br> + * Note: this is a port of [http://www.schmuhl.org/graphopt/]<br> + * Multi-Dimensional Scaling Layout<br> + * Commands: mdsLayout()<br> + * Does a mutli-dimensional scaling on the graph where node-node distances are defined by the connecting edge weight<br> + * Note: currently uses the “weight” attribute on edges to determine similarity/dissimilarity. This will be generalized to any property in the future.<br> + * Radial Layout<br> + * Commands: radialLayout(center)<br> + * Places the center node in the center and places nodes connected to it at increasing radii based on shortest path.<br> + * Circular-Constrained Layout<br> + * Commands: g.circleLayout(field,center)<br> + * Places the center node in the center and each of its neighbors around it with the radius based on value of field (works for both edge and node fields).<br> + * Rescaling layouts<br> + * Commands: rescaleLayout(height,width) or rescaleLayout(percent)<br> + * Rescale all the nodes to fit in an array of height x width or reduce/increase the dimensions by %percent.<br> + * Edge Shifting<br> + * Command: readjustEdges()<br> + * As of version 1.0.3 we also have the commands expandOverlapping() which is the same as readjustEdges() and compressOverlapping() which does the opposite.<br> + * Shift overlapping edges a little bit along a curve so that you can see that there are multiple edges between nodes. See Figure n for an example.<br> + * Bin Pack<br> + * Command: binPackLayout()<br> + * This will pull together disconnected graph components into a nicer view.<br> + <br> + <br> + By and large layouts are executed in their own loops so that they do not take over the UI rendering pipeline. Layouts will also center the display to fit all the nodes. This is also an asynchronous process. At times you may want to add layout operations into your scripts. You may wish to make use of the commands:<br> + <br> + * setSynchronous(state) where state is a Boolean (true/false) which will tell the layout algorithms whether to run in their own thread (default false, the system is asynchronous)<br> + * centerAfterLayout(state) where state is a Boolean (true/false) which will allow/prevent GUESS from centering after a layout (default true).<br> + <br> + --&gt;<br> + randomLayout()<br> + <br> + [[Image(random.jpg)]]<br> + &lt;--<br> + [programmatic control of layouts]</span> </td> </tr> </table> </div>