IEEE Xplore At-A-Glance
  • Abstract

SpicyNodes: Radial Layout Authoring for the General Public

Trees and graphs are relevant to many online tasks such as visualizing social networks, product catalogs, educational portals, digital libraries, the semantic web, concept maps and personalized information management. SpicyNodes is an information-visualization technology that builds upon existing research on radial tree layouts and graph structures. Users can browse a tree, clicking from node to node, as well as successively viewing a node, immediately related nodes and the path back to the "home" nodes. SpicyNodes? layout algorithms maintain balanced layouts using a hybrid mixture of a geometric layout (a succession of spanning radial trees) and force-directed layouts to minimize overlapping nodes, plus several other improvements over prior art. It provides XML-based API and GUI authoring tools. The goal of the SpicyNodes project is to implement familiar principles of radial maps and focus+context with an attractive and inviting look and feel in an open system that is accessible to virtually any Internet user.



Graphs and trees organize concepts, visualize relationships, and may be used to arrange topics of distinct domains in various scale levels. They allow browsing structured data representing knowledge in which users may or may not be expert. These visual representations are intuitive, corresponding to real-life phenomena like tree branches, subway and bus lines, and social networks. They are useful for users who like to learn by "seeing" and "doing."

Figure 1
Fig. 1. SpicyNodes is a Web-based system that builds upon existing radial-map visualizations and focus+context. It enables virtually any Internet user to easily author attractive and inviting radial maps and then embed them into Web sites and blogs. Screenshots of SpicyNodes implementations: (A) SpicyNodes home page explains the project using the SpicyNodes radial-mapping system; (B) the poem Postponed by visual poet Joe Romano demonstrates SpicyNodes ability to be utilized in a broad range of creative uses. See Fig. 11 for more screenshots.

The purpose of this work is to merge the goals of producing appealing and aesthetically attractive nodemaps for end users, with an open authoring system that non-technical people can readily use to create their own nodemaps. Our prior research has found that users often have trouble finding information, and that there are significant gaps between how easily designers and web site managers perceive the navigability of their sites, and how easily users can find information [8]. To avoid overestimating ease-of-use and appeal, we solicited ongoing user feedback over 3 years of development.

