Colors API in D3.js

The color API is used to store the selected color and also manage the transformation between the various color models. A color model contains three colors, such as Red, Green, Blue. These three colors can display all the colors. The color can be determined by using the following ways. They are-

  • As RGB Values 
  • By using Color name
  • As HSL Values
  • As HWB Values
  • As Hexadecimal Values

D3.js provides a facility to display different colors by using the color API. It also helps to manipulate and reconstruct operations of the colors. In this chapter, we will discuss the color API in detail.

Configuration of Color API

You can configure the color API with the help of below-given script.

Primitive Operations

D3.js provides some essential operation of color API. It is explained below:

Converting color value to HSL

You can transform the color value to HSL with the help of the following script:

If you want to rotate the hue by 60°, then you can also use the below-mentioned code:

You can also adjust the level of saturation. To perform fading, you are required to modify the opacity value, as explained in the below script:

Methods of Color API

Some of the essential methods of color API are listed below:

  • d3.color(specifier)      
  • color.rgb()
  • color.opacity
  • color.displayable()
  • color.toString()
  • d3.hsl(color)
  • d3.rgb(color)
  • d3.hcl(color)
  • d3.lab(color)
  • d3.cubehelix(color)

Now, we are going to describe the above methods, one by one. 

d3.color (specifier)

This method can be applied to return the HSL or RGB color by parsing of the defined CSS color. If you don’t declare the specifier, then it will return an empty value.

For Example

Here, we take an example for the above method.

The above code will display the following result.

color.rgb()

It can be applied to return the RGB value of the color. It is explained below.

The above method will show you the below-given result:

color.opacity

This can be applied to modify the fadedness of the color. The range of opacity have [0, 1].

For Example

Here, we take an example for the above method.

The above code will display the following result.

1

color.displayable()

This method returns true, if the color is representable; it returns false, if the value of RGB color model lies from 0 to 255. If the opacity is out of the range then it may also return false. It is explained in the below-given script.

The above code will display the following result.

true

color.toString()

This method displays a string color according to the Object Model Specification of the CSS. It is explained below.

The above code will display the following result.

rgb (0, 128, 0)

d3.hsl(color)

It can be applied to create a new color. The method values can be defined as the H, S, and L that gives you an instance. An example is given-below. 

The above code will display the following result.

330

0.5

d3.rgb(color)

This method helps you to design a new RGB color as shown in the below script.

The above code will display the following result.

{r: 255, g: 255, b: 0, opacity: 1}

{r: 200, g: 100, b: 0, opacity: 1}

d3.hcl(color)

It can be applied to create a new color. The method values can be defined as the H, C, and L that gives you an instance. An example is given-below.

The above code will display the following result.

{h: 306.2849380699878, c: 133.80761485376166, l: 32.29701093285073, opacity: 1}

d3.lab(color)

It can be applied to generate a new color. The method values can be defined as the L, A, and B that gives you an instance. An example is given-below.

You got the following output.

d3.cubehelix(color)

It can be applied to design a new cubehelix color. The channel values are defined as h, s, and l that returns in the form of instance. An illustration is given below for the same.

You got the following output.

Example

Here, we have an example to show the methods of color API.

Output

After the successful compilation of the above code, you got the following output.

Colors API in D3.js