Radial Tree

This animated radial tree is collapsible and expandible, and you can change the root of the tree. It has a full user interface, including mouse, mousewheel (if you have one), and keyboard shortcuts. It may also work on touch screens, although that has not been tested. The tree automatically resizes to fit the window.

See the gist in action at //bl.ocks.org/wmleler/raw/a734fb2bb3319a2cb386/ The source is on github at https://gist.github.com/wmleler/a734fb2bb3319a2cb386

User Interface

Initially, the root node of the tree is selected. Click on any node in the tree to select it; node is then highlighted and path to it is displayed in toolbar. Click on any name in path to change the root. The current root is shown in bold.

If the center of a node is colored in, then it has (hidden) children:

Right-click on a node to bring up a context menu that gives you shortcuts for expanding and collapsing nodes, changing the root, and recentering the view.

FunctionToolKeyboard shortcutContext menuOtherDescription
Zoom In++scrollwheel
Zoom Outscrollwheel
Rotate CCW"Page Up"shift + scrollwheel
Rotate CW"Page Down"shift + scrollwheel
Select Upshift + ↑move selection to previous child
Select Downshift + ↓move selection to next child
Select Parentshift + ←move selection to parent
Select Childshift + →move selection to first child
View Home"Home"Center Rootreset rotate and zoom
View Selected"End"Center This Nodecenter selection
Toggle 11space barNodedouble-clickexpand/collapse immediate children
Expand Level"Return"Expand 1 Levelshift + double-clickexpand/collapse all children
Toggle Root//Set Rootchange root to selection (and back)

Hover over any tool button to see a popup tooltip containing keyboard shortcuts.

Note that there is no toolbar button for Select Parent or Select Child; use the keyboard shortcut (shift + arrow key), or the mouse to select any node.

Hold down the alt/option key to slow down the transition animations or the rate of zooming and rotation.

Hold down shift key and press the ⊕ tool to force expand entire tree from selection. This is also available in the context menu as "Expand Full Tree".

Hold down shift key and press the ⌂ tool to reset root.