Putting (your own)

on the Web

Interactive Poset and Lattice Drawing Java Applet

Peter Jipsen

On this page is a collection of posets that are displayed by an interactive Java applet I wrote while on sabbatical at Vanderbilt University, Fall 1999. The applet is based on the GraphLayout applet, which is part of the JDK bundle. Partial support from Vanderbilt, NSF, and the South African National Research Foundation is gratefully acknowledged.

The aim of this applet is to

The applet is very compact and should work with any Java enabled web browser (such as Netscape 3 or IE 4 or higher). By reading below about how to write a webpage that describes a poset (or adapting one of the examples below), it is easy for anyone to display and manipulate their own posets.

Another excellent Lattice Drawing applet can be found on Ralph Freese's homepage. His applet applies the spring embedding algorithm in 3 dimensions.

Here are some examples of my applet: Click or drag on an element to fix it to the nearest grid point, click again to release it (read below if you are puzzled by the controls; they have to be manipulated in a certain way to get decent embeddings).


Order algebras


There are many ways of embedding a given poset in the plane, and the applet developed here takes the approach of letting the user assist in finding a reasonable embedding (if at all possible). Several other such programs exist, but I'm not aware of any freely distributed applets (except Ralph's mentioned above). If you find these pages useful and/or download the applet, please let me know (jipsen@chapman.edu). Also, if you create some interesting posets, please send me the address of the webpage, so I can add a link on this page.

The poset and an initial embedding are passed to the applet as a string parameter. The vertical heights of elements are fixed (it is usually easy to determine good levels for a poset). Elements on the same level can be made to repel each other, and they can also be attracted to grid points. The strength of the repulsion and attraction is given by a number in the range 0 to 100 (or more if you like). The edges of the poset are "springs" that want to be a certain natural length, which initially is the vertical distance between the nodes they connect. This pulls the nodes closer together, so connected components will collapse to a vertical line in the absence of any repulsion or attraction.

Interacting with the poset

Clicking anywhere in the applet area above the buttons, causes the nearest poset element to jump to the grid point nearest to where the pointer is. The label of the element is shown while the mouse button is held down, and the element can be dragged to other gridpoints. If the parameter "noVerticalMove" is true (by default it is) then elements can only be moved horizontally. When the mouse button is released, the element is anchored in the place where it last moved to (indicated by a red circle around the element). Is is often useful to pin down a few elements of the posets while the rest are arranged by the spring embedding algorithm. Clicking on an anchored element again, without moving it, removes the anchor.

The controls

Start/Stop: This button starts or stops the forces acting on the nodes.

Repel and Attract: As mentioned above, these values can be set to some natural number, and they affect the dynamics of the poset.

Grid X: The horizontal distance between gridlines (in pixels). A value of 0 makes the grid invisible (useful when printing the webpage).

Edge L: The natural length an edge would like to be. Edges shorter than this length repel the nodes they connect, edges longer than it attract them. Setting this value to 0 eliminates any edge forces.

Adjust: Sets the natural length of each edge to it actual current length. This has the effect of relaxing the poset into a fixed minimum. Useful towards the end when a good embedding has been found.

Output: Prints the current embedding as a list of [n,x,y] triples on the Java console where it can be copied and incorporated as a parameter string into the current applet tag. (A later version may also produce html of LaTeX output.)

Labels: Shows all the labels associated with the nodes (see below).

Printing: Try the print command for your browser.

Entering your own custom poset

This is really easy: you simply write a webpage with the list of upper covers of the poset (and a few parameters as explained below). The applet can be loaded remotely from this webpage or the necessary four *.class files (Poset.class, GraphPanel.class, Node.class, Edge.class) can be copied to your own directory. These files are very small, so this applet does not take long to load.

The simplest way to get started is to modify the html source of one of the pages available here. Each element in the poset corresponds to a line of the form

[n, x, y, label, [u_1, u_2, ..., u_k]],

where n is the name of the element , x,y is an initial position for this element, the label is any string (delimited by double quotes), and the u_i's are the names of the upper covers of this element. The name of an element can be any integer or string (the latter delimited by double quotes), but it must be unique for each element.

Colors: If the label string ends with #color, where color is one of black, blue, cyan, darkGray, gray, green, lightGray, magenta, orange, pink, red, white, yellow (or a RGB value of the form #hhhhhh, where h is a hex digit) then the node will appear in this color. The default node color is yellow. Similarly, each u_i can optionally be preceded by a quoted string of the form #color giving the color of the edge from element n to element u_i. The default edge color is black.

The list of all these lines is read by the applet as a parameter string (in single quotes) called poset. Spaces are ignored (except in quotes labels). The parameters maxX and maxY should be as large or larger than the maximal x and y coordinates of the initial embedding. The width given in the applet tag should be large enough to show all the controls at the bottom of the applet panel (800 pixels is ample, but if you are not interested in the interactive controls, smaller values will do).

Here is a simple html page that displays the 5 element modular lattice:

<title>Display Diamond</title>
<applet codebase="http://www1.chapman.edu/~jipsen/gap/" code="Poset.class" width=800 height=150>
<param name=maxX value="25">
<param name=maxY value="2">
<param name=poset value='
[1, 1,0, "0", [2,3,4]],
[2, 0,1, "a", [5]],
[3, 1,1, "b", [5]],
[4, 2,1, "c", [5]],
[5, 1,2, "1", []],'>
<a href="http://www1.chapman.edu/~jipsen/gap/Poset.java">The source.</a>

Here is what you should see if you copy these lines into a html file (assuming your browser is Java capable):

The source. Note that on this page is only a graphic image of the applet. Click here if you want to interact with a "live" version of the applet.

I do not expect that my format for describing posets on webpages will change much, and I will try to keep this applet backward compatible with the format described here. There are several optional parameters that can be included in the applet tag, and this list will probably grow. However, each (future) parameter will default to some value that should not significantly affect the behavior of the applet relative to its current version. Here is a list of the current parameters and their default values:

That's it!

For an example using the color features and other parameters, look at the html source for the logo of this page.

If you have any problems getting this to work, feel free to email me, and I will try to fix the problem or improve the applet. There are many improvements that are possible. However, I do not want to include specific code for calculating within the poset. The aim of this applet is to display posets, and allow simple interactions that preserve the covering graph (note that if noVerticalMove is false, then it is possible to destroy the order or even the property of being a Hasse diagram). I also do not envision another poset editor, where the applet allows the user to add or delete edges (afterall the webpage author should decide which poset she wants to display; the interactivity merely allows the reader to inspect the poset for different embeddings).

A note on entering posets

Usually I do not enter posets by hand. I like to use the GAP (Groups Algorithms Programs) system to calculate algebraic structures, and if they have interesting associated posets or lattices, I write this output to a html file in the above format. The initial embedding chosen automatically by my programs is often very bad (see e.g. FP(4) unordered), so I use the applet described here to find a better embedding and then produce a revised html file (or a LaTeX file).


I would like to thank Ralph Freese for many interesting discussions about lattice drawing that motivated the applet described here. I would also like to thank him, Jarda Jezek and J.B. Nation for writing the excellent book Free Lattices, with the chapter on Computational Lattice Theory.

Last modified by Peter Jipsen, Nov 19, 1999