jQuery Plugin To Generate Simple Treemap Diagrams - Treemap.js

Treemap.js is a simple tiny jQuery plugin that renders a clean treemap diagram with nested rectangles for representing hierarchical data on your webpage.

See also:

• jQuery Treemap Plugin for Hierarchical Data - jsTreemap

Basic usage:

1. Place the jQuery treemap.js plugin after you have jQuery library included.

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="treemap.min.js"></script>

2. Create a container to place your treemap.

<div class="treemap-demo"></div>

3. Prepare the hierarchical data you want to present as follow.

var list = [
    {
      Value: 24,
      Children: [{Value: 13}, {Value: 3}]
    },
    {
      Value: 21,
    },
    {
      Value: 13,
      Children: [{Value: 13}, {Value: 8}, {Value: 23}, {Value: 22}, {Value: 3}]
    },
    {
      Value: 5
    }
];

4. Initialize the plugin to generate a treemap inside the container element you created.

$('.treemap-demo').treemap(list);

5. Default plugin options which can be passed during initialization.

// $.treemap(nodes, settings)
$('.treemap-demo').treemap({
  ValueField: 'Value',
  ColorField: 'Color',
  ChildrenField: 'Children',
  Border: '1px solid #000',
});

6. You can also replace the default color schema directly in the JS file..

var colors = ['#71afd8', '#9ed86c', '#fcad4d', '#aa8cd6', '#f0ec6d', '#347097', '#74ab45', '#e89126', '#795ca4', '#ffc703', '#abd3ee', '#fccc91', '#c5f19f', '#dac9f3', '#fbf6b1'];

---

This awesome jQuery plugin is developed by tcuevas92. For more Advanced Usages, please check the demo page or visit the official website.