Treemap.js

Summary
Treemap.js
TM.BaseAbstract class providing base functionality for TM.Squarified, TM.Strip and TM.SliceAndDice visualizations.
Functions
refreshComputes positions and plots the tree.
plotPlots the TreeMap.
leafReturns whether the node is a leaf.
enterSets the node as root.
outSets the parent node of the current selected node as root.
TM.OpCustom extension of Graph.Op.
TM.PlotCustom extension of Graph.Plot.
TM.LabelCustom extension of Graph.Label.
TM.Plot.NodeTypesThis class contains a list of Graph.Node built-in types.
TM.SliceAndDiceA slice and dice TreeMap visualization.
TM.SquarifiedA squarified TreeMap visualization.
TM.StripA strip TreeMap visualization.

TM.Base

Abstract class providing base functionality for TM.Squarified, TM.Strip and TM.SliceAndDice visualizations.

Implements

All Loader methods

Constructor Options

Inherits options from

Additionally, there are other parameters and some default values changed

orientation(string) Default’s h.  Whether to set horizontal or vertical layouts.  Possible values are ‘h’ and ‘v’.
titleHeight(number) Default’s 13.  The height of the title rectangle for inner (non-leaf) nodes.
offset(number) Default’s 2.  Boxes offset.
constrained(boolean) Default’s false.  Whether to show the entire tree when loaded or just the number of levels specified by levelsToShow.
levelsToShow(number) Default’s 3.  The number of levels to show for a subtree.  This number is relative to the selected node.
animate(boolean) Default’s false.  Whether to animate transitions.
Node.typeDescribed in Options.Node.  Default’s rectangle.
durationDescribed in Options.Fx.  Default’s 700.
fpsDescribed in Options.Fx.  Default’s 45.

Instance Properties

canvasAccess a Canvas instance.
graphAccess a Graph instance.
opAccess a TM.Op instance.
fxAccess a TM.Plot instance.
labelsAccess a TM.Label interface implementation.

Inspired by

Squarified Treemaps (Mark Bruls, Kees Huizing, and Jarke J. van Wijk) http://www.win.tue.nl/~vanwijk/stm.pdf

Tree visualization with tree-maps: 2-d space-filling approach (Ben Shneiderman) http://hcil.cs.umd.edu/trs/91-03/91-03.html

Note

This visualization was built and engineered from scratch, taking only the paper as inspiration, and only shares some features with the visualization described in the paper.

Summary
Functions
refreshComputes positions and plots the tree.
plotPlots the TreeMap.
leafReturns whether the node is a leaf.
enterSets the node as root.
outSets the parent node of the current selected node as root.

Functions

refresh

refresh: function()

Computes positions and plots the tree.

plot

plot: function()

Plots the TreeMap.  This is a shortcut to fx.plot.

leaf

leaf: function(n)

Returns whether the node is a leaf.

Parameters

n(object) A Graph.Node.

enter

enter: function(n)

Sets the node as root.

Parameters

n(object) A Graph.Node.

out

out: function()

Sets the parent node of the current selected node as root.

TM.Op

Custom extension of Graph.Op.

Extends

All Graph.Op methods

See also

Graph.Op

TM.Plot

Custom extension of Graph.Plot.

Extends

All Graph.Plot methods

See also

Graph.Plot

TM.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.

TM.Plot.NodeTypes

This class contains a list of Graph.Node built-in types.  Node types implemented are ‘none’, ‘rectangle’.

You can add your custom node types, customizing your visualization to the extreme.

Example

TM.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
    }
  }
});

TM.SliceAndDice

A slice and dice TreeMap visualization.

Implements

All TM.Base methods and properties.

TM.Squarified

A squarified TreeMap visualization.

Implements

All TM.Base methods and properties.

TM.Strip

A strip TreeMap visualization.

Implements

All TM.Base methods and properties.

A squarified TreeMap visualization.
A strip TreeMap visualization.
A slice and dice TreeMap visualization.
refresh: function()
Computes positions and plots the tree.
plot: function()
Plots the TreeMap.
leaf: function(n)
Returns whether the node is a leaf.
enter: function(n)
Sets the node as root.
out: function()
Sets the parent node of the current selected node as root.
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.
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.
Implements SVG labels.
Implements HTML labels.
Implements labels natively, using the Canvas text API.
Abstract class providing base functionality for TM.Squarified, TM.Strip and TM.SliceAndDice visualizations.
Close