search

biocore / emperor

Emperor a tool for the analysis and visualization of large microbial ecology datasets
http://biocore.github.io/emperor/
Other
52 stars 50 forks source link

"Incomplete" interpolation for sequential / diverging color maps #760

Closed fedarko closed 4 years ago

fedarko commented 4 years ago

When selecting a sequential / diverging color map (e.g. Viridis), the interpolation is incomplete: the "end" color isn't the end of the color map. See the example below, where the end color should be #fee825 (yellow) but is actually #8cb373 (blue-ish green).

image

This notably doesn't seem to be a problem when using the "continuous values" scaling:

image

I suspect that this line in color-view-controller.js may be causing these problems, but I'm not sure.

fedarko commented 4 years ago

Actually, coming back to this, the main part of the problem looks to be with the for loop in ColorViewController.getInterpolatedColors():

https://github.com/biocore/emperor/blob/023b6ecb761c31cd7f60a2e38e418d71199eb4e1/emperor/support_files/js/color-view-controller.js#L463-L474

There's an off-by-one error. If there are 5 unique values, then total will be 5, but the final color will be set on the i=4 iteration of the loop (since i is 0-indexed). I confirmed using chroma.js' fancy docs that this is causing the exact shade of blue-ish green we're seeing above:

image

This does relate to the question of why interpolator is being set the way it is (using chroma.bezier() and 5 points from within the color map, rather than just the full color map), as mentioned. If we just set the interpolator using chroma.scale(), the 4/5-th color is still closer to the expected yellow value:

image

I think a fix to this problem should address both of these issues.