nswamy14 / visual-heatmap Goto Github PK

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

License: BSD 3-Clause "New" or "Revised" License

JavaScript 8.03% TypeScript 91.97%

heatmap visualheatmap visual-heatmap heat-maps heatmap-visualization datavisualisation javascipt typescipt visualisation visualizations

visual-heatmap's Introduction

Visual-Heatmap Js

Visual Heatmap, an open-source JavaScript module, emerges as a powerful tool designed to render large-scale heatmaps with exceptional performance. This framework is based on advanced graphical rendering - WebGL/Shaders. It can render 500,000+ data points with a good framerate.

Examples:

Click Click Click Click

Installing

npm

npm i visual-heatmap --save

Or Download the source code from the below links

Usage

Importing

Visual-Heatmap offers both ES6 and UMD modules, making it possible to integrate the module into applications as needed.

import Heatmap from 'visual-heatmap'

Instance Creation API

visualHeatmap provides an API to create heatmap instances. API accepts container/containerId and config as an input. A context element will be created under the provided Div #containerId.

let instance = Heatmap('#containerId', {
        size: 30.0,  //Radius of the data point, in pixels. Default: 20
        max: 100,  // if not set, will be derived from data
        min: 0,  // if not set, will be derived from data
        intensity: 1.0, 
        backgroundImage: {
            url: "urlPath",  // image url
            width: 100, // if not set, viewport width of the image will be considered
            height: 100, // if not set, viewport height of the image will be considered
            x: 0,
            y: 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
        }]
    });

Container/ContainerId : The container div element or a string CSS Query selector that identifies the container.

Config Object :

{
     size : Radius of the data point, in pixels. Default: 20
     max : Max data Value for relative gradient computation. if not set, will be derived from data.
     min : Min data Value for relative gradient computation. if not set, will be derived from data.
     intensity : intensity factor. Default: 1.0
     opacity : Opacity factor. Default: 1.0
     rotationAngle : Rotation angle. Default: 0
     translate : translate vector [x, y]. Default: [0,0]
     zoom : Zoom Factor. Default: 1.0
     gradient : Color Gradient, an array of objects with color value and offset.
     backgroundImage: To set the background for the heatMap. Value : { url: , x: , y: , height: , width: }
}

Adding Data API

instance.renderData([])

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

instance.renderData([{x: , y: , value: }])

instance.addData([], transformationIntactflag);

Accepts an array of data points with 'x', 'y', and 'value' and a boolean flag to specify to apply existing heatmap transformations on the newly added data points. After adding data points, need to invoke the .render() method to update the heatmap. Try Example

instance.addData([{x: , y: , value: }],transformationIntactflag)

Render API

Method to re-render the heatmap. This method needs to be invoked as and when configurations get changed. Example

instance.render()

Configuration Setting API

instance.setMax(number)

To set max data value, for relative gradient calculations.

instance.setMin(number)

To set min data value, for relative gradient calculations.

instance.setTranslate([number, number])

Api to perform translate transformation on the canvas. Accepts array[x, y] as an input. Try Example

instance.setZoom(number)

Api to perform zoom transformation on the canvas. Accepts float value as an input. Try Example

instance.setRotationAngle(number)

Api to perform rotation transformation on the canvas. Accepts angle in radians. Try Example

instance.setSize(number)

Api to set point radius. Accepts float value as an input. Try Example

instance.setGradient(gradient)

Api to set color gradient. Accepts array of objects with color value and offset.

instance.setIntensity(number)

Api to set the Intensity factor. Accepts float value as an input. Try Example

instance.setOpacity(number)

Api to set Opacity factor. Accepts float value as an input. Try Example

instance.setBackgroundImage({ url: , x: , y: , height: , width: })

Api to set Background image. Accepts Object with { Url, height, width, x, and y} properties as input Try Example

instance.projection({x: , y: })

Api to get projected co-ordinates relative to the heatmap layer. Try Example

instance.resize()

Api to rerender heatmap on parent container resizes.

instance.clear()

Api to clear canvas.

⭐️ Show Your Support

Please give a ⭐️ if this project helped you!

visual-heatmap's People

Contributors

Stargazers

Watchers

Forkers

mysticaltech bezyaev viachess genostack quentingibson alphanics bartbutenaers diebarral mohitkumartoshniwal lcsouzamenezes

visual-heatmap's Issues

Does not Work for Some IOS Devices

Hi there first of all great library,
but when using it i sadly had issues on ios devies aspecially older ones . Here i encountered the problem that this library uses to many uniforms. The Ipad air 2 only has about 128 to spare. I guessed that your library uses about ~ 230 uniforms. So would there be a way to reduce/cut by half the number of used uniforms without any drawbacks to the performance.

Greetings Jonathan

Heatmap disappears when translate in XY directions

Hi @nswamy14,

When I translate the heatmap (in X/Y directions), the heatmap disappears. I.e. the whole dive beomes white again.

It looks to me that the values arrive correctly:

Do you have any idea what could cause this?

Thanks!
Bart

Background color

Hi,
I'm trying different heatmap scripts, and at the moment I think yours is the most performing and realistic, the only thing, in my case, I would have to 'fill' the whole canvas with a base color (semi-transparent green), so how could I attribute a color to the remaining areas, those without mapping, currently transparent?
Thank you

Shapes on canvas

Hi @nswamy14,

