Hotmap
A WebGL Heatmap Viewer for Bioinformatics and Big Data, written in vanilla JS and built with pixi.js.
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)
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.