Treemap.js

Abstract Treemap object.

Implemented By

TM.Squarified, TM.Strip and TM.SliceAndDice.

Description

Implements layout and configuration options inherited by TM.Squarified, TM.Strip and TM.SliceAndDice.

All Treemap constructors take the same configuration object as parameter.

Two special data keys are read from the JSON tree structure loaded by Loader.loadJSON to calculate node’s color and dimensions.  These properties are $area (for nodes dimensions) and $color.  Both of these properties are floats.

This means that the tree structure defined in Loader.loadJSON should now look more like this

var json = {
    "id": "aUniqueIdentifier",
    "name": "usually a nodes name",
    "data": {
        "$area": 33, //some float value
        "$color": 36, //-optional- some float value
        "some key": "some value",
        "some other key": "some other value"
     },
    "children": [ 'other nodes or empty' ]
};

If you want to know more about JSON tree structures and the data property please read Loader.loadJSON.

Configuration

General

• rootId The id of the div container where the Treemap will be injected.  Default’s ‘infovis’.
• orientation For TM.Strip and TM.SliceAndDice only.  The layout algorithm orientation.  Possible values are ‘h’ or ‘v’.
• levelsToShow Max depth of the plotted tree.  Useful when using the request method.
• addLeftClickHandler Add a left click event handler to zoom in the Treemap view when clicking a node.  Default’s false.
• addRightClickHandler Add a right click event handler to zoom out the Treemap view.  Default’s false.
• selectPathOnHover If setted to true all nodes contained in the path between the hovered node and the root node will have an in-path CSS class.  Default’s false.

Nodes

There are two kinds of Treemap nodes.

Inner nodes are nodes having children, like Pearl Jam.

These nodes are represented by three div elements.  A content element, a head element (where the title goes) and a body element, where the children are laid out.

<div class="content">
  <div class="head">Pearl Jam</div>
  <div class="body">...other nodes here...</div>
</div>

Leaves are optionally colored nodes laying at the “bottom” of the tree.  For example, Yield, Vs. and Riot Act are leaves.

These nodes are represented by two div elements.  A content element and a wrapped leaf element

<div class="content">
  <div class="leaf">Yield</div>
</div>

There are some configuration properties regarding Treemap nodes

• titleHeight The height of the title (head) div container.  Default’s 13.
• offset The separation offset between the content div element and its contained div(s).  Default’s 4.

Color

Color is an object containing as properties

• allow If true, the algorithm will check for the JSON node data $color property to add some color to the Treemap leaves.  This color is calculated by interpolating a node’s $color value range with a real RGB color range.  By specifying min|maxValues for the $color property and min|maxColorValues for the RGB counterparts, the visualization is able to interpolate color values and assign a proper color to the leaf node.  Default’s false.
• minValue The minimum value expected for the $color value property.  Used for interpolating.  Default’s -100.
• maxValue The maximum value expected for the $color value property.  Used for interpolating.  Default’s 100.
• minColorValue A three-element RGB array defining the color to be assigned to the $color having minValue as value.  Default’s [255, 0, 50].
• maxColorValue A three-element RGB array defining the color to be assigned to the $color having maxValue as value.  Default’s [0, 255, 50].

Tips

Tips is an object containing as properties

• allow If true, a tooltip will be shown when a node is hovered.  The tooltip is a div DOM element having “tip” as CSS class.  Default’s false.
• offsetX An offset added to the current tooltip x-position (which is the same as the current mouse position).  Default’s 20.
• offsetY An offset added to the current tooltip y-position (which is the same as the current mouse position).  Default’s 20.
• onShow(tooltip, node, isLeaf, domElement) Implement this method to change the HTML content of the tooltip when hovering a node.

Parameters

Controller options

You can also implement controller functions inside the configuration object.  These functions are

• onBeforeCompute(node) This method is called right before performing all computation and animations to the JIT visualization.
• onAfterCompute() This method is triggered right after all animations or computations for the JIT visualizations ended.
• onCreateElement(content, node, isLeaf, elem1, elem2) This method is called on each newly created node.

Parameters

• onDestroyElement(content, node, isLeaf, elem1, elem2) This method is called before collecting each node.  Takes the same parameters as onCreateElement.
• request(nodeId, level, onComplete) This method is used for buffering information into the visualization.  When clicking on an empty node, the visualization will make a request for this node’s subtrees, specifying a given level for this subtree (defined by levelsToShow).  Once the request is completed, the onComplete object should be called with the given result.

See also TM.Squarified, TM.SliceAndDice and TM.Strip.

A JavaScript implementation of the Slice and Dice Treemap algorithm.

