Visualization: DrasticTreemap

DrasticTreemapGApi, version 0.9, by: DrasticData

  1. Overview
  2. Example
  3. Other Examples
  4. Loading
  5. Data Format
  6. Configuration Options
  7. Methods
  8. Events
  9. Data Policy
  10. Localization
  11. Notes
  12. Version History

Overview

A dynamic treemap to inspect the distribution of variables in a visual way. The treemap uses Flash.

Note for Developers : Because of Flash security settings, this (and all Flash-based visualizations) might not work correctly when accessed from a file location in the browser (e.g., file:///c:/webhost/myhost/myviz.html) rather than from a web server URL (e.g., http://www.myhost.com/myviz.html). This is typically a testing issue only. You can overcome this issue as described on the Macromedia web site

Example

(Note that the following code will not work when loaded as a local file; it must be loaded from a web server.)

<html>
<head>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript" src="DrasticTreemapGApi.js"></script>
<script type="text/javascript">
	google.load("visualization", "1");
	google.load("swfobject", "2.2");
  
	// Set callback to run when API is loaded
	google.setOnLoadCallback(drawVisualization); 

	// Called when the Visualization API is loaded.
	function drawVisualization() {
	
	// Create and populate a data table.
	var data = new google.visualization.DataTable();
	data.addColumn('string', 'Product');
	data.addColumn('string', 'Type');
	data.addColumn('number', 'East');
	data.addColumn('number', 'West');
	data.addColumn('number', 'South');
	data.addRows([
	  ['Green beans', 'Vegetables', 100, 100, 400],
	  ['Avocado', 'Vegetables', 50, 400, 300],
	  ['Tomatos', 'Vegetables', 200, 400, 500],
	  ['Cucumbers', 'Vegetables', 500, 1000, 700],
	  ['Apples', 'Fruit', 1700, 2300, 2000],
	  ['Bananas', 'Fruit', 800, 700, 600],
	  ['Oranges', 'Fruit', 200, 300, 100],
	  ['Pineapples', 'Fruit', 100, 150, 500],
	  ['Broccoli', 'Vegetables', 800, 1000, 900],
	  ['Wholemeal', 'Bread', 250, 100, 300],
	  ['Bagels', 'Bread', 120, 300, 200],
	  ['Baguette', 'Bread', 50, 300, 200],
	  ['Ciabatta', 'Bread', 200, 300, 400],
	  ['Croissants', 'Bread', 400, 600, 200],
	  ['white bread', 'Bread', 500, 200, 300]
	]);

	// Instantiate our object.
	var vis = new drasticdata.DrasticTreemap(document.getElementById('thediv'));
	
	// Draw the treemap with the data we created locally and some options:
	vis.draw(data, {
		groupbycol: "Type",
		labelcol: "Product",
		variables: ['East', 'West', 'South']
		}
	);
   }
</script>
</head>
<body>
<div id="thediv" style="width:500px; height:300px;"></div>
</body>
</html>

Other Examples

There are two more examples included in the release:

  • Example2
  • Example3 (uses random data)
  • Loading and Instantiating

    Download the DrasticTreemap release for the Google visualization Api 'DrasticTreemapGApi.zip' from DrasticData and save the javascript file 'DrasticTreemapGApi.js' and flash file 'DrasticTreemapGApi.swf' in a map on your webserver. Then load this visualization from your own webserver as shown here in the example above via the line:

    <script type="text/javascript" src="DrasticTreemapGApi.js"></script>
    
    Note that the component needs the swfobject to be loaded to be able to start. You can do this as in the example above:
    google.load("visualization", "1");
    google.load("swfobject", "2.2");
    

    The visualization class name is drasticdata.DrasticTreemap. Instantiate it as in the example above in JavaScript:

      var visualization = new drasticdata.DrasticTreemap(container_div);
    

    Data Format

    Configuration Options

    The following options can be added to the options object passed to the visualization's draw() method.

    Name Type Default Description
    labelcol string the first column of type string in the google datatable The column to be used for labels in the treemap
    groupbycol string the second column of type string in the google datatable, if not available, the first column of type string The column to be used to cluster items together in de tree
    variables array the first columns of type number in the datatable Array of strings (max 3). These specifiy the columns to be used to size the items in the treemap.

    Methods

    Method Return Type Description
    draw(data, options) None As specified by the Google visualization API.

    Events

    No events at this moment.

    Data Policy

    All code and data are processed and rendered in the browser. No data is sent to any server.

    Localization

    This visualization does not support localization.

    Notes

    The license applicable to this component and the licenses of the libraries used in the component are included in the file license.txt in the distribution.

    Version history

    Version 0.8 -> 0.9:

  • IE incompatibility solved
  • more examples in documentation
  • Version 0.7 -> 0.8:

  • Bug fix in data provider