"Incomplete" interpolation for sequential / diverging color maps

[fedarko]

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).

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

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

[fedarko]

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

emperor/emperor/support_files/js/color-view-controller.js

Lines 463 to 474 in 023b6ec

	ColorViewController.getInterpolatedColors = function(values, map) {
	map = map || 'viridis';
	map = chroma.brewer[map];
	var total = values.length;
	var interpolator = chroma.bezier([map[0], map[3], map[4], map[5], map[8]]);
	var colors = {};
	for (var i = 0; i < values.length; i++) {
	colors[values[i]] = interpolator(i / total).hex();
	}
	return colors;
	};

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:

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:

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