Comments (5)
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.
from plotty.
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?
from plotty.
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.
from plotty.
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.
from plotty.
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.
from plotty.
Related Issues (20)
- plotty render examples
- about the image position HOT 2
- Can we limit the range of values? HOT 5
- Using NaN as noDataValue HOT 16
- help using color scale HOT 9
- How is the 'atPoint' work? HOT 2
- Discrete Interpolation for Color Scaling HOT 3
- ctx.imageSmoothingEnabled is always true HOT 3
- Colour does not correctly scale to domain HOT 4
- Colorscales name error HOT 1
- Setting NoData to 0 causes entire raster not to render HOT 4
- Initialization fails for devices that support WebGL but do not support OES_texture_float HOT 6
- Colorscales with transparency do not work without WebGL HOT 2
- Interpolation of some colorscales with transparency fails if using WebGL HOT 1
- color scale with arbitrary step sizes HOT 2
- ionic/angular rendering error HOT 1
- Question: If there a way to get better color gradients between pixels? HOT 1
- Option defaults in docs HOT 4
- server side? HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from plotty.