Home > Blockchain >  d3 - Shift color scheme to pastels
d3 - Shift color scheme to pastels

Time:10-11

I would like to take one of the d3 color schemes but produce a pastel version of it. I don't want the light colors to be too light or the dark to be too dark.

Currently have:

intColor = d3.scaleOrdinal()
    .domain(locations.map(d => d.id))
    .range(d3.quantize(t => d3.interpolateSpectral(t * .8   .1), locations.length))

but the t function (* .8 to pull in right side and .1 to pull in left) is not controllable. Would like something where I can say use d3.interpolateRdYlGn with a certain lightness range.

CodePudding user response:

In the end I separated the color into its LCH components and gave specific values to Colorness and Lightness

intColor = d3.scaleOrdinal()
    .domain(internalLocations.map(d => d.id))
    .range(d3.quantize(t => {
      const {l, c, h} = d3.lch(d3.interpolateSpectral()(t))
      return d3.lch(80, 30, h) // 80 is high lightness and 30 is low colorness.
    }, locations.length))
  • Related