circos.js

Heatmap

Electrical comsumption in France in 2014 (with weekends and hollidays highlighted) JsFiddle

First, you must add a layout to your circos instance.

To add a heatmap to your circos instance:

instance.heatmap('electrical-consumption', {}, data);
  • The first argument is the track name
  • The second argument is the heatmap configuration
  • The third argument is the data

Configuration

The default configuration is:

{
  innerRadius: 200
  outerRadius: 250,
  min: 'smart',
  max: 'smart',
  colorPalette: 'YlGnBu',
  colorPaletteSize: 9,
  logScale: false
}
  • min: can be the string smart or a number. Smart means the minimum value in the dataset. If you specify a number, it will affect the color scale.
  • colorPalette: the name of the color brewer palette.
  • colorPaletteSize: the number of colors in the palette. From 3 to 12 depending of the palette. See http://colorbrewer2.org/ for more details about palettes.
  • logScale: how is done the interpolation between data values and colors.

Data formats

Two types of data format are supported:

var data = [
    // each datum should be
    // layout_block_id, start, end, value
    ['january', 0, 1, 1368001],
    ['january', 1, 2, 1458583],
    ['january', 2, 3, 1481633],
    ['january', 3, 4, 1408424]
    ...
    ['february', 0, 1, 1577419],
    ['february', 1, 2, 1509311],
    ['february', 2, 3, 1688266],
    ...
]
var data = [
    // data is gathered by layout blocks
    {
        parent: 'january',
        data: [
            {start:0, end:1, value:1368001},
            {start:1, end:2, value:1458583},
            {start:2, end:3, value:1481633},
            {start:3, end:4, value:1408424},
            ...
        ]
    },
    {
        parent: 'february',
        data: [
            {start:0, end:1, value:1577419},
            {start:1, end:2, value:1509311},
            {start:2, end:3, value:1688266},
            ...
        ]
    },
]

Additionally you can add rules (see rule chapter)