Home > Archive > Recipes & articles > Trellis: Blogging for ideas > Working with SpicyNodes
While still taking shape, Trellis needed an appropriate method for visualizing its growing knowledgebase. Initially, the knowledgebase was displayed as a simple hierarchical list, which worked well for a small collection of posts. Once the hierarchy expanded, this kind of visualization proved inadequate.
In response to the need for better representation, I reviewed methods for interactively visualizing hierarchical systems. This search revealed many plausible options, yet no system seemed flexible enough to handle dynamic data or to be embedded within a blog.
Just as I began planning for a custom solution, an emerging Flash-based application entered the spotlight — then in beta development. Known as SpicyNodes, a radial mapping visualization software, it provided just the kind of flexible solution that I sought.
Much in the same way that the Page system of WordPress provided a way to implement a custom hierarchical structuring algorithm, the SpicyNodes system provided a way to create custom radial maps.
SpicyNodes is a platform for generating customized radial layouts of directed acyclic graphs. Its choice as a visualization tool turned out to be a rewarding decision not only in terms of saving time but also with regard to the user experience.
SpicyNodes is an interactive communication system that promotes intuitive browsing. It aims to organize online data by not only presenting information, but also by illustrating the relationships between items and concepts in a graphical manner. This allows the users to both easily find the information they seek and explore the larger context within which that information resides.
For its efficient operation, SpicyNodes relies on three key features: animation effects, layout algorithms, and interaction abilities. Each of these features is outlined below.
The animation effects used in SpicyNodes are based on an animation principle known as slow-in, slow-out. The acceleration effect is performed by using a nonlineaer function in the process of calculation of the animation keyframes. The SpicyNodes’ Reference Cookbook includes graphs illustrating how the animation effects unfold over time.
During the animation there are no geometry calculations. The nodes’ placement along animation frames is extracted from the keyframes array, so the path of all visual elements is planned before the animation starts. Using this approach prevents relatively complex real time calculations for many displayed nodes in the Adobe Flash Player environment, thus maintaining the smooth flow of animation.
Changing focus leads the display to a new layout, which in most cases reveals some sets of nodes that were not present in the previous layout. In order to help the user focus on the new node during animation, removing nodes from the new layout is accomplished on a gradient scale. Depending on their distance to the new focus nodes, the previously visible nodes disappear during the animation.
The radial layout engine of SpicyNodes is based on several fundamental algorithms that generate the layouts, and that allow layouts to be rearranged when changing the focus from node to node. The overall layout can be radial or directed, but the underlying engine is the same for both.
The core layout algorithm is common to many radial tree representations. The angles between tree branches are weighted based on the relative weights of each branch. Each node has a unique weight and in turn, the weight of each branch is the sum of the weights of all of its nodes. Thus, heavier branches are visually separated and the space between branches is proportionate to the total weight of all the tree nodes. Layer on top of the geometrical layout is a force-directed algorithm in which nodes repel eachother, helping prevent nodes and their labels from crowding into each other.
As the user navigates through the nodemap, the engine maintains an intuitive layout by providing a visual fusion of a typical tree exploration with a history-based navigation system. The layout algorithm uses constraints to transform the typical radial layout into a layout with radial clusters along a path of nodes between the currently selected focus and the root nodes. The path of radial clusters is almost straight, so the user exploring a tree is constantly oriented to the present direction to the root node.
This provides a sense of history - a logical connection of related contexts from the general context at the level of the root node to the narrower, local context at the level of the currently selected information. The SpicyNodes’ Reference Cookbook includes graphs and code excerpts exemplifying how the layout algorithms operate.
In order to provide the user with a tangible feel for the events, SpicyNodes employs panning and rotation systems. Based on physical models of motion, these systems allow the user to move and rotate the scene in an intuitive way.
Panning and rotation are not two separated handles, but form a compact display manipulation tool that can be used by simply dragging the mouse cursor on the viewport background. Which effect—panning or rotation—affects the display more intensively depends upon the direction of the cursor motion. All the while, the display manipulation remains very natural and intuitive.
The relation between the rotation (moment) and the panning (linear velocity) depends on a nonlinear function. Where the angle between the center of mass and the cursor motion vector (in a short period of time) is relatively large, the rotation has stronger effect. Conversely, where this angle is relatively small, panning has a stronger effect and the stage moves much faster than it rotates, or it does not rotate at all.
The nodes themselves have incorporated features that complement the interaction. They can be expanded with one click to show additional information. In any setting, the contextual controls include a “Show Info” option that brings forth a text field. This field contains a piece of associated information that is either auxiliary or explanatory to the node in focus. Nodes can display formatted text, images or a combination of fields. The SpicyNodes’ Reference Cookbook includes pictures illustrating the nodes’ capabilities.
SpicyNodes has incorporated an open XML-based Application Programming Interface (API), which makes it easy to embed SpicyNodes in an existing site, link to it with a direct URL from a site where a SpicyNodes map is hosted, or integrate it into other applications.
SpicyNodes can be placed in an existing site by using a frameset and embedding it into an HTML frame as a Flash object, or alternatively, by linking to it with a direct URL from a site where SpicyNodes runs as a hosted Web service, by the means of a snippet of HTML integration code built around the
With all of these options, complete customization is allowed by manipulating two XML files: nodes xml and settings xml. The nodes xml file describes the hierarchy that SpicyNodes renders on the screen. This file itself represents a nested structure of node names and descriptions. The settings xml file allows a developer to adjust the appearance and interactivity of a SpicyNodes implementation. This file includes various tags and attributes, each affecting a particular aspect of SpicyNodes’ visual and behavioral style.
The SpicyNodes’ Developer’s Cookbook goes into complete detail about how to manipulate the two configuration files, and to what effect. Information on the node map file is available in the “Nodes xml file” section of the Developer’s Cookbook, and the “Settings xml file” section of the same cookbook provides information about the style file. Trellis has made extensive use of the SpicyNodes customization abilities, so understanding the options allowed by editing the configuration files provides a valuable insight into how this part of the system was designed to work.
