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.

<script src = “https://d3js.org/d3-color.v1.min.js”></script>
<script></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:

var convert = d3.hsl(“purple”);

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

convert.h + = 60;

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:

convert.opacity = 0.5;

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.

<script>
var color = d3.color (“green”);               // Assigning the color name
console.log(color);
</script>

The above code will display the following result.

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

color.rgb()

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

<script>
var color = d3.color (“green”);
console.log(color.rgb());
</script>

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

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

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.

<script>
var color = d3.color (“green”);                             
console.log(color.opacity);
</script>

The above code will display the following result.

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.

<script>
var color = d3.color (“green”);                             
console.log(color.displayable());
</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.

<script>
var color = d3.color (“green”);                             
console.log(color.toString());
</script>

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.

<script>
var hsl = d3.hsl (“blue”);                             
console.log(hsl.h + = 90);
console.log(hsl.opacity = 0.5);
</script>

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.

<script>
var hsl = d3.hsl (“blue”);                             
console.log(hsl.h + = 90);
console.log(hsl.opacity = 0.5);
</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.

<script>
var hsl = d3.hsl (“blue”);                             
console.log(hcl);
</script>

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.

<script>
var hsl = d3.hsl (“blue”);                             
console.log(lab);
</script>

You got the following output.

{l: 32.29701093285073, a: 79.18751984512221, b: -107.8601617541481, opacity: 1}

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.

<script>
var hcl = d3.hcl (“blue”);                             
console.log(hcl);
</script>

You got the following output.

{h: 236.94217167732103, s: 4.614386868039719, l: 0.10999954957200976, opacity: 1}

Example

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

<html>
<head>
<script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
</head>
<body>
<h3>D3 colors API</h3>
<script>
var color = d3.color("green");
console.log(color);
console.log(color.opacity);
console.log(color.rgb());
console.log(color.toString());
console.log(color.displayable());
console.log(d3.rgb("yellow"));
console.log(d3.rgb(200,100,0));
var hsl = d3.hsl("blue");
console.log(hsl.h + =  90);
console.log(hsl.opacity = 0.5);
var lab = d3.lab("blue");
console.log(lab);
var hcl = d3.hcl("blue");
console.log(hcl);
var cube = d3.cubehelix("blue");
console.log(cube);
</script>
</body>

Output

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