Color-stop edge behavior unclear
gpbmike opened this issue · 5 comments
Hi @santilland, first of all, I have been using plotty for a couple of years and it is awesome so thank you. Recently I was trying to debug an issue where a color was present when I would not expect it.
To better understand how plotty is working I made a sandbox: https://codesandbox.io/s/plotty-testing-rz1f1
But it behaves strangely and I am hoping you can explain what is going on. Perhaps I am simply misunderstanding how colorscales in plotty work.
The demo displays a 10x10 set of data that counts from 1-100. I have overlayed numbers on top of the canvas (scaled up) to better illustrate the issue.
Are the highlighted numbers what you would expect given the data, domain, colors, and positions? Moving the sliders does not give me 1:1 color changes like I would expect. I am hoping you can shed some light onto what's going on.
Hello @gpbmike, really happy to hear the library is useful :)
Thank you also for taking the time to really elaborate on the issue setting up a sandbox, screenshots, and so on.
I am not a 100% sure i understand what you are expecting in the sense of which positions should be highlighted but the first thing that jumps into my eye is how you use the addColorscale function, i guess i should describe the function better in the docs (re-reading it now it is quite unclear and the naming is also not ideal) the positions array should start from 0 and end with 1.0 and represents at which percentage steps the listed colors change to define the gradient. So for example ['red', 'blue', 'red] as colors could have as positions [0, 0.5, 1.0], which would describe a gradient that goes from red to blue as a gradient being completely blue right at the center of the colorscale and going back to completely red at the end.
I intended the modification of the domain to be the main approach for changing which "values" are "colored in" with the use of the clamp max or clamp min to decide if values outside the domain are rendered.
I updated your sandbox showing what i mean, i think this should make things clearer. Changing only the domain should probably make things also more efficient.
https://codesandbox.io/embed/plotty-testing-760b6
Feel free to comment out the line "plot.setColorScale("test");" to get a more colorful result :)
Hope that behavior is what you expected.
Thanks for walking through that with me @santilland. The example I posted was perhaps an oversimplification of my use case. What I'm really trying to do is highlight multiple domains.
Given a dataset, the user can define multiple value ranges (domains?) and assign a color (or gradient) to them.
I am using the colorscale as I might use a linear-gradient with color stops in CSS (https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient). The repetition of position/color creates a hard transition (no gradient).
I have updated my example to illustrate. Perhaps I'm approaching this from the wrong angle?
Hello @gpbmike, i must say it is interesting to see all the ways a library can be used :)
I think the issue is how the colorscale is created by using the createLinearGradient of the 2d rendering context. I'm not 100% sure how well it handles this same point stops for no gradient transition (It seems not very well).
In order to do some tests i updated your code to retrieve the created colorscale and show it below while also adding some borders to see where the expected stops land, and i think it shows why some values are not inside the expected color.
https://codesandbox.io/embed/plotty-testing-xz0i5
Maybe a function to create colorscales with discrete steps would be needed to better support your approach.
This is very interesting @santilland. Thank you for that visualization. I'm going to think more about this. I very much appreciate you taking the time to walk through that with me.
Thank you too for taking the time to analyze the issue, it is very helpful to get an outside view of possible issues to possibly improve the implementation approach.