Visualization: BioHeatMap

  1. Overview
  2. Example
  3. Loading
  4. Data Format
  5. Configuration Options
  6. Methods
  7. Events
  8. Data Policy

Overview

Heatmaps are a useful way to visualize matricies of data. Scientists often use green-black-red heatmaps to visualize gene expression data from microarrays. This visualization supports both three color heatmaps (ex: green to black to red) and two color heatmaps (ex: white to yellow).

By: dburdick
Institute for Systems Biology

Example

>> See more examples

<html>
  <head>
    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load("visualization", "1", {});
      google.load("prototype", "1.6");
    </script>
    
    <script type="text/javascript" src="http://systemsbiology-visualizations.googlecode.com/svn/trunk/src/main/js/load.js"></script>
    <script type="text/javascript">
        systemsbiology.load("visualization", "1.0", {packages:["bioheatmap"]});
    </script>

    <script type="text/javascript">
      google.setOnLoadCallback(drawHeatMap);
      function drawHeatMap() {
          var data = new google.visualization.DataTable();
          data.addColumn('string', 'Gene Name');
          data.addColumn('number', 'chip_XXX_XXX_600');
          data.addColumn('number', 'chip2');
          data.addColumn('number', 'chip3');
          data.addColumn('number', 'chip4');
          data.addColumn('number', 'chip5');
          data.addColumn('number', 'chip6');
          data.addRows(4);
          data.setCell(0, 0, 'ATF3');
          data.setCell(0, 1, 0);
          data.setCell(0, 2, 0.5);
          data.setCell(0, 3, 1);
          data.setCell(0, 4, 1.5);
          data.setCell(0, 5, 2);
          data.setCell(0, 6, 2.5);
          data.setCell(1, 0, 'INS');
          data.setCell(1, 1, 3);
          data.setCell(1, 2, 3.5);
          data.setCell(1, 3, 4);
          data.setCell(1, 4, 4.5);
          data.setCell(1, 5, 5);
          data.setCell(1, 6, 5.5);
          data.setCell(2, 0, 'TAP1');
          data.setCell(2, 1, 0);
          data.setCell(2, 2, null);
          data.setCell(2, 3, -1);
          data.setCell(2, 4, -1.5);
          data.setCell(2, 5, -2);
          data.setCell(2, 6, -2.5);
          data.setCell(3, 0, 'IL6');
          data.setCell(3, 1, -3);
          data.setCell(3, 2, -3.5);
          data.setCell(3, 3, -4);
          data.setCell(3, 4, -4.5);
          data.setCell(3, 5, -5);
          data.setCell(3, 6, -5.5);

          heatmap = new org.systemsbiology.visualization.BioHeatMap(document.getElementById('heatmapContainer'));
          heatmap.draw(data, {});
      }
    </script>
  </head>

  <body>
    <div id="heatmapContainer"></div>
  </body>
</html>

Loading

The script requires the google jsapi and the Prototype Javascript library (1.6 and above). The easiest way to load the script is: 

    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load("visualization", "1", {});
      google.load("prototype", "1.6");
    </script>    
    
    <script type="text/javascript" src="http://systemsbiology-visualizations.googlecode.com/svn/trunk/src/main/js/load.js"></script>
    <script type="text/javascript">
        systemsbiology.load("visualization", "1.0", {packages:["bioheatmap"]});
    </script>

Alternatively, if you want to host the javascript file locally, you can download it here. You would then simply include it in your page with: 

    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load("visualization", "1", {});
      google.load("prototype", "1.6");
    </script>
    
    <script type="text/javascript" src="bioheatmap.js"></script>

The visualization's class name is org.systemsbiology.visualization.BioHeatMap 

    var heatmap = new org.systemsbiology.visualization.BioHeatMap(document.getElementById('heatmapContainer'));

Data Format

This visualization supports numerical data for all columns. When the useRowLabels option is true (default), the first column may be of string type.

Configuration Options

Name Type Default Description
startColor Object {r: 0,
g: 255,
b: 0,
a: 1 } 		Defaults to green. This is a simple object with red, green, blue and alpha attributes set.
Valid r/g/b values range from 0 to 255. Valid a values range from 0 to 1.
endColor Object {r: 255,
g: 0,
b: 0,
a: 1 } 		Defaults to red. This is a simple object with red, green, blue and alpha attributes set.
Valid r/g/b values range from 0 to 255. Valid a values range from 0 to 1.
emptyDataColor Object {r: 100,
g: 100,
b: 100,
a: 1 } 		Defaults to gray. This is a simple object with red, green, blue and alpha attributes set.
Valid r/g/b values range from 0 to 255. Valid a values range from 0 to 1.
numberOfColors integer 64 The number of colors to split the data into. Minimum of 1 for two color heatmaps, and 2 for three color maps. Maximum of 256.
passThroughBlack boolean true If set to true, black is set as the center color between startColor and endColor. When set to false, the colors range directly from startColor to endColor.
useRowLabels boolean true If set to true, the first column will be treated as a row label and it's value printed as text.
cellWidth integer 15 The width of each heatmap data cell.
cellHeight integer 15 The height of each heatmap data cell.
mapWidth integer   The absolute width of the visualization area. When mapWidth and mapHeight are specified, the cellHeight and cellWidth are interpolated and set to square.
mapHeight integer   The absolute width of the visualization area. When mapWidth and mapHeight are specified, the cellHeight and cellWidth are interpolated and set to square.
fontSize integer 10 The font height in pixels.
verticalPadding integer 10 The number of pixels to pad the top and bottom of the visualization.
horizontalPadding integer 10 The number of pixels to pad the left and right sides of the visualization.
drawBorder boolean true If true, a single pixel border is drawn around the edges of the visualization.

Methods

Method Return Type Description
draw(data, options) none Draws the heatmap.
getSelection() Array of selection elements Standard getSelection implementation. Selection elements are cells when a heatmap cell is clicked, rows when a row label is clicked and columns when a column label is clicked.
setSelection(selection) none Standard setSelection implementation. Currently there are no visual changes to selected items.

Events

Name Description Properties
select Standard select event None

Data Policy

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