This paper presents SpicyNodes (, an environment for the general public to author trees, potentially extendible to networked graphs (called nodemaps) that are appealing and usable by virtually any Internet user. The result is an easy way to add interactive radial tree layouts to everyday Web sites and blogs. Our work builds on existing research in radial map visualizations and focus+context, with several modest cosmetic and usability enhancements. The following are key features of SpicyNodes:

  • Designed for the public - The system has an easy-to-use online GUI for authoring, as well as a public API with both an XML syntax for programmers and a simple text syntax for non-technical authors. It runs in any browser with Adobe Flash support. Content can be text, images, simple HTML and CSS.

  • Enhancements over prior art - The novel contributions of this work include: oval orbits, a hybrid layout that combines Pavlo's parent-centered radial layout with force-directed layout, toggles to adjust visibility of children nodes without changing focus, and real-time adjustment of focus+context.

1.1 Nodemaps

This paper uses the term "nodemap," which we define as a hierarchical data structure that can be implemented using XML. In contrast to vertices derived from graphs terminology defining abstract level entities, nodes of a nodemap, besides their structural relationship to other nodes that correspond to vertices, may be understood as records with a unique node identifier, label, descriptive attributes and Web resource identifiers referencing text and multimedia content. Special "link" nodes referencing other nodes in the same nodemap support non-hierarchical edges that formally cannot exist in XML. Link nodes form part of the nodemap hierarchy but have no descendants, so in trees terminology they are leafs. A nodemap is a hierarchical structure of nodes and link nodes.


Related Work

Navigation in trees and other linked structures has been well studied. There are several software toolkits for the information-visualization community that can generate radial maps using published algorithms. Early toolkits were written for desktop uses in C or Java (InfoVis, IVC [11] [16]. More recently, the Flare toolkit for Adobe Flash provides an easy way for programmers to work with visualization algorithms and deliver the results to Web browsers [13]. Rather than provide an API for programmers, the SpicyNodes API is specifically intended to allow end users to customize the appearance and specify the content of trees and structural graphs.

Graphs are relevant to many online tasks such as visualizing social networks, product catalogs, educational portals, digital libraries, the semantic web, concept maps and personalized information management. Radial tree layouts allow users to browse information, clicking from node to node, successively viewing a node and immediately related nodes, taking the path back to the "home" nodes. SpicyNodes builds on existing research on radial graph layouts, particularly those of Pavlo, et al. [29] and Yee, et al. [38] and extends them with support of invisible edges that join vertices beyond the hierarchical tree structure, which means navigation through graph structures still using tree representation and no edge crossing. Bachmaier [2] displays non-hierarchical trees with several crossing-reduction techniques, which are not optimized for speed or focus changes.

Yee's work added smooth transitions to radial graph layouts introduced by Eades [10] and explored further by di Battista et al. [1]. Yee's key innovation dealt with animated transitions of the currently selected focus node. Their techniques of easing constraints allow users to change the focus node in a graph, dynamically changing the layout with smooth transitions. In these nodemaps, angular size reflects the number of descendants of a node, linearly interpolating the polar coordinates, and using constraints for ordering and orientation to keep transitions easy to follow. Pavlo extended Yee's technique, with each node positioned on a coordinate system centered on its own parent rather than on a single coordinate system for all nodes [29], which we felt was a more visually pleasing layout, evocative of tree branches. For a recent survey of node-visualization methods from the point of view of design, management and browsing of ontologies, see Katifori et al. [18].

While both the Yee and Pavlo techniques produce balanced layouts of small icons, practical problems arise when incorporating text into the nodes, because text boundaries are rectangular. We added techniques to help rectangular nodes avoid overlap. One of them is a force-directed algorithm [9] to minimize overlapping. Two successful force-directed visualizations on the Internet are TuneGlue and Visual Thesaurus. Two disadvantages of using solely a force-directed algorithm [15] are unpredictable layout for similar graphs and high CPU consumption with O(N3) calculations. SpicyNodes incorporates layout constraints to force-directed algorithms and a method of angular clustering, similar in concept to Quigley and Eades [30].


Summary of Features

The goal of the SpicyNodes project is to implement familiar principles of radial maps and focus+context with an attractive and inviting look and feel in an open system that is accessible to virtually any Internet user. Freely available to the public, nodemaps have been created on a broad range of topics ( Nodemaps can be viewed directly on the SpicyNodes site or are easily embedded into blogs or Web sites. Embedding a nodemap in another site involves a simple HTML <object> syntax, and the ID for a nodemap.

3.1 Designed for public authoring and use

Designed for public authoring and use, SpicyNodes is a free service with accessible GUI authoring tools and easily editable text files for configuration. It is written in Adobe Flash (ActionScript 2) and works in the vast majority of Internet browsers with Flash version 9 or later. The engine supports skinnable styles, providing authors with designs ranging from simple rectangles and ovals to clouds, stars and various artistic shapes. Full-screen layouts are available.

3.1.1 Graphical authoring environment

Users can choose the visual style and features of their nodemaps and edit both text and multimedia content of their nodes. In the "Edit style" mode, authors choose the appearance of their SpicyNodes. In the "Edit content" mode, authors create and edit content. Screenshots of both modes are in Figure 2.

Nodes can contain various type of content. When a node is peripheral, it can display an image and/or a text label. When a node is the focus, it also displays descriptive content. Simple HTML, tables and CSS are supported for the content of any node.

Figure 2
Fig. 2. There are two key online GUI authoring tools that make nodemaps easy to author and accessible to virtually any user. One provides users with myriad design options to define their nodemaps? appearance, while the other enables them to add and edit text and multimedia content. (A) Using the "Edit style" tool, authors choose pre-existing styles, auto-generate random styles, customize parameters and import/export styles. (B) Using the "Edit content" tool, authors create and edit nodes, drag and drop nodes, adjust colors, upload images, define links, set other parameters, and import/export content. There is also an API to author via XML and text files.

3.1.2 Integration with the Web and accessibility

Nodemaps can be viewed and integrated in several ways. Each nodemap has a unique URL that can be viewed directly from the SpicyNodes site. Nodemaps can also be embedded into Web sites and blogs, similar to the way in which video is embedded into sites, using a provided HTML snippet.

SpicyNodes has complete UTF-8 support and swappable character sets, allowing nodes to be authored in most languages. We have pre-set language packs for UI elements (e.g., "zoom," "home") for English, French, German, Portuguese, Russian, Spanish and Chinese, and will add more language sets in the future. A simulator for colorblindness and cataracts helps authors make accessible styles.

Node content is accessible via mouse-free navigation (using keyboard controls), text equivalents are available to screen readers via Adobe Flash player's standard accessibility interfaces, and there is a text-only version for screen readers and search engines.

3.1.3 Types of links

All nodes link to their adjacent nodes. Other available links are:

  • Links to other nodes in the same nodemap (see 3.2.6);

  • "Go to nodes" - Links to other nodemaps;

  • "Go to page" - Links to other URLs, in same or new window;

  • Javascript calls, e.g., to have a node trigger an action elsewhere on the same page, including an author's own JavaScript functions; and

  • Links can be part of the HTML for a node.

3.1.4 XML API

For technically inclined users, or for integration with other systems, SpicyNodes has a simple XML API. A customized nodemap is generated from two files, a simple "settings XML" and "nodemap XML" source. Node attributes include: label, description (viewed when a node is center focus), color, images or SWFs, links, HTML file to be displayed in the center node, and embedded sounds and sound controls. For more information about the XML format, see our online documentation or export XML of a sample nodemap.

3.1.5 Nodemap text file

Nontechnical authors can edit their maps using an alternative text format. The input syntax provides access to all main node attributes, and has been used by several hundred authors to create content. Its simplest form uses "+" to indicate the depth in the tree, and "::" to indicate the content of the node. The following is an example. The full syntax is shown in Table 1.

+ Level A (central node)
:: Descriptive text
++ Level 1 (child to central node)
:: Descriptive text
+++ Level a (child to Level 1 node)
:: Descriptive text
Table 1
TABLE 1 Full syntax options for text import.

3.1.6 Deployed using cloud servers

Any system for broad public use must scale to large numbers of users. While authoring involves direct access to our servers, viewing a finished nodemap does not touch our servers at all. To scale to unlimited viewers, all nodemaps are uniquely defined by two XML files, and those files are hosted by a cloud server maintained by's Simple Storage System (S3) and CloudFront. S3 is real-time cloud storage, and updates are immediately public. CloudFront is a caching system, with a key benefit of multiple "edge locations," providing accelerated access to source components by users worldwide. CloudFront caches files for 24 hours, so we only use CloudFront for system files, not user files that may change [4].

The result is that, for viewing, there is zero load on our servers, and all delivery issues are handled by S3 and CloudFront. Analytics are done using Google Analytics.

3.2 Enhancements over prior art

We investigated methods to improve radial tree layouts exploration. Analysis of Yee, et al., and Pavlo, et al., leads us to the following extensions.

3.2.1 Subtree separation and algorithm

The parent-centered algorithm used for SpicyNodes layouts is created basing on recursive linear interpolation of polar coordinates of children [1]. The angular space given to each root (R) child is measured using two values. First, an angle calculated based on the child subtree magnitude (complete number of vertices) similar to Yee's approach. The second angle is calculated following Pavlo's equiangular method. Further generations follow the magnitude-based approach and parent as a center for polar interpolation. Our recursive algorithm uses only a tree subset, displaying only nodes that are close to the center node. Always visible are the initial root oR (root of the initially loaded hierarchical data), its children (oRC) and a set (RP) of vertices from the path between oR and current root R.

A vertex v belongs to subtree sT of tree T, if the following is true: if v=R or if v=oR or v ∊ RP or if v ∊ oRC or (if d ≤ Md and sT≤M), where d is v distance to R, Md is the maximal distance to R, and M is the maximal number of allowed nodes in the layout.

Having a vertex v belonging to subtree sT, the angular limits of v are calculated as following:

a) if v is R, then v startAngle = 0 and endAngle = 2π.
The root is initially placed in the center of display, e.g. P(0,0)
b) if v ∊ R_children, startAngle = 0
repeat for each v:
endAngleMode1 = startAngle + 2π * v_branchMagnitude / R_branchMagnitude
endAngleMode2 = startAngle + 2π / R_childrenNumber
endAngle = bias · endAngleMode1+ (1–bias) · endAngleMode2, where bias ∊ (0,1)
c) otherwise , startAngle = Parent_startAngle
repeat for each v: endAngle = startAngle + Parent_wedge
· v_branchMagnitude / R_branchMagnitude

