Color interpolation and color schemes

Besides the d3.interpolateReds function, D3 provides a large number of other color scales and schemes. In this sample, we directly return a color based on the provided i argument (which corresponds to a segment of our donut). We could also use a D3 scale for this:

var scale = d3.scaleSequential(d3.interpolateReds).domain([0, 5]);

D3 provides a large number of color scales you can use. It comes with the following ranges out-of-the-box:

But if you include the https://github.com/d3/d3-scale-chromatic  module, you get a large number of additional colors that you can use (the following image just shows a subset. If you want to see all the colors, open <DVD3>/chapter-02/colors.html in your browser):

The previous two images show a sequential set of colors. If you want to use a specific color scheme (for example, a fixed set of colors), you can also use D3 for that. When you use the d3-scala-chromatic module you get the following standard color schemes:

To use these color schemes, you need to create your scale in a slightly different way:

var scale = d3.scaleQuantize().domain([0, width]).range(d3.schemeAccent);

With a scaleQuantize function, the input range (zero to width) is mapped to an array of values (d3.schemeAccent). D3 will calculate which color is mapped to a specific input value. So, enough about the colors, let's go back to drawing the gray donut.