Mike:

http://matplotlib.org/cmocean/
it would be nice to have some approximations using d3.interpolateRgbBasis as I did for ColorBrewer in d3-scale-chromatic.

(from d3/d3-scale#71)

The link provided to the Cubehelix page, https://www.mrao.cam.ac.uk/~dag/CUBEHELIX/, is broken due to its use of https. (I guess the site is not https enabled.) The link should probably be changed to www.mrao.cam.ac.uk/~dag/CUBEHELIX.

When I substitute interpolateCividis for interpolateRainbow, the displayed spectrum (for my supplied log-log data) changes from purple-green to black-gray. I'm loading directly from https://d3js.org/d3-scale-chromatic.v1.min.js

Hi there 👋

We have a user requesting the HSV colormap in our project: silx-kit/h5web#481.

As we use d3-scale-chromatic for our colormaps, we thought it might be better to add it here if it is a colormap you are interested in having ?

I get heterogeneous format of color, either HTML code such as "#21918c" or rgba code such as "rgb(255, 94, 99)" with different color schemes.

var interpolators = [ 'interpolateViridis', 'interpolateInferno', 'interpolateMagma', 'interpolatePlasma', 'interpolateWarm', 'interpolateCool', 'interpolateRainbow', 'interpolateCubehelixDefault' ]; for(var i=0, size=interpolators.length; i<size; i++) { interpolator = interpolators[i]; s = d3.scaleSequential().domain([0, 100]).interpolator(d3[interpolator]); console.log(s(50)); }

For the last 4 ones, I get rgba output, but 4 first ones give HTML code.
Is there a way to force the format ?

<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://d3js.org/d3-scale-chromatic.v1.js"></script>
<script>
    var range = d3.schemeAccent;
    var range = d3.schemeSpectral;
    var c = d3.scaleOrdinal(range).domain(["a","b","c"]);
    var result = c("a");
</script>

For schemeAccent, result is #7fc97f.
while for schemeSpectral, result is undefined.

We'd like to calculate the color value on a 2-dimensional matrix with 4 colors:

Is that possible with d3js-scale-chromatic?
It appears all functions provide only one variable t.

Any ideas? :)

Thank you & Best regards,
Johannes

All the interpolators based on an array of 9 or 11 values result in colors that are a bit duller than the original values. Using a Catmull-Rom interpolation (preferably L*a*b, but RGB is almost undistinguishable) would make them all vivid again:

the three bands below represent the array, the current interpolator, and the proposed change for RdYlBu

See all the others at https://observablehq.com/@fil/interpolate-colors-with-catmull-rom

The catmull-rom interpolator would be added to d3-interpolate; Matt Deslauriers’s version, which I use here, is coming from the Three.js codebase and operates in 3D. I think we would want to change its API a bit to work for any dimension (at least d = 1, 2, 3), but I haven't checked that part yet.

EDIT: a monotone interpolator seems smaller and faster, with comparable results (see below).

The cividis scale is a derivative of the viridis scale, adjusted for viewers with color vision deficiency, and also for those with standard vision, but avoiding the errors common with rainbow-style schemes.

References:

• 256-color LUT
• Scientific American article
• A Simulation Color Table for Engineers with Color Vision Deficiency
• Optimizing colormaps with consideration for color vision deficiency to enable accurate interpretation of scientific data