Three layout properties derive from this basis. Composed magnitude and equiangular approaches improve perception of hidden data and prevent narrow wedges of first-generation nodes, even for extremely unbalanced trees. Displaying whole root path and original root with its children improves maintaining the mental map during exploration. Finally, displaying only subtree separation reduces drawing computation, allowing exploration of large trees, while two preceding properties prevent losing orientation. The following improvements extend these aesthetics.

3.2.2 Oval orbits

Wide rectangular node labels, to overlap on the top and bottom sections of the circle. SpicyNodes uses oval orbits rather than typical circular shapes, because most monitors have a landscape orientation and because words are wider than they are high. As a result, the layouts match the oval node shapes. Oval orbits are realized by warping nodes X-coordinates with a factor based on horizontal distance to the currently selected root. See Fig 3.

Figure 3
Fig. 3. SpicyNodes includes several features that improve on earlier radial map visualizations. The first enhancement over prior art is the use of oval orbits (rather than circular orbits) to prevent overlapping of wide nodes that contain text. Oval orbits are preferable because most monitors have landscape orientations and words are wider than they are high. In these examples, there are 8 nodes. (A) Circular orbits are clean for round nodes; (B) but tend to overlap with wider text nodes. (C) Oval orbits reduce overlapping.

3.2.3 Hybrid layout

The oval orbit accommodates approximately 6-8 node children. With more nodes, the children tend to overlap (Fig. 4A).

Figure 4
Fig. 4. SpicyNodes? second enhancement to earlier radial map visualizations is the implementation of a hybrid layout algorithm that helps prevent overlapping nodes when there are larger numbers of children nodes. In these examples, there are 16 nodes. (A) Layout with an oval orbit and purely geometric placement. (B) Alternating radii of the nodes from the parent in an oval orbit. (C) Layout after a force-directed repulsion to minimize node overlap.

To minimize overlapping, SpicyNodes uses a hybrid layout technique with three phases. In the first phase, the layout is generated with the basic algorithm (Fig. 4A). The second phase consists of altering children radii during polar coordinates interpolation with an effect of staggering children placement. In the third phase, with fully enabled layout interaction, there is used a forcedirected repulsion algorithm (Fig. 4C). Force-directed algorithms were introduced by Eades [9] for undirected graph layouts. Taking advantage of tree hierarchy, we could improve predictability of this heuristic method. Current root, the original root and nodes of the path between them are force emitters but not receivers, thus are fixed on their positions, allowing the surrounding nodes to float away in a predictable manner along semi-concentric rays.

