categorical scheme with gradients

[AdrienLemaire]

I need to associate gradients to 8 categories, and it looks like a custom categorical scheme, except I need to define 16 colors, in order for each category to be represented by a gradient between two colors.

Looking at the code behind a categorical scheme, it looks like rgb colors are just concatenated one after another. Is there a way to fulfill my requirement using d3-scale-chromatic? Or do you know a better alternative?

Thanks in advance for the support

[curran]

If you use a scaleLinear, you can pass an array of stop points as the domain, and the array of colors from d3-scale-chromatic as the range, and if my memory serves me well the scale will do linear interpolation (i.e. a gradient) between the colors.

[AdrienLemaire]

@curran I got this working with a list of d3.scaleSequential(d3.interpolateRgb("color1", "color2")) for each of the 8 category gradients.

const categoryColors = [
  d3.scaleSequential(d3.interpolateRgb("#0E113A", "#08091C")),
  d3.scaleSequential(d3.interpolateRgb("#8E3FAF", "#554FA0")),
  d3.scaleSequential(d3.interpolateRgb("#EF476F", "#C62688")),
  d3.scaleSequential(d3.interpolateRgb("#E94B35", "#BF2045")),
  d3.scaleSequential(d3.interpolateRgb("#F49D00", "#E96C35")),
  d3.scaleSequential(d3.interpolateRgb("#FED766", "#F49D00")),
  d3.scaleSequential(d3.interpolateRgb("#02D6A0", "#00B9AB")),
  d3.scaleSequential(d3.interpolateRgb("#01AFD8", "#018ED8")),
];

This is certainly not optimal, so if you have a better idea, I'd love to hear about it.

I had forgotten to mention that I'm working with an arc generator, which should ideally be used with a conical gradient, except svg has only linearGradient or gradialGradient, and the css conic-gradient function doesn't apply on svg elements fill property. I resolved it using this [trick by Tom Shanley](// https://bl.ocks.org/tomshanley/9953da50ec833fdb4819dd065d2f6643)

Anyways, that has become out of this question's scope, so I'll close this issue, thanks again for your reply!

[curran]

Very nice!