visual-heatmap

Visual-Heatmap Js

Open source javascript module for high performance, large scale heatmap rendering.

Visual Heatmap is based on advanced graphical rendering context - WebGL/Shaders. It can render 500,000+ data points with a good framerate.

Installing

If npm

npm install Visual-Heatmap --save

Download source code from below links

• visualHeatmap.min.js
• visualHeatmap.js
• visualHeatmap.esm.browser.js

Visual-Heatmap is written in ES6 Modules. To import use below syntax

Importing everthing into namespace

import * from 'Visual-Heatmap'

VisualHeatmapJs - API

visualHeatmap()

visualHeatmap provides a API to create context WebGL. API accepts containerId and config as an input. A layer will be created under the provided Div #containerId.

let instance = Heatmap('#canvas', {
        size: 30.0,
        max: 100,
        blurr: 1.0,
        gradient: [{
            color: [0, 0, 255, 1.0],
            offset: 0
        }, {
            color: [0, 0, 255, 1.0],
            offset: 0.2
        }, {
            color: [0, 255, 0, 1.0],
            offset: 0.45
        }, {
            color: [255, 255, 0, 1.0],
            offset: 0.85
        }, {
            color: [255, 0, 0, 1.0],
            offset: 1.0
        }]
    });

ContainerId

Query string which identifies container.

Config

Input to the Heatmap layer with below info.

Size : Raius of the data point, in pixels.

Max : Max data Value for relative pixel grading.

blurr :

gradient : Color Gradient, array of values with color and offset.

instance.renderData()

Accepts array of data points with 'x', 'y' and 'value'.

instance.setMax()

To set max data value, for relative calculations.

instance.setTranslate()

instance.setZoom()

instance.setRotationAngle()

instance.setSize()

instance.setBlurr()

instance.setOpacity()

instance.clear()