Color differences between scheme and interpolation

[Jamie R. Rytlewski]

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

[Mike Bostock]

Per the README:

Since ColorBrewer publishes only discrete color schemes, the sequential and diverging scales are interpolated using uniform B-splines.

The implementation is in d3.interpolateRgbBasis (and d3.interpolateBasis for a single channel).

As for whether one scheme is better than another, it depends on context. If you have categorical data, you should use a categorical color scheme; if you have ordinal or quantitative data, you should use a sequential or diverging color scheme as appropriate.

There are a lot of guidelines on picking appropriate color schemes, and unfortunately I’m not going to try to summarize them here; generally speaking, all of the ColorBrewer schemes are good choices. For example, if your data has intrinsic colors, such as data representing fruit, then you should try to use those: use yellow for bananas, orange for oranges, etc. As another example, you should try to pick color schemes that work well for readers with various color vision deficiencies.

As for whether to use the discrete (scheme) or continuous (interpolate) schemes, the answer again probably depends. Naturally if your data is discrete (ordinal), then you should use the existing discrete schemes. If your data is continuous, you might get better differentiability by also using a discrete scheme, since discrete colors are easier to match exactly to a key and may avoid some optical illusions. For example, in a choropleth, you might use a threshold color encoding.

If you have a question about D3’s behavior and want to discuss it with other users, also consider the d3-js Google Group or joining the d3-js Slack.

Thank you! 🤗

[Jamie R. Rytlewski]

Thank you so much @mbostock. I should've read the README better. I read it, but did not READ it. Thanks again for the explanation.