tags: user-interface, graph-visualization, zooming-elements-based, parent-children-orbiting, fractal-structure-inspired

promotional material

Would you like to bring a touch of adventurous spirit to your contents? Presenting your contents, FractaGUI does things a bit differently. As an original graph content navigating environment, it provides unusual experience in discovering information among your content selection. Possible applications are surely endless, and they are waiting to be discovered by that awesome child of creativity in you.

FractaGUI is a fractal-structure inspired, parent-child orbiting, and zooming-elements based graph user interface. Javascript based FractaGUI is best used in HTML pages where visitors often return, like in a curated selection of web links, searchable hierarchical catalog of arbitrary items, or maybe even some cool mobile content start pages if someone decides to go in PWA (progressive web application) direction.

Composing contents in FractaGUI consists of editing external content XHTML pages and arranging them using parent-children structure described in a set of XML files. Supported interaction includes navigating graph content nodes and following hyperlinks inside nodes.

The final result brings all the imported content pages to be shown inside orbitable and zoomable ovals that form a seamless dynamic asymptotic fractal. We navigate the entire fractal structure using only five kinds of gestures:

1. dragging inside the central oval area to pan its contents
2. dragging orbiting ovals around the central oval to rotate them
3. dragging orbiting ovals towards center to zoom them in
4. dragging central oval out towards orbit to zoom it out
5. using mouse wheel to switch between navigating and panning mode

To get started with site creation using FractaGUI, please refer to the example site containing use instructions.

This software is released under conditional Creative Commons Attribution 4.0 International License. It is free for students, but for personal or commercial use, please refer to the license file for details about pricing.