visuaList is a jQuery plugin for creating interactive treemaps. A treemap displays hierarchical (tree-structured) data as a set of nested rectangles. The area of each rectangle correlates to that item's share of the sum of all values. This plugin connects the treemap to an unordered list to make navigating up and down levels of the hierarchy easier. Creating the default treemap is as simple as the following code where "elem" is the selector for the element which will contain the list:

$(elem).visuaList();

The data is supplied by the HTML of the unordered list which needs to contain the names and values in the format described on the 'Usage' tab. Call the plugin on the container element of this unordered list element and the treemap will be generated in the specified container. If the unordered list contains any nested items the treemap will have 'drill-down' behavior, controlled by clicking either the tiles in the treemap or the items in the unordered list. For static, 'un-nested' treemaps the list can be hidden if desired.

Supports all major browsers. See the various demos for more.

Before visuaList can be initialized, the HTML for the unordered list must exist within its container element. The format is as follows:

<!-- Structure for 'Meats' category in demo above -->
<li value="155">Meats
  <ul>
    <li value="48">Beef
      <ul>
        <li value="16">Sirloin</li>
        <li value="10">Ribeye</li>
        <li value="18">Top Round</li>
        <li value="4">Hot Dogs</li>
      </ul>
    </li>
    <li value="40">Chicken</li>
    <li value="67">Pork
      <ul>
        <li value="20">Ham</li>
        <li value="13">Bacon</li>
        <li value="8">Porkchops</li>
        <li value="16">Sausage</li>
        <li value="10">Hot Dogs</li>
      </ul>
    </li>
  </ul>
</li>

In addition to the unordered list, the container elements for the list and treemap need to be present on the page. The default identifiers are '#list-contain' and '#tile-contain', however you can provide different selectors in the init call to the plugin. Include the following HTML in your page where you want the list and treemap to appear.

<div id="list-contain">
   <!-- Put code for unordered list here -->
</div>
<div id="tile-contain"/>

All that is left is to call the plugin on the list container element. Here is where you specify any of the other options as well.

// Default initialization accepting default options as listed in 'Options' tab.
$( '#tile-list' ).visuaList();

/*-- or --*/

// Override defaults by passing in an object literal to the initialization call.
$( '#myListContainer' ).visuaList({
   colors : [ '#bbb', '#aaa', '#999', '#888', '#777' ], // values from colors array are plugged in as the 'background' property for the tiles so values may be named colors, hex colors, rgb colors, or even image paths.
   listContainer : '#myListContainer', // jQuery selector for container element for list. This should match the selector being used for the outer plugin call. Default is '#list-contain'.
   tileContainer : '#myTileContainer', // jQuery selector for contianer element for treemap. Default is '#tile-contain'.
   mapWidth : 800, // Width in pixels of treemap. Default is 505.
   mapWidth : 500, // Width in pixels of treemap. Default is 330.
}); 

See the 'Options' tabs for a complete list of options.

Options are set on init like below:

$(elem).visuaList({ 
  colors : [
    'rgb(9,115,183)', 
    'rgb(192,80,77)', 
    'rgb(165,197,99)',
    'rgb(128,100,162)',
    'rgb(237,140,60)'
  ], 
  listContainer : '#list-contain', 
  tileContainer : '#tile-contain', 
  mapWidth : 505, 
  mapHeight : 330 
}); 

Where "elem" is the selector for the element which contains the unordered list.

colors: An array of string values which will be cycled through and applied as the background style property for each tile in the treemap.
    Possible Values: Named colors (ex:'red'), hex colors (ex:'#FF0000'), rgb colors (ex:'rgb(255,0,0)'), image path (ex:'url(red_bg.png)')
    Default: [ 'rgb(9,115,183)', 'rgb(192,80,77)', 'rgb(165,197,99)', 'rgb(128,100,162)', 'rgb(237,140,60)' ]

listContainer: jQuery selector for element containing the unordered list.
    Possible Values: jQuery object containing a single element
    Default: '#list-contain'

tileContainer: jQuery selector for element which will contain the treemap. If the element does not exist it will be created.
    Possible Values: jQuery object containing a single element
    Default: '#tile-contain'

mapWidth: Width in pixels of the treemap.
    Possible Values: Positive whole numbers
    Default: 505

mapHeight: Height in pixels of the treemap.
    Possible Values: Positive whole numbers
    Default: 330