heatmap.js icon indicating copy to clipboard operation
heatmap.js copied to clipboard

Issue when set value 0 for dataPoints

Open lidroider opened this issue 2 years ago • 0 comments

v2.0.5

If I normalize data to [0, 1] before draw heatmap, point having value = 0 is not exactly rendering.

var heatmap = h337.create({
  container: document.getElementById("heatmapContainer"),
  gradient: {
    0.25: "rgb(0,0,255)",
    0.55: "rgb(0,255,0)",
    0.85: "yellow",
    1.0: "rgb(255,0,0)",
  }
});


heatmap.setDataMax(1);
heatmap.setDataMin(0);

heatmap.addData([{
  x: 500,
  y: 500,
  value: 0,
  radius: 100,
},
{
  x: 600,
  y: 600,
  value: 1,
  radius: 100,
}])

Output

Screen Shot 2022-07-04 at 12 50 14

Although point (500,500) have value 0, the color after rendering is same the color of point (600,600) having value 1

Expected result:

Screen Shot 2022-07-04 at 12 50 44

Point (500,500) has value 0, it's color after rendering must be transparent, due to value 0 Point(600,600) has value 1, it's color after rendering must be rgb(255,0,0) as gradient config

Now I must set value of (500,500) point to 0.00001 instead of 0 to render the exprected result image

Reason

When I debug I found the issue from that line https://github.com/pa7/heatmap.js/blob/4e64f5ae5754c84fea363f0fcf24bea4795405ff/src/data.js#L29

I think if _valueField value is not in dataPoint's keys or cannot get value from dataPoint object, casting to 0 is better

Now if value of dataPoint[this._valueField] is 0, dataPoint[this._valueField] || 1 is 1 and cause the rendering is not exact

Thank you for your repo, it's amazing library

Please review and fix this issue

lidroider avatar Jul 04 '22 06:07 lidroider