This Flash component shows a force-directed layout graph. The graph nodes and connections are specified in an XML file, and can contain any number of links between the nodes. The graph is layed out such that the distances between the nodes dynamically "balance", giving the maximum display space to each node. Also each node can "pop up" after a predetermined delay time, allowing the graph to be incrementally constructed in front of the viewer. The font size, foreground color, and background color of each node can be defined.

Both the nodes and the links are active. Nodes are draggable; you can select one with the mouse, left-clicking, and dragging the node to a new location while all the connected nodes follow it. If a node is dragged beyond the image limits, it automatically snaps back to within visible range. Nodes can contain hyperlinks to other web pages (in the example below, double-click on Node1 to go to our homepage); they also have tooltips that are visible by hovering the cursor over the node. Links can be clicked to display a popup window with additional information.

The graph is defined by a simple input XML file that contains information about each node and link (edge). For example, here's some of the XML that defines this graph:

<?xml version="1.0"?>
<graph delay="1000" >

<!-- nodes -->
<node id="node1" fgcolor="white" bgcolor="blue" href="test.txt">
<text>Node1</text>
<tip>This is node1</tip>
</node>

<node id="node2" fgcolor="white" bgcolor="blue">
<text>Node2</text>
<tip>This is node2</tip>
</node>

<!-- edges -->
<edge fgcolor="blue" from="node1" to="node2">
<label>link1</label>
<info>This is link1</info>
</edge>

</graph>

This component has been developed in OpenLaszlo and is a standard Flash SWF file that can be embedded into any webpage. It is currently under development, so check back soon for updates, or please contact us for more information. We are happy to discuss customizing this component for your specific needs.