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.
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.
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.
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
}
}
});
Animates the Hypertree to center the node specified by id.
move: function(
pos,
opt
)
Translates the tree to the given position.
Perform Graph operations like adding/removing Graph.Nodes or Graph.Adjacences, morphing a Graph into another Graph, contracting or expanding subtrees, etc.
Graph rendering and animation methods.
An interface for plotting/hiding/showing labels.
A Graph node.
A Graph adjacence (or edge) connecting two Graph.Nodes.
Provides methods for loading and serving JSON data.
These are Canvas general options, like where to append it in the DOM, its dimensions, background, and other more advanced options.
Provides controller methods.
Provides Node rendering options for Tree and Graph based visualizations.
Provides Edge rendering options for Tree and Graph based visualizations.
Provides styling for Labels such as font size, family, etc.
Configuration for adding mouse/touch event handlers to Nodes.
Tips options
Apply different styles when a node is hovered or selected.
Panning and zooming options for Graph/Tree based visualizations.
Provides animation options like duration of the animations, frames per second and animation transitions.
A canvas widget used by all visualizations.
A Graph Class that provides useful manipulation functions.
Custom extension of Graph.Op.
Custom extension of Graph.Plot.
Custom extension of Graph.Label.
getSize: function(
i
)
Returns canvas dimensions.
Implements SVG labels.
Implements HTML labels.
Implements labels natively, using the Canvas text API.