3.2.4 Expansion (without focus change)

"Expansion" widgets allow a user to temporally display generations of nodes that do not form current layout. Expansion does not change the root. Temporally visible nodes are selectable. Temporal nodes must be adjacent to a displayed node or a node that appeared in a prior expansion event (Fig. 5). Expansion can be reproduced in one direction until reaching a leaf.

Figure 5
Fig. 5. SpicyNodes? third enhancement allows users to browse the tree and preview child nodes without changing focus. As users sequentially expand the children of nodes, previously expanded parent nodes hide their children, which prevents visual overload. Users can expand a node by clicking a toggle widget. (A) Initial layout. (B) A node on the right was expanded. (C) A further, next-level node was expanded.

3.2.5 Real-time focus+context control

SpicyNodes allows users to choose, in real time, the relative amount of information they want to see about the current focus node vs. its surroundings. This is an extension of prior research on ways to display focus+context, such as "fish-eye" techniques [3], [5], [12], [35]; re-projections [20]; non-Euclidean geometry (such as hyperbolic geometry [22], [26]; and other distortion effects [24], [23], [37]. An in-depth analysis of the different properties of these techniques can be found in Carpendale [5], [6], and more recently focus+context techniques were adapted for visual subjects in MoireGraph [17]. Various researchers have considered real-time shifts of the focus [31], [33], specifically the variable-zoom method from Schaffer et al. [36]. SpicyNodes implements the general concept of variable-zoom, simultaneously adjusting the layout, the node dimensions and the margins of text and content.

Users can adjust the "focus" via a slider or a handle on the center node, which affects the balance of focus+context, viewing a particular node in detail or viewing more of the big picture (Fig. 6). When a user adjusts the focus, he or she can shift from a minimal view of dots or short text labels to a detailed view with scrollable passages of text and multimedia.

Figure 6
Fig. 6. SpicyNodes? fourth enhancement gives users control over the relative balance of the center-focus node and surrounding nodes. A slider provides real-time focus+context control, so the user can shift from a minimal view of dots or short text labels to a detailed view with scrollable text and multimedia. (A) Focused out, the center node is a short text label. (B) Focused in, the center node contains more information.

3.2.6 Non-hierarchical connections

To prevent edge crossing, SpicyNodes, instead of using visible edges, allows clicking labeled "virtual" leaf nodes that join two adjacent graph nodes belonging to two distant areas. This allows cycle navigation to subsets that are often invisible in the current layout. Navigation between two distant areas is realized by the same smooth transition as any other root change. Before the transition, the "virtual" node's real reference is swapped into the tree as the current root. If two interconnected areas are close, they may contain common subsets of nodes. In these cases, duplicated nodes appear during transition, but the duplicated instances disappear in final transition frames. This guarantees uniquely labeled nodes in both the old and the new layout.

3.2.7 Other aesthetic and usability enhancements

SpicyNodes provides a draggable layout, giving users a tangible feel for the events by employing panning and rotation subsystems that are based on cross-product calculations simulating physical models of motion. Which effect (panning or rotation) and the anchor point or rotation effects depend upon the direction of the cursor motion and its distance from the center of mass of the layout.

To assist browsing, various UI elements are added that routinely appear in various design patterns throughout the web − for example, marked visited nodes, marked parents and an optional breadcrumbs display showing the path home. Authors can configure their control panel to include: help, volume, zoom, focus, full screen, previous, next, home, search and panel auto-hide option. A typical navigation panel is shown in Fig. 7.

Figure 7
Fig. 7. There are several available designs for navigation panels, offering search, zoom and focus controls, links for previous, home, and next, help, full screen and volume. In this example, the user misspelled the search query "Shakezpeeer," and the fuzzy search engine returned "Shakespeare" and other links.

A search engine supporting phonetic matching allows users to jump to a node if they know or suspect that it exists. SpicyNodes has a simple search engine with optional fuzzy matching that uses the "Double Metaphone" phonetic algorithm [28], which supports non-English words like European and Asian names. Because no phonetic algorithm is perfect, there are several other phonetic and fuzzy-match engines that could be used in its place [7]. Users can easily search from a navigation panel. Queries take less than a second to return, and a ranked listing of matching nodes appears so users can change focus to any matching node.

A tool for the general public must be aesthetically appealing and obvious. SpicyNodes' overall approach to usability and findability expands on the observations of Morville [25], Nielsen [27], and Krug [19].

SpicyNodes has a polished look and feel, developed from the input of 15 designers to explore visual ideas and styles, from conservative to futuristic and playful (see Acknowledgements for a list of designers). We tested layouts with a range of content types, from brief text to dense encyclopedic text and multimedia content. Some skins are relatively ornate, with complex visual details. Other skins are minimalistic, allowing authors to pack many nodes on screen. In several styles, nodes only display their labels on mouse-over. (The impact of the visual complexity of skins on performance is measured in section 4.3.). Common to all skins is that the current root node is always visually distinguishable, such as by larger text and shape size. Nodes forming paths between current and original roots are accented with altered size or color, and distant nodes are usually smaller or faded compared with root children. The purpose, besides additional improvement of orientation in the layout, is making the navigation consistent despite applied style.

Figure 8
Fig. 8. Over the course of the development, the project team solicited ongoing evaluation from test users. The average score (where -1 = dislike, 0 = neutral, and 1 = like) increased over the course of several improvements to our test prototype. Improvements included those related to accessibility, layout, UI, interaction, and content.


Throughout development, we evaluated subjective and objective users' opinions of prototypes of the SpicyNodes engine, investigated psychological factors affecting those opinions, and measured performance factors. Subjectively, with the current version of SpicyNodes described in this paper, approximately three out of four written comments tend to be positive, though there is a seeming polarization in users' responses, i.e., they either embrace it or strongly dislike it (this is partially due to performance, as noted below). From their written comments, people who are highly visual, casually interested in a topic or in the mood to browse appear to like SpicyNodes.

4.1 User opinion about prototypes

During early development, we conducted informal, occasional surveys of users of test versions of the nodemap with bogus, pseudo-text content. Informal feedback came from 34 test subjects who were friends and colleagues. This is the first bar in Fig. 8, and it shows the striking importance of content and subject matter relative to the appeal of the interface, which began with the second bar in Fig. 8.

Later, data was collected over the third year of development, before public beta, with a prototype on the topic of "Daylight Saving Time" ( that used a visual style of "clouds" for the nodes. Respondents were self-selected, and we do not know how representative they are of overall Internet users.

There were 5,338 survey responses, representing 0.17% of approximately 3.1 million views of the prototype. Respondents clicked a small link on the prototype with a three-question, anonymous survey of subjective questions. The key question was: "Do you like the nodes?" with three choices − "Yes, they're great!"; "Maybe, I'm not really sure"; and "No, I don't like them at all." Survey data was cleaned, with dupes, abuse, spam, and empty responses omitted. Respondents tended to have strong opinions, with only 14% of respondents replying "Maybe." We did not calculate statistical significance because we did not have a representative sample.

Over the course of development, we had seven releases. The overall scores (-1 = dislike, 0 = maybe, and 1 = like) were averaged into a composite opinion score. Fig. 8 shows how opinion evolved over the course of the releases:

  1. Internal testing with pseudo-text content, for preliminary testing the layout algorithms, Winter 2007/08.

  2. Initial public prototype with real content, about Daylight Saving Time, 8-Mar-08.

  3. Accessibility improvements, with help, variable font size, minor layout improvements, 15-Apr-08.

  4. Layout improvements, with oval orbits, better node distribution and node cosmetics, 31-Jul-08. This release has a higher score than No. 5, perhaps caused by a burst of positive blog coverage during the time period of this stage.

  5. UI improvements, with indicators of visited nodes, parents, and improved icons, 30-Oct-08.

  6. Interaction improvements, with zoom and focus sliders and the ability to expand a single node's children, 16-Jan-09.

  7. Content improvement, adding a branch for highly-requested content, 24-Feb-09.

The average user opinion is now 0.48. Next, we look at psychological factors that may correlate with users' opinions.

4.2 Psychological factors

We briefly investigated how users' responses to SpicyNodes relate to their sensory learning style. Learning styles operate on a continuum, which can be grouped into auditory, visual and tactile/kinesthetic categories. Most people have a mixture of learning styles, which they employ depending on what they are learning.

Visual learners like to read and enjoy visual stimulation; they rely on pictures, images and graphs to comprehend information. Auditory learners like to listen, enjoying lectures, conversations, and spoken directions. Tactile/kinesthetic learners like to "do." They tend to be fidgety and enjoy working with their hands [32]. We used a 14-question survey of sensory learning styles from Frender [14], which is used by learning psychologists. The survey questions range from whether people remember faces to how they spend their free time. There were 93 self-selected respondents over the course of a week. The respondents' average opinion of SpicyNodes was 0.52, similar to the 0.48 average from the prior survey.

Of the 14 factors, two of the factors varied considerably, and are shown in Table 2. Users who like SpicyNodes report that they are more likely to learn (A) by doing, and remember (B) by seeing; whereas users who disliked SpicyNodes were more likely to learn and remember in an auditory manner.

Table 2
TABLE 2 Opinion and Learning Style.

The importance of users liking visual metaphors is consistent with Ziemkiewicz and Kosara's finding that effectiveness of an interface depends on how the user conceptualizes the metaphor [39].

We also measured several aspects of Web site features that users feel are important, using a 1-9 scale (1=very important, 5=neutral, 9=Not important). The only preference correlated was the user's opinion about the importance of "good visual design." Whereas respondents who liked SpicyNodes gave an average importance of 1.7 ("very important"), respondents who disliked SpicyNodes gave an average importance of 3.6 ("somewhat important"). This indicates that people who like SpicyNodes tend to value aesthetics.

4.3 Performance

Performance is central to usability and the appeal of SpicyNodes. If performance is poor, users will reject the interface. Analyzing the subjective comments from evaluation respondents, we found that 237 out of the 5,338 respondents (4%) mentioned the word "slow" in their reply (e.g., "too slow," "very slow loading," etc.). Of those who complained about slowness, the average opinion score was negative, -0.22, much lower than the overall average. We assume that these users typically had older computer systems.

We measured the performance of SpicyNodes, on an Intel Core Duo 2.13 GHz with 1GB RAM, using Firefox browser version 3.0 and Flash Player 10.

In SpicyNodes, the most CPU/GPU intensive event is changing focus from one node to another. We looked at how quickly animation begins and how smoothly animation proceeds based on two factors: nodemap size and the number of visible nodes.

The size of the user's nodemap affects performance. We measured performance during focus changes for various numbers of nodes, with different visual styles that have various degrees of visual complexity. Fig. 9 shows how performance depends on the number of nodes in the original XML. Initialization is the first stage, when the sub-branch is extracted and its geometry is calculated, and then when the arranged nodes get their visual style. Then each frame of animation requires various calculations, such a morphing the geometry or applying force-directed effects. On the test system, for simple visual styles, animation is fast and responsive for up to approximately 5k nodes and complex styles for up to 2k nodes.

Figure 9
Fig. 9. Performance during focus change depends on the number of nodes in the XML file. Testing shows that geometry calculations are faster than graphics presentation regardless of nodemap size. The dashed line corresponds to 1 second of latency before animation starts. During animation, the average frame rate is shown by the triangles, and the yellow line corresponds to a frame rate of 20 fps—a threshold for smooth animation. Changing focus tends to be still smooth for datasets of approx. 5k nodes.

We also looked at how the number of nodes that are visible at one time impacts performance. The visual layer of SpicyNodes does not work directly on the whole nodemap. The engine loads a nodemap XML file and stores the original hierarchy in memory. During initialization, stored tree nodes are assigned properties such as internal ID, depth and branch weight. During focus change, the engine duplicates a sub-branch of the stored tree, with the root as the current focus. The sub-branch copy is limited to those nodes that will be available in the new focus display. This approach prevents CPU-demanding rotation of the whole tree, which takes place in Yee's approach. Fig. 10 shows how performance depends on the number of nodes that are visible (a subset of the full nodemap) and the applied style. In the test, each animation was 16 frames long and the lines represent a mean value of all frame time. On the test system, the authors found the animation smooth for up to 25 visible nodes for complex styles and up to 60 visible nodes for simple styles.

Figure 10
Fig. 10. Relative performance during focus change depends on the number of nodes that are visible (regardless of the number of nodes in the nodemap XML file). We tested for three styles: simple, medium, and visually rich for various numbers of visible nodes. Depending on the visual style, the system has smooth animations (frame duration 50ms) for 25-60 visible nodes at a time. For the test, each transition was 16 frames. Each line shows average frame duration in a single transition with applied simple, medium or visually complex style.

4.4 Comparisons

We did not compare user responses with other techniques like TouchGraph because it was not practical to generate online tests with similar content for an "apples-to-apples" test.


Conclusion and Future Work

While billions of people use keyword searching (e.g. Google) and many Web sites contain local search engines, we believe that there is a need for more tools that enable users to find information [8]. In particular, keyword searching depends on already knowing the keywords you seek, whereas browsing methods allow users to discover something they don't know. Search engines are one of many applications. For example, Eades et al. looked at visualizing search engine outputs in 1997 [10], Lai et al. recently revisited some of the practical complexities [21], and Google recently released a minimalist radial visualization, "WonderWheel [34].

Design is crucial to usability, and therefore to adoption of visualization technology. Our radial mapping interface combines our visualization approach, accessibility, attractive and balanced layouts, obvious and intuitive UI elements, smooth and inviting interaction, and the user's interest in the content. If users don't find the content interesting, only the nerdiest of test subjects will see the appeal.

We were not surprised that content is vital to the acceptance of nodemaps. Just as people only want to read articles on topics they like, people usually only like nodemaps if they find the content interesting. Figure 8 shows the jump in appeal when we used real content. Anecdotally, during development we would have many conversations in which people would find SpicyNodes pointless until we demonstrated it with a topic that interested them. Moreover, creating engaging "content portals" is a distinct writing art, and amateur writers tend to make uninteresting nodemaps.

At the time this paper was written, SpicyNodes prototypes have been used by approximately 4 million users and been authored by more than 2,000. For examples of publicly published nodemaps, see the online gallery (

One area of enthusiastic response has been from educators at both middle school and graduate levels who currently use mind maps and concept maps. SpicyNodes can be used for concept mapping, and it is more interactive than desktop mind-mapping software. Another interesting area of enthusiasm is from visual poets, who have created nonlinear poems, as in Fig 1B.

SpicyNodes has broad applications, including e-commerce, teaching, civic information, public information, organizational charts and content portals. In these types of uses, it is essential that the nodemaps be written by writers who create appealing node text and sensible branching. We may add per-node or per-branch analytics in the future to help organizations determine what branching structures will best meet the interests and needs of their users.

Figure 11
Fig. 11. Currently, several hundred authors use SpicyNodes to create functioning, carefully constructed nodemaps. Examples include: (A) nodemap about music, centered on "Jazz"; (B) nodemap about "Daylight Saving Time" used for evaluation in this paper; (C) nodemap titled "VAT Codes test"; (D) nodemap titled "My favorite planes."

One limitation is that the number of visible nodes must be fewer than approximately 25-60 on a typical computer system (see above section on "Performance") to maintain smooth animations. We may be able to lift this limit by porting to Adobe ActionScript 3 or another platform. Another limitation is that is can be hard for users to maintain a mental map of the overall structure.

We wish to improve focus transitions, preventing occasional layout inversions or unnecessary node movements. Further, we want to preserve layouts when a user moves "back" through the graph, so that views of the tree remain consistent and help users maintain orientation. A solution may be an automatic de-expansion when zooming out. Current challenges and future work focus on improving the API and skinning system to make it easier for other developers and designers to integrate radial trees and graph structures using SpicyNodes into their work, with their own creativity, style, multimedia, or link to their databases. We may also add logic and simple scripting ability to nodes.

Other longer-term applications involve porting the engine for use on multitouch devices with accelerometers.


The authors wish to thank Ivan Angelov and Viktor Goltvyanitsa. This work was supported in whole by the Institute for Dynamic Educational Advancement (

We thank the following designers for their input on the look-and-feel: Miguel Ángel Albadán, Tarek Atrissi, Simona Bucan, Patricia Carvalho, Michael Felix, Christophe Herbinet, Dusan Jelesijevic, Jonas Kühner, José López, Emanuel Mankert, Fabio Ernesto Mojica, Mikolaj Sadowski, Tristam Sparks, Steph Tekano, and Sait Yilmaz.


Michael Douma, E-Mail:

Grzegorz Ligierko, E-Mail:

Ovidiu Ancuta, E-Mail:

Pavel Gritsai, E-Mail:

Sean Liu, E-Mail:

Manuscript received 31 March 2009; accepted 27 July 2009; posted online 11 October 2009; mailed on 5 October 2009.

For information on obtaining reprints of this article, please send email to:


1. Graph Drawing: Algorithms for the Visualization of Graphs,

G. Di Battista, P. Eades, R. Tamassia, I.G. Tollis

New Jersey: Prentice Hall, 1999.

2. A Radial Adaption of the Sugiyama Framework for Visualizing Hierarchical Information,

C. Bachmaier

IEEE Transactions on Visualization [AM] Computer Graphics 13(3):583-594.

3. 1995. The continuous zoom: A constrained fisheye technique for viewing and navigating large information spaces.

Bartram L., Ho A., Dill J., Henigman F.

In Proceedings of the ACM Symposium on User Interface Software and Technology, Information Navigation, 207–215.

4. Digital Ecosystems in the Clouds: Towards Community Cloud Computing.

G Briscoe and A Marinos.

Submitted to IEEE Third International Conference on Digital Ecosystems and Technologies, 2009.

5. 1995. Graph folding: Extending detail and context viewing into a tool for subgraph comparisons.

Carpendale M. S. T., Cowperthwaite D. J., Fracchia F. D., Shermer T. C.

In Proc. 3rd Int. Symp. Graph Drawing, GD, Springer-Verlag, Berlin, Germany, F. J. Brandenburg, Ed., no. 1027, 127–139.

6. Framework for Unifying Presentation Space.

Carpendale M.S.T., Montagnese C., A.

In Proc. UIST'01, pp 61-70.

7. A comparison of personal name matching: Techniques and practical issues,

Christen P.

in 'Workshop on Mining Complex Data' (MCD'06), held at IEEE ICDM'06, Hong Kong. 2006.

8. "Finding Information: Factors that Improve Online Experiences"

Douma M., Angelov I., Menon S.

in Handbook of Research on Practices and Outcomes in E-Learning: Issues and Trends. Hershey PA: IGI Global. 2009. In press. See also

9. "A Heuristic for Graph Drawing."

P. Eades

Congressus Numeratium, Vol. 42, pp. 149-160, 1984

10. "Online Animated Graph Drawing for Web Navigation."

P. Eades, R.F. Cohen, M.L. Huang

Graph Drawing 1997: 330-335

11. The InfoVis Toolkit.

J-D. Fekete

In Proceedings of the 10th IEEE Symposium on Information Visualization (InfoVis 04), pages 167-174, Austin, TX, October 2004. IEEE Press.

12. J995. Generalized fisheye views of graphs.

Formella A. and Keller J.

In Proc. 3rd Int. Symp. Graph Drawing, GD, Springer-Verlag, Berlin, Germany, F. J. Brandenburg, Ed., no. 1027, 242–253.

13. 2005. prefuse: a toolkit for interactive information visualization.

Heer J., Card S. K. and Landay J. A.

In Proceedings of the SIGCHI Conference on Human Factors in Computing Systems (Portland, Oregon, USA, April 02 - 07, 2005). CHI '05. ACM, New York, NY, 421-430.

14. Learning to learn.

Frender G.

(2004). Nashville, TN: Incentive Publications.

15. "Graph Visualization and Navigation in Information Visualization: a Survey,"

I. Herman, G. Melançon, M.S. Marshall

IEEE Trans. Visualization and Computer Graphics, vol. 6, no. 1, pp. 24-43, 2000-01.

16. Information Visualization CyberInfrastructure (IVC).

17. "MoireGraphs: Radial Focus+Context Visualization and Interaction for Graphs with Visual Nodes,"

T.J. Jankun-Kelly, K.-L. Ma

Proc. Information Visualization, pp. 59-66, 2003.

18. Ontology visualization methods—a survey.

Katifori A, Halatsis C, Lepouras G, Vassilakis C, Giannopoulou E.

November 2007. Computing Surveys (CSUR), Volume 39 Issue 4.

19. Don't Make Me Think: A Common Sense Approach to Web Usability,

Krug S.

2nd Edition. New Riders Press. 2005.

20. Information visualization using a new focus+context technique in combination with dynamic clustering of information space.

Kreuseler M. and Schumann H.

H999. In Workshop on New Paradigms in Info. Vis. and Manipulation, 1–5.

21. "Applying Graph Layout Techniques to Web Information Visualization and Navigation."

W. Lai, X. Huang, Q. V. Nguyen and M. L. Huang

In CGIV '07: Proceedings of the Computer Graphics, Imaging and Visualisation, Washington, DC: IEEE Computer Society. 2007. p447-453.

22. The hyperbolic browser: A focus+context technique for visualizing large hierarchies.

Lamping J. and Rao R.

R996. Journal of Visual Languages and Computing 7, 1 (Mar.), 33–55.

23. Tree Juxtaposer: Scalable tree comparison using focus+conext with guaranteed visibility.

Munzner T., Guimbretière F., Tasiran S., Zhang L. and Zhou Y.

Y003. ACM Transactions on Graphics 22, 3.

24. Circular drawing of rooted trees.

Melançon G. and Herman I.

1998. Tech. Rep., Centre for Mathematics and Computer Sciences.

25. Ambient Findability: What We Find Changes Who We Become.

Morville P.

O'Reilly Media. 2005.

26. Exploring large graphs in 3D hyperbolic space.

Munzner T.

T998. IEEE Computer Graphics and Applications 18, 4 (July/Aug.), 18–23.

27. Prioritizing Web Usability.

Nielsen J and Loranger H.

New Riders Press. 2006.

28. "The Double Metaphone Search Algorithm."

Phillips Lawrence.

C/C++ User's Journal, 18 (6), 2000-06.

29. A parent-centered radial layout algorithm for interactive graph visualization and animation.

Pavlo A, Homan C, Schull J.


30. "FADE: Graph Drawing, Clustering, and Visual Abstraction",

Quigley A and Eades P.

Proceedings of Graph Drawing 2000, Lecture Notes in Computer Science, Vol. 1984, pp. 183–196, Springer Verlag, 2000.

31. The document lens,

Robertson G. and Mackinlay J

Proceedings of the 6th annual ACM symposium on User interface software and technology, p.101-108, December 1993, Atlanta, Georgia, United States.

32. Learning Style Perspectives: Impact in the Classroom,

Sarasin LC

(1999), Atwood Publishers, Madison, WI.

33. Graphical fisheye views.

Sarkar M. and Brown M. H.

1994. Communications of the ACM 37, 12, 73–84.

34. "Google Launches Search Options, Declares Real-Time Search Biggest Challenge."

E. Schonfeld

Tech Crunch. May 12, 2009.

35. Customizing a fisheye view algorithm to preserve the mental map.

Storey M.-A. D., Fracchia F. D. and Muller H. A.

1999. Journal of Visual Languages and Computing 10, 3, 245–267.

36. Navigating hierarchically clustered networks through fisheye and full-zoom methods,

Schaffer D., Zuo Z, Greenberg S, Bartram L, Dill J, Dubs S, Roseman M

ACM Transactions on Computer-Human Interaction (TOCHI), v.3 n.2, p.162-188, 1996-06.

37. Rings: A technique for visualization of large hierarchies.

Teoh S. T. and Ma K.-L.

2002. In Proceedings of Graph Drawing 2002, Springer-Verlag, M. Goodrich and S. Kobourov, Eds.

38. "Animated Exploration of Dynamic Graphs with Radial Layout,"

K.-P. Yee, D. Fisher, R. Dhamija, M. Hearst

Proc. Information Visualization, pp. 43-50, 2001.

39. "The Shaping of Information by Visual Metaphors."

C. Ziemkiewicz and R. Kosara

IEEE Transactions on Visualization and Computer Graphics 14, 1269–1276 (2008).


No Photo Available

Michael Douma

No Bio Available
No Photo Available

Grzegorz Ligierko

No Bio Available
No Photo Available

Ovidiu Ancuta

No Bio Available
No Photo Available

Pavel Gritsai

No Bio Available
No Photo Available

Sean Liu

No Bio Available

Cited by

No Citations Available


IEEE Keywords

No Keywords Available

More Keywords

No Keywords Available


No Corrections


No Content Available

Indexed by Inspec

© Copyright 2011 IEEE – All Rights Reserved