The TM.SliceAndDice constructor takes an optional configuration object described in TM.

This visualization (as all other Treemap visualizations) is fed with JSON Tree structures.

The $area node data key is required for calculating rectangles dimensions.

The $color node data key is required if Color allow is true and is used for calculating leaves colors.

Extends

TM

Parameters

Example

Here’s a way of instanciating the TM.SliceAndDice will all its optional configuration features

var tm = new TM.SliceAndDice({
    orientation: "h",
  titleHeight: 13,
  rootId: 'infovis',
  offset:4,
  levelsToShow: 3,
      addLeftClickHandler: false,
      addRightClickHandler: false,
      selectPathOnHover: false,

  Color: {
    allow: false,
    minValue: -100,
    maxValue: 100,
    minColorValue: [255, 0, 50],
    maxColorValue: [0, 255, 50]
        },

        Tips: {
          allow: false,
          offsetX; 20,
          offsetY: 20,
          onShow: function(tooltip, node, isLeaf, domElement) {}
        },

        onBeforeCompute:  function(node) {
          //Some stuff on before compute...
        },
        onAfterCompute:   function() {
          //Some stuff on after compute...
        },
        onCreateElement:  function(content, node, isLeaf, head, body) {
          //Some stuff onCreateElement
        },
        onDestroyElement: function(content, node, isLeaf, head, body) {
          //Some stuff onDestroyElement
        },
      request:          false
  });
tm.loadJSON(json);

Abstract Treemap class containing methods that are common to aspect ratio related algorithms such as TM.Squarified and TM.Strip.

Implemented by

TM.Squarified, TM.Strip

A JavaScript implementation of the Squarified Treemap algorithm.

The TM.Squarified constructor takes an optional configuration object described in TM.

This visualization (as all other Treemap visualizations) is fed with JSON Tree structures.

The $area node data key is required for calculating rectangles dimensions.

The $color node data key is required if Color allow is true and is used for calculating leaves colors.

Extends

TM and TM.Area

Parameters

Example

Here’s a way of instanciating the TM.Squarified will all its optional configuration features

var tm = new TM.Squarified({
  titleHeight: 13,
  rootId: 'infovis',
  offset:4,
  levelsToShow: 3,
  addLeftClickHandler: false,
  addRightClickHandler: false,
  selectPathOnHover: false,

  Color: {
    allow: false,
    minValue: -100,
    maxValue: 100,
    minColorValue: [255, 0, 50],
    maxColorValue: [0, 255, 50]
  },

  Tips: {
    allow: false,
    offsetX: 20,
    offsetY: 20,
    onShow: function(tooltip, node, isLeaf, domElement) {}
  },

    onBeforeCompute:  function(node) {
      //Some stuff on before compute...
    },
    onAfterCompute:   function() {
      //Some stuff on after compute...
    },
    onCreateElement:  function(content, node, isLeaf, head, body) {
      //Some stuff onCreateElement
    },
    onDestroyElement: function(content, node, isLeaf, head, body) {
      //Some stuff onDestroyElement
    },
    request:          false
  });

  tm.loadJSON(json);

A JavaScript implementation of the Strip Treemap algorithm.

The TM.Strip constructor takes an optional configuration object described in TM.

This visualization (as all other Treemap visualizations) is fed with JSON Tree structures.

The $area node data key is required for calculating rectangles dimensions.

The $color node data key is required if Color allow is true and is used for calculating leaves colors.

Extends

TM and TM.Area

Parameters

Example

Here’s a way of instanciating the TM.Strip will all its optional configuration features

var tm = new TM.Strip({
  titleHeight: 13,
    orientation: "h",
  rootId: 'infovis',
  offset:4,
  levelsToShow: 3,
      addLeftClickHandler: false,
      addRightClickHandler: false,
      selectPathOnHover: false,

  Color: {
    allow: false,
    minValue: -100,
    maxValue: 100,
    minColorValue: [255, 0, 50],
    maxColorValue: [0, 255, 50]
        },

        Tips: {
          allow: false,
          offsetX: 20,
          offsetY: 20,
          onShow: function(tooltip, node, isLeaf, domElement) {}
        },

        onBeforeCompute:  function(node) {
          //Some stuff on before compute...
        },
        onAfterCompute:   function() {
          //Some stuff on after compute...
        },
        onCreateElement:  function(content, node, isLeaf, head, body) {
          //Some stuff onCreateElement
        },
        onDestroyElement: function(content, node, isLeaf, head, body) {
          //Some stuff onDestroyElement
        },
      request:          false
  });
tm.loadJSON(json);