Constellation Roamer™ has four basic components:
Embedding the Constellation Roamer SWF is just like embedding any other Flash movie. You can download sample HTML code by right-clicking the link below and choosing "Save as...".
Constellation Roamer can receive the following parameters as flash_vars.
data.urlallows you to specify where in the query string the values get passed through.
The configuration file includes parameters for customizing the appearance and the interface for loading data. It also contains licensing information. You can download a sample configuration file by right-clicking the link below and choosing "Save as...".
There are currently two methods for getting your data into the Constellation Roamer visualization. The first option is to put all the graph data into an XML file which is loaded when the visualization starts up. The other option is to use a REST-like interface where data can be loaded as needed.
Using an XML file to store graph data is the simpler of the two methods but is not appropriate for large datasets. If the XML file gets too big, then there will be a noticable delay before the visualization renders.
The format for representing the graph data in XML is a list of nodes and a list of edges. Each node element must have a unique ID and each edge element must have a unique ID. Edge elements are also required to have the attributes "tail_node_id" and "head_node_id" indicating the IDs of the nodes that the edge connects.
You can download a sample XML file by right-clicking the link below and choosing "Save as...".
Once the XML file has been created, it needs to be uploaded to a webserver and the
data.url parameter should be set to the URL of the XML file.
Unlike the first method, above, the REST-like interface may receive several requests from a Constellation Roamer SWF. As the user navigates the graph, new data is loaded from the server in the form of a tree. The tree is defined by the root node and a depth parameter. For example, if the SWF requests a tree with a depth of one, the script should return just the root node. If the depth parameter is set to two, the script should return the root node, its neighbor nodes, and all edges between those nodes. For a depth of three, the script would return the root node, its neighbors, their neighbors, and all edges connecting those nodes.
To receive the parameters for the root node ID and the tree depth, the strings "[node_id]" and "[depth]" need to be placed somewhere in the value of
data.url in the XML configuration file. Here are two examples:
<!-- this example uses a typical PHP script URL --> <url>http://example.com/tree.php?
<!-- this example uses a more REST-like URL -->
The REST-like interface should return the graph data in the same format as in the XML file method above. You can download a sample XML file by right-clicking the link below and choosing "Save as...".
One important difference between the returned XML is that each node element has an attribute, "depth_loaded." This value must indicate the depth of the tree rooted at that node, as contained in the response. For example, if a request was made for the tree rooted at node A with a depth of two, the node element for node A will have a depth_loaded value of two since the response includes that node and its neighbors. The neighbors of node A will also be included in the response and their depth_loaded attribute should have a value of one since not all their neighbours will be included in the response.
The depth_loaded attribute is used by the Constellation SWF to determine whether more information needs to be loaded from the server. When the depth_loaded value of a node is less than the
data.min_load_depth value in the configuration file, a new request will be sent to the server.
If you need to keep track of multiple instances, set the
Called when the Flash movie is first loaded.
Called when user interaction causes the selected node to change. Not that calling the
setSelectedNodeID does not trigger this event handler.
Called when the user clicks a node. If the user drags the node or holds the mouse down for too long, the click is ignored and this event handler is not triggered.
Called when the user double clicks a node. If the user drags the node or holds the mouse down for too long, the click is ignored and this event handler is not triggered.
Called when the user clicks an edge.
Called when the user double clicks an edge.
Returns the ID of the currently selected node.
Selects the node with the given ID. For dynamic data interfaces, a request will be made to the server if the node hasn't been loaded already.
Gets the depth of the tree which is being displayed by Roamer. The integer returned indicates the distance between the selected node and its furthest neighbor.
Sets the depth of the tree to be displayed by Roamer. To display the selected node and its neighbors, use a depth of 2. To display their neighbors as well, set the depth to 3.
Sets the "passthru" variable which is fed to the data URL. By setting this dynamically, you can change the dataset that's being loaded.
Clears the graph data model.
Reloads the graph data model. In the static XML interface mode, this reloads the entire graph. For the REST tree interface mode, only the tree rooted at the currently selected node is reloaded.
Adjusts the zoom scale to fit the visualization on the screen. This has the same effect as clicking the zoom to fit button.
If you're interested in using Constellation for your project, find out about purchasing a license.