Interpolated values between points are additive rather than averaged

[wodCZ]

This is a bump to #186, which I can't, for any reason, comment in. Sorry for messing your issues with this.

Do you know about an workaround on that issue? I need areas with lower values to be average instead of added, even with decreased performance.

I have had a look at pull #90, but can't reproduce the changes on current codebase.

cc @juliojgarciaperez - did you solve this problem, please? I can't even find alternative library :(

[pa7]

@wodCZ WIP: https://github.com/pa7/heatmap.js/tree/bugfix/data-interpolation however #90 wouldn't average the datapoints, it merely limits the interpolation maximum so the additive effect does not exceed the datapoint values. still thinking about how to solve that properly

[LePew]

Hi pa7. Thanks a lot for your work. I just tried the bugfix you suggested and it seems to work as expected. It would be great to merge it to the codebase and offer this as a cfg option: renderAdditive or renderAveraged.

[pa7]

@LePew did you check it w/ my branch, or tested the old PR?

[LePew]

@pa7 I backported https://github.com/pa7/heatmap.js/tree/bugfix/data-interpolation to current branch to test it. But after more testing, I found out some problems:

• Treatment is slow with huge datasets
• Sometimes graphical smearing appears at certain zoom levels (using with leaflet)
• Zooming in and then zooming out doesn't render the same gradient (leaflet/FF52.0/Linux).

I need time to play a bit more with the code and understand its logic maybe :)

[marsousa]

Hi pa7. Thank you for your work on heatmap.js ! Any further development on this issue ? If not for the average between values, is there a simple way to limit the interpolation to the max from the dataset (#90) in the current version ?

[rebendajirijr]

Is there any progress on this issue? I'd also appreciate values being averaged instead.

[dexion]

Simplifier bug in two dots (markers). Reproduce with this:

 var heatmap, d;
      window.onload = function() {
        heatmap = h337.create({
          container: document.getElementById('heatmapContainer'),
          maxOpacity:1,
          gradient: {
            // enter n keys between 0 and 1 here
            // for gradient color customization
            '0': '#00A2F4',
            '0.07': '#00A2F4',
            '0.12': '#FFC400',
            '0.25': '#FFC400',
            '0.40': '#FF9C00',
            '0.60': '#FF4B39',
            '0.8': '#0f0f0f',
            '1': '#0f0f0f'
          },
          blur:0.1,
          // backgroundColor:'rgba(53,87,161,1)'
          // backgroundColor:'blue'
          backgroundColor:'white'
        });
        window.h = heatmap;

        d = [
                { x: 200, y: 150, value: 46, radius: 80 },
                { x: 250, y: 200, value: 53, radius: 80 },
                { x: 450, y: 150, value: 68, radius: 80 },


                { x: 200, y: 350, value: 0, radius: 80 },
                { x: 400, y: 350, value: 12, radius: 80 },
                { x: 600, y: 350, value: 35, radius: 80 },

                { x: 200, y: 550, value: 55, radius: 80 },
                { x: 400, y: 550, value: 160, radius: 80 },
                { x: 600, y: 550, value: 250, radius: 80 }];
            h.setData({
                min: 12,
                max: 160,
                data: d
            });

      };

Crossing 46 and 53 seems like 68 but it should be whole one color like 46 or 53. With bigest blur it is not so obviously. So problem is in algorithm of overlapping figures with opacity.