Home > Archive > Developers/reference > 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:
| Element | Description |
|---|---|
| Familiar environment | Layouts and interactions that are reminiscent of the real world. |
| Multiple scales | A zoom slider allows your visitors to adjust the scope of their view, to see information on multiple scales. |
| Intuitive arrangement | Radial 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 motion | User can drag and rotate the nodes, as if they were pushing coins around on a countertop |
| Animation and Interactivity | The slow-in, slow-out animation technique enlivens the interface; the node interactivity enhances the user experience. |
| Breadcrumbs | Explicitly delineate a user’s path back home. |
| Color coding | Optional grouping by color-coding. |
| Keyword searches | Full text searching can find content within a node, while fuzzy searching matches commonly misspelled words or phonetic misspellings. |
