search

d3 / d3-scale-chromatic

Sequential, diverging and categorical color scales.
https://d3js.org/d3-scale-chromatic
Other
801 stars 106 forks source link

categorical scheme with gradients #21

Closed AdrienLemaire closed 5 years ago

AdrienLemaire commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

@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 commented 5 years ago

Very nice!