[INFO] ERROR in node_modules/@types/d3-scale-chromatic/index.d.ts(9,41): error TS1005: ',' expected.
[INFO] node_modules/@types/d3-scale-chromatic/index.d.ts(9,47): error TS1005: ',' expected.
[INFO] node_modules/@types/d3-scale-chromatic/index.d.ts(13,37): error TS1005: ',' expected.
[INFO] node_modules/@types/d3-scale-chromatic/index.d.ts(13,43): error TS1005: ',' expected.
[INFO] node_modules/@types/d3-scale-chromatic/index.d.ts(17,36): error TS1005: ',' expected.
[INFO] node_modules/@types/d3-scale-chromatic/index.d.ts(17,42): error TS1005: ',' expected.
[INFO] node_modules/@types/d3-scale-chromatic/index.d.ts(21,37): error TS1005: ',' expected.
[INFO] node_modules/@types/d3-scale-chromatic/index.d.ts(21,43): error TS1005: ',' expected.
[INFO] node_modules/@types/d3-scale-chromatic/index.d.ts(25,38): error TS1005: ',' expected.
[INFO] node_modules/@types/d3-scale-chromatic/index.d.ts(25,44): error TS1005: ',' expected.
[INFO] node_modules/@types/d3-scale-chromatic/index.d.ts(29,38): error TS1005: ',' expected.
[INFO] node_modules/@types/d3-scale-chromatic/index.d.ts(29,44): error TS1005: ',' expected.
[INFO] node_modules/@types/d3-scale-chromatic/index.d.ts(33,35): error TS1005: ',' expected.
[INFO] node_modules/@types/d3-scale-chromatic/index.d.ts(33,41): error TS1005: ',' expected.
[INFO] node_modules/@types/d3-scale-chromatic/index.d.ts(37,35): error TS1005: ',' expected.
[INFO] node_modules/@types/d3-scale-chromatic/index.d.ts(37,41): error TS1005: ',' expected.
[INFO] node_modules/@types/d3-scale-chromatic/index.d.ts(41,35): error TS1005: ',' expected.
[INFO] node_modules/@types/d3-scale-chromatic/index.d.ts(41,41): error TS1005: ',' expected.
[INFO] node_modules/@types/d3-scale-chromatic/index.d.ts(45,40): error TS1005: ',' expected.
[INFO] node_modules/@types/d3-scale-chromatic/index.d.ts(45,46): error TS1005: ',' expected.
[INFO] node_modules/@types/d3-scale-chromatic/index.d.ts(62,49): error TS1005: '>' expected.
[INFO] node_modules/@types/d3-scale-chromatic/index.d.ts(62,55): error TS1005: ',' expected.
[INFO] node_modules/@types/d3-scale-chromatic/index.d.ts(62,57): error TS1005: ',' expected.
[INFO] node_modules/@types/d3-scale-chromatic/index.d.ts(62,58): error TS1109: Expression expected.
[INFO] node_modules/@types/d3-scale-chromatic/index.d.ts(76,49): error TS1005: '>' expected.
[INFO] node_modules/@types/d3-scale-chromatic/index.d.ts(76,55): error TS1005: ',' expected.
[INFO] node_modules/@types/d3-scale-chromatic/index.d.ts(76,57): error TS1005: ',' expected.
[INFO] node_modules/@types/d3-scale-chromatic/index.d.ts(76,58): error TS1109: Expression expected.
[INFO] node_modules/@types/d3-scale-chromatic/index.d.ts(90,49): error TS1005: '>' expected.
[INFO] node_modules/@types/d3-scale-chromatic/index.d.ts(90,55): error TS1005: ',' expected.
[INFO] node_modules/@types/d3-scale-chromatic/index.d.ts(90,57): error TS1005: ',' expected.
[INFO] node_modules/@types/d3-scale-chromatic/index.d.ts(90,58): error TS1109: Expression expected.
[INFO] node_modules/@types/d3-scale-chromatic/index.d.ts(104,49): error TS1005: '>' expected.
[INFO] node_modules/@types/d3-scale-chromatic/index.d.ts(104,55): error TS1005: ',' expected.
[INFO] node_modules/@types/d3-scale-chromatic/index.d.ts(104,57): error TS1005: ',' expected.
[INFO] node_modules/@types/d3-scale-chromatic/index.d.ts(104,58): error TS1109: Expression expected.
[INFO] node_modules/@types/d3-scale-chromatic/index.d.ts(118,49): error TS1005: '>' expected.
[INFO] node_modules/@types/d3-scale-chromatic/index.d.ts(118,55): error TS1005: ',' expected.

Hi I've been upgrading a lot of d3v3 code up to v4 and I noticed that there apparently is no schemeCategory20() or schemeCategory20c() functions in d3-scale-chromatic. The CHANGES.md however mentions that these do exist and are part of the namespace flattening.

See: https://github.com/d3/d3/blob/master/CHANGES.md#scales-d3-scale

Do they exist? if not I would suggest an edit to the CHANGES.md to remove the section that states that they are available in v4. Thanks.

I would like to have rgba-values as output. I cannot find that option so I guess this would need an extension to the existing color-getter-functions to accept an optional alpha-value?

Could the API let us get the list of schemes, and range of acceptable parameters for any scheme?
Then we could auto-write the documentation and create color schemes choosers.

Here's a block that implements the idea
http://bl.ocks.org/Fil/0bf58d23011ab244c657a1262bcbe4b2

To be complete it would also have to expose the schemes' categories (Categorical, Diverging, etc).

Hello,

I see 2 pastel categorical schemes but none in diverging. Are there diverging color schemes that only contain pastel colors? Or is there an easy way to create such a scheme?

btw. Using alpha on colors of an existing diverging scheme is not an option as my graphics need to overlap.

Current

Scale functions export an rgb string making it a bit cumbersome to work with

• d3.interpolateSpectral(0.5) => "rgb(251, 248, 176)"

Proposal

Be able to specify the output format. One such example:

