treemap

a treemap generator for web apps

Hi there :)

hope this library will be helpful to your project.

---

overview:

• generate tree image on initiate

• change data after sometime

• mouse position

• offset elements

example screenshots

• equal partitioning

• value based partitioning

  

• hover tip when the rects are too small

  

• startup code

  

---

getting started

first:

link the library on your html

<script type="text/javascript" src="lib/treemap.js"></script>

second:

create element where you want the image generated to be placed

note: id is a required!

<div id="treemap"></div>

third:

initiate the lib with data

this will automatically insert elements and generate the initial image

note: id of element, array of data, width, height, partitioning type are required!

 `var myTree = new Treemap();`

     `myTree.init( container_id, width, height, arry_of_data, isEqual);`

the init above is enough to generate the treemap

but the format of data should follow the below structure

heres the complete example:

 `var container_id = 'treemap',

    width = 1000,

    height = 500,

    isEqual = true,

    arry_of_data = [

    {

      label: 'one'

      value: 2,

      captions: ['good', 'bad', 'mixin'],

      color: 'gray'

    },

    {

      label: 'one',

      value: 3,

      captions: ['good', 'bad', 'mixin'],

      color: 'gray'

    }

  ];

 // create treemap instance

 var myTree = new Treemap();
 
 // initiate treemap data

     myTree.init(

        container_id,

         width,

         height,

         arry_of_data,

         isEqual

     );`

hope this helps :) thanks