D3 for the Impatient

Chapter 8. Colors, Color Scales, and Heatmaps

Colors can serve different purposes in visualization: they may simply serve to make a graph more interesting or more pleasing, or they may help to reinforce and emphasize aspects of the data, or they may be primary carriers of information themselves. This chapter will explain how colors are represented in D3 and then discuss various color schemes and how they can be used to display information. The chapter ends with a description of false-color plots that strictly rely on color to represent data.

Colors and Color Space Conversions

Specifying an individual color in D3 is easy: you provide a string with either the name of a predefined color, or the color’s red, green, blue (RGB) or hue, saturation, lightness (HSL) components using the CSS3 syntax (see Appendix B). But the string format is not very convenient if you want to manipulate colors programmatically. For such purposes, you can obtain a color object using one of the factory functions in Table 8-1. A color object can be used wherever a color specification is expected: its toString() function will be called automatically and return a representation of the color in CSS3 format.

The returned color objects provide only a minimal API; they mostly serve as containers for their channel information. Every color object exposes its three components as suitably named properties, one for each channel. In addition, each object also has an opacity property for the alpha channel.

The functions ...