gosling.js icon indicating copy to clipboard operation
gosling.js copied to clipboard

Allow arbitrary (hex) colors in color range

Open puehringer opened this issue 1 year ago • 0 comments

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.

puehringer avatar Jan 12 '24 09:01 puehringer