Hi,
New to d3 here. I was playing around with the stacked bar chart https://observablehq.com/@d3/stacked-bar-chart and I realized the schemeSpectral return ‘undefined’ if the argument passed in is 2. This means that if I want to build a bar chart with only 2 variations (say gender male and female) the color scheme will not work. Did I understand it right? What’s the work around?
Thank you
I’m not quite sure I follow exactly how you’re trying to use d3.schemeSpectral but here’s some general information that should help.
First off, if you simply want to access a few colors to represent categorical variables, then it probably makes sense to use one of the categorical schemes as described on GitHub. For example, d3.schemeCategory10 provides a simple array of 10 easily distinguishable colors for exactly this purpose:
Note that d3.schemeSpectral, by contrast, is an example of a diverging scheme; thus, it’s best illustrated as a continuous range of colors that’s light in the middle with opposing colors diverging from the middle in opposite directions.
This type of effect is accomplished by generating an array of values and then interpolating that array. The array itself can be accessed via d3.schemeSpectral[k], where k is an integer from 3 to 9 inclusive. Note that d3.schemeSpectral[k] is undefined for k=0,1,2 because, I guess, the author wanted the index to match the length of the array and you need at least 3 colors to form a diverging scheme. I guess that’s why you found `d3.shemeSpectral[2] to be undefined.
Most often, though, the spectral colors are access via the interpolated function d3.interpolateSpectral, which is a function accepting values of t between zero and one and returning a color on that color line.
