Share |

Home > Archive > Developers/reference > How Spicynodes works

How SpicyNodes works

Our approach improves upon existing graphs with (a) layouts which scale from a broad overview to a zoomed-in detail; (b) layouts that mix geometric and force-directed algorithms; (c) layouts that show the user a clear path toward “home”; (d) visual enhancements, including extensive use of easing effects smooth navigation, and care to provide artistic and attractive styles; and (e) easy access to non-programmers via an authoring interface that can generate a broad range of visual designs.

SpicyNodes is customizable in terms of (a) nodes and their logical arrangement; (b) color scheme; (c) animations, motion and interactivity; and (d) shapes, lines, and labels. Go to Create your own! to experiment with the types of customizations which are possible .

The system’s key design elements are listed below:

ElementDescription
Familiar environmentLayouts and interactions that are reminiscent of the real world.
Multiple scalesA zoom slider allows your visitors to adjust the scope of their view, to see information on multiple scales.
Intuitive arrangementRadial layout, similar to orbits, with the periphery shrunk or hidden. Nodes can repel each other in a pseudo-magnetic manner, creating evenly spaced, attractive layouts.
Intuitive motionUser can drag and rotate the nodes, as if they were pushing coins around on a countertop
Animation and InteractivityThe slow-in, slow-out animation technique enlivens the interface; the node interactivity enhances the user experience.
BreadcrumbsExplicitly delineate a user’s path back home.
Color codingOptional grouping by color-coding.
Keyword searchesFull text searching can find content within a node, while fuzzy searching matches commonly misspelled words or phonetic misspellings.

Share |