nswamy14 / visual-heatmap Goto Github PK

Hi @nswamy14,

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

1. 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?

2. 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.

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

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

4. 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}, ....]
   

5. 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

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

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

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.

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...

1. 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?

2. 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)?

3. 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?

4. 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