gosling.js
gosling.js copied to clipboard
Allow arbitrary (hex) colors in color range
Currently, only fixed colors or color scales in PREDEFINED_COLOR_STR_MAP
are supported. It would be great if we could extend this to support arbitrary range, like ["green", "red", "blue"]
or so.
A very simple (and possibly incomplete) implementation in gosling-track-model.ts
could look like this:
let interpolate = interpolateViridis;
if (Object.keys(PREDEFINED_COLOR_STR_MAP).includes(range as string)) {
interpolate = PREDEFINED_COLOR_STR_MAP[range as string];
} else if (Array.isArray(range) && range.every(d => typeof d === 'string')) {
// Support for custom color palettes, i.e. ["green", "red", "blue"]
const scaler = scaleLinear(range as string[]).domain(
// Map the range to [0, 0.5, 1] in the above example
range.map((_, i, arr) => i / (arr.length - 1))
);
interpolate = (t: number) => scaler(t);
}
this.channelScales[channelKey] = scaleSequential(interpolate).domain(
domain as [number, number]
);
break;
Note that this assume that the domain
remains a [number, number]
, hence we interpolate all colors (even more than 2) linearly between the domain. If we want to support [string, string, string]
as range and [number, number, number]
as domain, more adjustments are required.