Hypertree.js

Summary
Hypertree.js
HypertreeA Hyperbolic Tree/Graph visualization.
Functions
getRadiusReturns the current radius of the visualization.
refreshComputes positions and plots the tree.
plotPlots the Hypertree.
onClickAnimates the Hypertree to center the node specified by id.
moveTranslates the tree to the given position.
Hypertree.OpCustom extension of Graph.Op.
Hypertree.PlotCustom extension of Graph.Plot.
Hypertree.LabelCustom extension of Graph.Label.
Hypertree.Plot.NodeTypesThis class contains a list of Graph.Node built-in types.
Hypertree.Plot.EdgeTypesThis class contains a list of Graph.Adjacence built-in types.

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.
fpsDescribed in Options.Fx.  It’s default value has been changed to 35.
durationDescribed in Options.Fx.  It’s default value has been changed to 1500.
Edge.typeDescribed in Options.Edge.  It’s default value has been changed to hyperline.

Instance Properties

canvasAccess a Canvas instance.
graphAccess a Graph instance.
opAccess a Hypertree.Op instance.
fxAccess a Hypertree.Plot instance.
labelsAccess a Hypertree.Label interface implementation.
Summary
Functions
getRadiusReturns the current radius of the visualization.
refreshComputes positions and plots the tree.
plotPlots the Hypertree.
onClickAnimates the Hypertree to center the node specified by id.
moveTranslates the tree to the given position.

Functions

getRadius

getRadius: function()

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

plot: function()

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

idA 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

move: function(pos,
opt)

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.
optThis object has been defined in Hypertree.onClick

Example

ht.move({ x: 0, y: 0.7 }, {
  hideLabels: false
});

Hypertree.Op

Custom extension of Graph.Op.

Extends

All Graph.Op methods

See also

Graph.Op

Hypertree.Plot

Custom extension of Graph.Plot.

Extends

All Graph.Plot methods

See also

Graph.Plot

Hypertree.Label

Custom extension of Graph.Label.  Contains custom Graph.Label.SVG, Graph.Label.HTML and Graph.Label.Native extensions.

Extends

All Graph.Label methods and subclasses.

See also

Graph.Label, Graph.Label.Native, Graph.Label.HTML, Graph.Label.SVG.

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
    }
  }
});
getRadius: function()
Returns the current radius of the visualization.
refresh: function(reposition)
Computes positions and plots the tree.
plot: function()
Plots the Hypertree.
A Hyperbolic Tree/Graph visualization.
onClick: function(id,
opt)
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.
Close