heatmap.js
heatmap.js copied to clipboard
Issue when set value 0 for dataPoints
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

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

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