Icicle.js

Summary
Icicle.js
IcicleIcicle space filling visualization.
Functions
refreshComputes positions and plots the tree.
plotPlots the Icicle visualization.
enterSets the node as root.
outSets the parent node of the current selected node as root.
Icicle.OpCustom extension of Graph.Op.
Icicle.PlotCustom extension of Graph.Plot.
Icicle.LabelCustom extension of Graph.Label.
Icicle.Plot.NodeTypesThis class contains a list of Graph.Node built-in types.

Icicle

Icicle space filling visualization.

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’.
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.
Label.typeDescribed in Options.Label.  Default’s Native.
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 Icicle.Op instance.
fxAccess a Icicle.Plot instance.
labelsAccess a Icicle.Label interface implementation.
Summary
Functions
refreshComputes positions and plots the tree.
plotPlots the Icicle visualization.
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 Icicle visualization.  This is a shortcut to fx.plot.

enter

enter: function (node)

Sets the node as root.

Parameters

node(object) A Graph.Node.

out

out: function()

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

Icicle.Op

Custom extension of Graph.Op.

Extends

All Graph.Op methods

See also

Graph.Op

Icicle.Plot

Custom extension of Graph.Plot.

Extends

All Graph.Plot methods

See also

Graph.Plot

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

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

Icicle.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
    }
  }
});
refresh: function()
Computes positions and plots the tree.
plot: function()
Plots the Icicle visualization.
enter: function (node)
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.
Close