Rectangular Heatmap

The rectangular heatmap is one of the central plot types in HiGlass. It depicts matrices by coloring each cell according to its value. Data is pulled in remotely from a server and rendered client-side. This configuration gives us the opportunity to dynamically change how the data is displayed by changing its scaling and color mapping.

Value scaling

Values in rectangular (and horizontal and vertical) heatmaps are scaled logarithmically. Some cells may, however, have values of 0 which make logarithmic scaling impossible. To get around this, we add the minimum non-zero value in the visible area to each value as a pseudocount. The colors used to display these values are then scaled from log(min_value) to log(min_value + max_value), where min_value is the minimum non-zero value in all of the currently visible tiles and max_value is the maximum value in all of the currently visible tiles.

Color map

The color map of the heatmap can be changed through the track configuration options menu. The presets roughly correspond to the some of the examples available from matplotlib and are defined in the file app/scripts/config.js. The colors are spaced and interpolated evenly over the range of visible values.

Histogram-based color selection is planned for future releases.

Example configuration

  {
    "server": "/api/v1",
    "tilesetUid": "CQMd6V_cRw6iCI_-Unl3PQ",
    "type": "heatmap",
    "position": "center",
    "options": {
      "colorRange": [ "#FFFFFF", "#F8E71C", "#F5A623", "#D0021B"],
      "maxZoom": null
    }
  }

Custom color maps can be defined by selecting the Custom option. Up to five different colors can be selected. The cell values in the matrix will be interpolated evenly over the range of colors. More information on the color interpolation can be found in the documentation of d3's continuous scales.

Label position

Selecting a position ('top left', 'top right', 'bottom left' and 'bottom right') from the Label position configuration menu will place a label with information about the track in that position. Currently, the track label shows the following information:

Dataset name: The name of the dataset being displayed. This is either the name that was supplied when the file was uploaded, the name of the uploaded file (if no name was explicitly provided) or the name of the track.

Current data resolution While HiGlass provides smooth zooming, the data is stored and served at discrete resolutions. The current data resolution shows the resolution of the data being served at the current zoom level.