heatcanvas
heatcanvas copied to clipboard
sunng87
Assign a fixed color to a value and keep a good representation when markers are close to each other
Is there a way to assign a fixed color to a value, so it's not normalized to the current view, ie relative to all visible markers? It seems that the more markers there are, which even don't have a high value, when they are close to each other, the area gets redder. I found markers by themselves having 100 being light blue and many next to each other from 34 - 80 being red.
It seems that the more markers there are, which even don't have a high value, when they are close to each other, the area gets redder.
You are right. That's what any heatmap should do: aggregate values from some area.
You can try increasing step or even degree parameter from this formula. This would make aggreagation area smaller, and your small values would become lonely. But it won't help You, if your smaller values have identical coordinates.
Thousands of lilliputs would beat Gulliver.
So are heatmap colors about proximity not value? What I do want is some smearing, which is okay, but not red when the average or even max value is only 55 and a single marker with 100 gets almost nothing. What am I looking for then?
The values behind colors are about combination. Distribution of a total value over some area. A kind of density.
If you are interested in a maximum value, you can try replacing this.data[id] = this.data[id] + data; with this.data[id] = Math.max(this.data[id], data); in this line.
It depends on your task. If you are mapping wealth distribution in the city, you have to add values. If you are mapping the reachest people of the neighbourhoods, then you should take max.
The default color coding in this heatmap is another topic. As those 20 lines say, after computing values, heatmap finds a pixel with maximum value, and says: i'll paint this value with red, and then just scales all other values to other hues. It means, if you have 2 pictures with heatmaps, you can't compare green values in these pictures, or even say, that blue values from pic A are smaller, than red from pic B. Maybe yes, maybe no. Depends on data.
But if You need it, you can give up normalizing values, implement your own color-coding scheme, which would give you comparable results. Just don't forget to clamp intermediate values to fit your pallette. The code seems to be pretty straightforward.
This is my goal:
The colors should stay the same. The numbers represent the markers' values.
A, B and C are different perspectives of the viewer window, ie
A:
B:
C:
Sorry, i don't see any law or formula, that would describe shape (necks between points) and color of your pictures (sharp edges, no color change between center of the point and border).
Linear gradient between 2 points is nice, but it doesn't seem to work in case of even 3 points.
Once again: if you need no summation of values, you can use max. -- replace '+' with Math.max here, -- you probably should also replace all value[XXX] += YYY; with value[XXX] = Math.max(value[XXX], YYY); between lines 68 and 198 in https://github.com/sunng87/heatcanvas/blob/master/src/heatcanvas-worker.js
This would give you "image" with -- values between 0 and your maximum value, -- radial gradient for even just a single mark (radius would depend on step and power parameters).
After it You could modify coloring code: -- remove computation of the maximum -- set maxValue = 100; and get a picture, satisfying some of your requirements.
I tried that and it had no effect on the map. So I removed all code from heatcanvas-worker.js and the map still was not affected. Removing all code from heatcanvas.js made the page go blank as expected. Therefore heatcanvas-worker.js is not included or referenced. Are you the author it the repository?
One of contributors, who has optimized this lib a bit.
heatcanvas-worker.js is not included or referenced
You seem to be mistaken. Try to debug this function:
this._createWorker();