Understanding the coordinates

[bartbutenaers]

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

[nswamy14]

Hi @bartbutenaers , I would suggest adopting a normalised values ranging from 0 to 1 for the x, and y co-ordinates of the heatmap data. This approach will facilitate the scaling of these values according to the client-side viewport dimensions (height and width). To ensure consistent rendering across various resolutions, it's crucial to preserve the aspect ratio of the heatmap.

For example: On Server :

• data : [{x: 0.3, y: 0.2, value: 37}, {x: 0.43, y: 0.32, value: 17}]
• viewport aspect ratio (width : height) = 2 : 1

Client side rendering:

• Adjust the heatmap container to match the 2:1 aspect ratio, for instance, setting dimensions to 1000x500 pixels (scaling to best fit based on height or width).
• Map the Data point normalised values to viewport pixels : [{x: 0.3 1000 , y: 0.2 500, value: 37}, {x: 0.43 1000, y: 0.32 500, value: 17}]

If you need any clarifications let me know.

Thanks, NSwamy

[bartbutenaers]

Hi @nswamy14,

Thanks for thinking out loud. Really appreciated!

Yes indeed that makes sense. On the other hand I am not sure if users would have a good understanding of that. If they want to create their heatmap data, they need to start working with floating point x and y coordinates. And how many digits behind the zero are they allowed to specify.

But can I conclude from this, that this kind of calculations is the responsibility of the applications and not of your library? So I mean it is ok that I do such calculations myself in my application? Beside from how i do it: using normalized x/y coordinates, or by specifying my own grid rows and columns, or...

[nswamy14]

@bartbutenaers Yes, you're correct. The application must handle the calculations based on its specific needs and what's feasible.

[bartbutenaers]

Ok thanks for educating me ;-)