Skip to content

Latest commit

 

History

History
212 lines (149 loc) · 5.53 KB

README.md

File metadata and controls

212 lines (149 loc) · 5.53 KB
Raw

Hotmap

A WebGL Heatmap Viewer for Bioinformatics and Big Data, written in vanilla JS and built with pixi.js.

demo

Some Features

  • panning, scaling, zoom, and resizing
  • drag and drop rows/columns
  • SVG download
  • various color/binning options [to be extended]
  • search
  • cell/row/column selection
  • meta/categorical data display
  • update API
  • flip axes
  • customizable tooltips
  • fullscreen button

Why?

I wanted to create a heatmap viewer that is easy to use and scales to millions of cells.

Prototype Usage

Global

Add the required CSS/JS:

<link rel="stylesheet" type="text/css" href="dist/hotmap.css">
<script src="dist/hotmap.js"></script>

ES6

Add required CSS, and import JS:

<link href="dist/hotmap.css" rel="stylesheet" type="text/css">

import Hotmap from 'dist/hotmap';

AMD

Add required required CSS, and require:

<link href="dist/hotmap.css" rel="stylesheet" type="text/css">

requirejs.config({
    baseUrl: 'dist',
});

requirejs(['hotmap'], function(Hotmap) {
    ...
})

Basic Example Config

    let hotmap = new Hotmap({
        ele: document.getElementById('hotmap'),
        rows: [{...}],
        cols: [{...}],
        matrix: [[1, 2, 3], [2, 5.3, 0], ...],
        // note the following configs are optional
        color: {
            bins: ['=0', '=1', '=2', '<20', '>=20'],
            colors: [0xffffff, 0xfbe6e2, 0xffadad, 0xff6b6b, 0xff0000]
        },
        onHover: info => `<div><b>Genome:</b> ${info.yLabel}</div>`
    })

Config

Param Type Required? Default
rows list of row objects (see below) ✓ -
cols list of col objects (see below) ✓ -
matrix matrix of numbers ✓ -
rowsLabel string - 'Rows'
colsLabel string - 'Columns'
rowMetaLabels list of strings - []
colMetaLabels list of strings - []
color string || object - 'gradient'
defaults Object - computed based on window size
options Object - -

Event Callbacks

Param Type Required? Default
onHover function(Object) {} - Displays row, column, and matrix value in tooltip on hover.
onSelection function([Object]) {} - -
onClick function(Object) {} - -

API Methods

Method Definition Description
update update({rows, cols, matrix}) Given object with rows, columns, and matrix, updates chart
getState getState() Returns current rows, columns and matrix
flipAxis flipAxis() Swaps rows, cols, labels, and scaling
downloadSVG downloadSVG({fileName = 'hotmap.svg', full: false}) Downloads chart as SVG. "full" will include all data.
rows
[
    {
        name: 'some label',
        meta: ['cat 1', 'some meta info']
    },
    ...
]
cols
[
    {
        name: 'some label',
        meta: ['cat foo', 'cat bar']
    },
    ...
]
defaults
{
    cellWidth: <initial_width_of_cell_(integer)>,
    cellHeight: <initial_height_of_cell_(integer)>
}
options
{
    maxFontSize: <int>          // in pixels
    hideLegend: false,
    legend: <some_html>,
    hideOptions: false,
    theme: 'dark' | 'light',
    showVersion: false,         // shows version top-right
    maxFontSize: <int>,         // in pixels
    waitForFont: false,         // useful if custom fonts are used
    rowLabelEllipsisPos: <int>, // position to places ellipsis (0-indexed)
    colLabelEllipsisPos: <int>
}

Development

Local Installation

npm install

Development

npm start

Build

npm run build

Author(s)

nconrad

Citation

Please cite this repo in the meantime:

N. Conrad, A WebGL Heatmap Viewer for Bioinformatics and Big Data, (2019), GitHub repository, https://github.com/nconrad/hotmap

License

Released under the MIT license.