• d3.interpolateSpectral(0.5, 'object') => {r: 251, g: 248, b: 176}
• d3.interpolateSpectral(0.5, 'array') => [251, 248, 176]

Part of me feels like there is a utility function in d3-color to convert the rgb string but couldnt find it

See d3/d3-scale#63.

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

$ bower install d3-scale-chromatic
bower not-cached    https://github.com/saeidzebardast/d3-scale-chromatic.git#^1.1.0
bower resolve       https://github.com/saeidzebardast/d3-scale-chromatic.git#^1.1.0
bower not-cached    https://github.com/saeidzebardast/d3-scale-chromatic.git#1.1.1
bower resolve       https://github.com/saeidzebardast/d3-scale-chromatic.git#1.1.1
bower cached        https://github.com/mbostock-bower/d3-bower.git#4.9.1
bower validate      4.9.1 against https://github.com/mbostock-bower/d3-bower.git#^4.7.4
bower ECMDERR       Failed to execute "git ls-remote --tags --heads https://github.com/saeidzebardast/d3-scale-chromatic.git", exit code of #128 remote: Repository not found. fatal: repository 'https://github.com/saeidzebardast/d3-scale-chromatic.git/' not found

Additional error details:
remote: Repository not found.
fatal: repository 'https://github.com/saeidzebardast/d3-scale-chromatic.git/' not found

Hope you may contact Bower.io and retake the ownership.
Thanks a lot!

Hi, apologies in advance if this is the wrong place for this question. I'm currently working with a webgl scatterplot that uses d3 color palettes for shading. Each of my data points has an associated color hex code associated with it and I am hoping to find a way to utilize the hex code to find the appropriate value within a d3 color palette such as "rainbow" or "sinebow". Is that something you have attempted before or do you have any suggestions on how one might go about utilizing a hex code to get the correct shading from a d3 color palette?

Currently, only a few interpolated color schemes have discrete equivalents, and those that do have a limited number of possible ranges. For example, schemeYlGnBu offers discrete schemes only for lengths 3 through 9, and interpolateCool has no discrete scheme.

I've got a fairly simple function which could resolve this:

  function buildDiscreteFromInterpolator(interpolator, count) {                                                  
    const discrete = []                                                                                          
    for (let i=0; i < count; i++) {                                                                                  
      discrete.push(interpolator(i/count))                                                                       
    }                                                                                                            
    return discrete                                                                                              
  }   

but from a quick look at the source, I'm not sure where to put it for an actual PR. Or, if this function is a poor fit for the job for some reason I am unaware of, possibly suggest an alternative?

hey . i use Vue.js in my project.
and i want to use d3-scale-chromatic in my project.
i try

`import 'd3-color'

import 'd3-interpolate'

import 'd3-scale-chromatic'`

and when i console.log(d3.interpolateYlGn(0))
it shows error __WEBPACK_IMPORTED_MODULE_0_d3__.interpolateYlGn is not a function
what's wrong with my code?
thanks a lot!!!

First off, I want to say, I absolutely <3 d3.

A question that I had was win the scale colors and then taking the interpolation.

An example would be schemeBrBG vs interpolationBrBG.

For interpolations of 0 and 1, I get the RGB equivalent of schemeBrBG[11][0] and schemeBrBG[11][10].

The colors in the middle the values are off just slightly. I was wondering how you get the interpolation colors. I'm pretty sure you are getting the scheme colors from ColorBrewer.

Lastly, is there one scale that is better than the other. Such as would you use scheme over interpolation or vice versa?

Thanks!

Jamie

interpolatePuOr and schemePuOr ramp from orange to purple. This behavior is different from all the other examples, where the order of colors matches the order of color names in the exported property name. In addition, ColorBrewer also ramps from purple (a default for low values) to orange (a default for high values). Not sure if this was intentional or not, so thought it worthwhile to add an issue.

Hi, Mike,
I read some demos you write putting this extension right after d3-v4.x.js,
so my question is does this extension compatible with d3-v3.x.js?
I mean does it compatible backwards.
Many Thanks!

https://seaborn.pydata.org/tutorial/color_palettes.html#perceptually-uniform-palettes

Trying to follow the example here, if I do the following

var yellow = d3.interpolateYlGn(0), // "rgb(255, 255, 229)"

var yellowGreen = d3.interpolateYlGn(0.5), // "rgb(120, 197, 120)"

var green = d3.interpolateYlGn(1); // "rgb(0, 69, 41)"

then I get the following values

yellow -> "#ffffe5"

yellowGreen -> "#77.aaaaaaaaaaacc5.55555555555877.d55555555554"

green -> "#004529"

The first and the third output makes sense but I cannot figure out what to do with the second output; does anyone have any pointers on this?