Hypertree
A Hyperbolic Tree/Graph visualization.
Inspired by
A Focus+Context Technique Based on Hyperbolic Geometry for Visualizing Large Hierarchies (John Lamping, Ramana Rao, and Peter Pirolli). http://www.cs.tau.ac.il/~asharf/shrek/Projects/HypBrowser/startree-chi95.pdf
Note
This visualization was built and engineered from scratch, taking only the paper as inspiration, and only shares some features with the Hypertree described in the paper.
Implements
All Loader methods
Constructor Options
Inherits options from
Additionally, there are other parameters and some default values changed
| radius | (string|number) Default’s auto. The radius of the disc to plot the Hypertree in. ‘auto’ will take the smaller value from the width and height canvas dimensions. You can also set this to a custom value, for example 250. |
| offset | (number) Default’s 0. A number in the range [0, 1) that will be substracted to each node position to make a more compact Hypertree. This will avoid placing nodes too far from each other when a there’s a selected node. |
| fps | Described in Options.Fx. It’s default value has been changed to 35. |
| duration | Described in Options.Fx. It’s default value has been changed to 1500. |
| Edge.type | Described in Options.Edge. It’s default value has been changed to hyperline. |
Instance Properties
getRadius
Returns the current radius of the visualization. If config.radius is auto then it calculates the radius by taking the smaller size of the Canvas widget.
See also
Canvas.getSize
refresh
| refresh: function( | reposition | ) |
|
Computes positions and plots the tree.
Parameters
| reposition | (optional|boolean) Set this to true to force all positions (current, start, end) to match. |
plot
Plots the Hypertree. This is a shortcut to fx.plot.
onClick
| onClick: function( | id, | | opt | ) |
|
Animates the Hypertree to center the node specified by id.
Parameters
| id | A Graph.Node id. |
| opt | (optional|object) An object containing some extra properties described below |
| hideLabels | (boolean) Default’s true. Hide labels when performing the animation. |
Example
ht.onClick('someid');
//or also...
ht.onClick('someid', {
hideLabels: false
});
move
Translates the tree to the given position.
Parameters
| pos | (object) A x, y coordinate object where x, y in [0, 1), to move the tree to. |
| opt | This object has been defined in Hypertree.onClick |
Example
ht.move({ x: 0, y: 0.7 }, {
hideLabels: false
});
Hypertree.Plot.NodeTypes
This class contains a list of Graph.Node built-in types. Node types implemented are ‘none’, ‘circle’, ‘triangle’, ‘rectangle’, ‘star’, ‘ellipse’ and ‘square’.
You can add your custom node types, customizing your visualization to the extreme.
Example
Hypertree.Plot.NodeTypes.implement({
'mySpecialType': {
'render': function(node, canvas) {
//print your custom node to canvas
},
//optional
'contains': function(node, pos) {
//return true if pos is inside the node or false otherwise
}
}
});
Hypertree.Plot.EdgeTypes
This class contains a list of Graph.Adjacence built-in types. Edge types implemented are ‘none’, ‘line’, ‘arrow’ and ‘hyperline’.
You can add your custom edge types, customizing your visualization to the extreme.
Example
Hypertree.Plot.EdgeTypes.implement({
'mySpecialType': {
'render': function(adj, canvas) {
//print your custom edge to canvas
},
//optional
'contains': function(adj, pos) {
//return true if pos is inside the arc or false otherwise
}
}
});
