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:

Double-click on the node to expand its immediate children (or if they are showing, to collapse them).
Hold down the shift key and double click a node to expand/collapse all descendent children.
Press the "/" key to set the root of the tree to the currently selected node. Press again to reset it back to the original root.

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.

Function	Tool	Keyboard shortcut	Context menu	Other	Description
Zoom In	+	+		scrollwheel
Zoom Out	−	−		scrollwheel
Rotate CCW	↺	"Page Up"		shift + scrollwheel
Rotate CW	↻	"Page Down"		shift + scrollwheel
Select Up	↥	shift + ↑			move selection to previous child
Select Down	↧	shift + ↓			move selection to next child
Select Parent		shift + ←			move selection to parent
Select Child		shift + →			move selection to first child
View Home	⌂	"Home"	Center Root		reset rotate and zoom
View Selected	◉	"End"	Center This Node		center selection
Toggle 1	1	space bar	Node	double-click	expand/collapse immediate children
Expand Level	⊕	"Return"	Expand 1 Level	shift + double-click	expand/collapse all children
Toggle Root	/	/	Set Root		change 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.