I have a situation at my current project for which I have to overlap a second canvas on top of this library to display some shapes the client wants to see (zones, more specifically). This has been proven to be quite complicated to get right, so the alignment and zoom/scale between the two canvases make sense.

It'd be great if this library supported drawing additional shapes on top of the heatmap because I avoid the problem mentioned above. Also, this is something I'm willing to do myself and create a pull request later on.

The solution I'm thinking of is providing a function to which you can pass an array of objects, where each object represents a shape. This object would be a list of points that represent the vertexes of the shape (only polygons for now).

What do you think about this? Do you think is doable? Do you see any potential issue I might run into? Any consideration I need to have?

Thanks!

Adding Typescript support

Hello @nswamy14,

Is there any plan to add Typescript support ?

Thank you,
Nicolas

Help needed to migrate from heatmap.js

Hi @nswamy14,

I am trying to migrate my application from heatmap.js to your library, but there are a couple of things I don't understand yet. It is not my intention to ask you to do all the work! But I would love to get your opinion, and if possible some tips about how to implement it...

The heatmap.js library also has a setDataMin method to set the minimum value, while yours only has a method to set the maximum value. Is it possible to add such a method also in your library, or not for some reason?
When no maximum value is specified, you use Infinity here as the default maximum value. I am wondering if it would be possible to calculate the max value (in the render method), as the maximum value of all the values in exData (as a third option)?
In my previous program I had the ability to show labels (which could be the numerical values or some short labels) on top of the heatmap. This was not a feature of the heatmap.js library, but a layer I created on top of heatmap.js. But I am wondering if this feature could be part of your library?
In my previous program I also had the ability to show a background image behind the heatmap. I am wondering if this a feature could be part of your library. I mean an extra setBackgroundImage method which accepts e.g. an ArrayBuffer (or something similiar...).

If you want to don't think it is good practice to implement 4 and 5 in your library, then I again need to workaround it. Which would be kind of a pity, because it is much more efficient and cleaner if baked into your render method...

Looking forward to hear your thoughts. Thanks!!

Bart

Adapt content to canvas width

Hey!

First of all, thank you for your work on this library, it's been very useful.

I have one question, cause I'm not sure if it's possible or if there's a workaround for it. The dataset that I'm rendering on the heatmap makes everything look fairly concentrated in the center of the screen, leaving most of the canvas unused, unless I zoom in.

Is there a way to make the data occupy as much of the canvas width/height as possible, without having to zoom in?

Thanks!

canvas.height = 0 if container height inputted in percent

Whenever I set the dimensions of the containing div to a percent value, the height of the created canvas element gets set to zero.

I style the div via css:
#containerId { width: 100%; height: 100%; }

If, instead of 100%, I set the height value to 100px, the canvas gets initialized with the correct height of 100 px.

One workaround I tried was setting the canvas.height after Heatmap initialization, like so:
let canvas = document.getElementById("containerId").firstElementChild; canvas.style.height ="100%";
which results in a WebGL error :

[.WebGL-00000286081B5040]RENDER WARNING: texture bound to texture unit 0 is not renderable. It maybe non-power-of-2 and have incompatible texture filtering.

One fix for this might be to allow for inputting an already styled canvas, instead of a containing div.

Understanding the coordinates

Hi @nswamy14,

After seeing your new projection method, I 'think' I am not using this library correctly...

I have no idea what the width and height of the div element will become in the front end running in the device's browser. Moreover if I have e.g. the same dashboard running on a large Windows portable and a small Android smartphone, the div elements will have a completely different size. As a result, since I don't know the clientWidth and clientHeight, I don't know the maximum x and y values of my heatmap. Or am I completely misinterpreting your x/y space?
So I 'thought' that it was not ok to work with x and y coordinates. Instead I had defined rows and columns that divide my heatmap area in a grid with cells.

Which means my server-side application generates something like this:

[{row: 0, column:0, value: 37}, {row: 2, column:5, value: 15}, ....]

When this data arrives in the frontend code running on my devices, for each grid cell the corresponding heatmap coordinates are being calculated (based on the current row & column & div client width & div client height):
```
[{x: 0, y:0, value: 37}, {x: 4, y:10, value: 15}, ....]
```
Then I pass that data (containing x and y coordinates) to your heatmap node.

Is this a bad way of working, and should I simply use x and y coordinates. But then how do I know what is the maximum x and y coordinate value (without knowing in advance the div client width and height)?

Thanks for illuminating me!!!!!!!!!!

Kind regards,
Bart

nswamy14 / visual-heatmap Goto Github PK

visual-heatmap's Introduction

Visual-Heatmap Js

Examples:

Installing

Usage

Importing

Instance Creation API

Adding Data API

instance.renderData([])

instance.addData([], transformationIntactflag);

Render API

Configuration Setting API

instance.setMax(number)

instance.setMin(number)

instance.setTranslate([number, number])

instance.setZoom(number)

instance.setRotationAngle(number)

instance.setSize(number)

instance.setGradient(gradient)

instance.setIntensity(number)

instance.setOpacity(number)

instance.setBackgroundImage({ url: , x: , y: , height: , width: })

instance.projection({x: , y: })

instance.resize()

instance.clear()

⭐️ Show Your Support

visual-heatmap's People

Contributors

Stargazers

Watchers

Forkers

visual-heatmap's Issues

Recommend Projects

Recommend Topics

Recommend Org