Open In App

D3.js | d3.hcl() Function

Last Updated : 14 Aug, 2020
Improve
Improve
Like Article
Like
Save
Share
Report

The d3.hcl() function in D3.js is used to construct a new HCL color and returns HCL properties of the specified color taken as the parameter of the function.

Syntax:

d3.hcl(color);

Parameters: This function accepts single parameter color which is used to specify the CSS color.

Return Value: This function returns HCL properties of the specified CSS color taken as the parameter of the function.

Below programs illustrate the d3.hcl() function in D3.js:

Example 1:




<!DOCTYPE html>
<html>
  
<head>
    <title>d3.hcl() function</title>
  
    <script src='https://d3js.org/d3.v4.min.js'></script>
</head>
  
<body>
    <script>
          
        // Calling the d3.hcl() function
        // with some parameters
        var color1 = d3.hcl("red");
        var color2 = d3.hcl("green");
        var color3 = d3.hcl("blue");
        
        // Getting the HCL properties
        console.log(color1);
        console.log(color2);
        console.log(color3);
    </script>
</body>
  
</html>


Output:

{"h":39.99901061253295,"c":104.55176567686985,"l":53.24079414130722,"opacity":1}
{"h":136.01595303206318,"c":71.8500499715016,"l":46.22743146876261,"opacity":1}
{"h":306.2849380699878,"c":133.80761485376166,"l":32.297010932850725,"opacity":1}

Example 2:




<!DOCTYPE html>
<html>
  
<head>
    <title>d3.hcl() function</title>
  
    <script src='https://d3js.org/d3.v4.min.js'></script>
</head>
  
<body>
    <script>
          
        // Calling the d3.hcl() function
        // without any parameters
        var color = d3.hcl();
        
        // Getting the HCL values
        console.log(color);
    </script>
</body>
  
</html>


Output:

{"h":null,"c":null,"l":null,"opacity":1}

Reference: https://devdocs.io/d3~5/d3-color#hcl



Similar Reads

How to get the function name from within that function using JavaScript ?
Given a function and the task is to get the name of the function from inside the function using JavaScript. There are basically two methods to get the function name from within that function in JavaScript. These are: Using String substr() MethodUsing Function prototype name propertyGet the Function name using String substr() MethodThis method gets
2 min read
How to get the function name inside a function in PHP ?
To get the function name inside the PHP function we need to use Magic constants(__FUNCTION__). Magic constants: Magic constants are the predefined constants in PHP which is used on the basis of their use. These constants are starts and end with a double underscore (__). These constants are created by various extensions. Syntax: $string = __FUNCTION
1 min read
How to Check a Function is a Generator Function or not using JavaScript ?
Given an HTML document containing some JavaScript function and the task is to check whether the given function is generator function or not with the help of JavaScript. There are two examples to solve this problem which are discussed below: Example 1: In this example, we will use functionName.constructor.name property. It functionName.constructor.n
2 min read
How to implement a function that enable another function after specified time using JavaScript ?
Let us assume that we have been given a function add() which takes in two parameters a and b, and returns their sum. We are supposed to implement a function that should be able to call any function after the given delay amount of time. This can be done with the approaches as given below: Approach 1: Create a function that takes in the amount of del
2 min read
How to create a function that invokes function with partials appended to the arguments in JavaScript ?
In this article, we will learn to create a function that invokes a function with partials appended to the arguments it receives in JavaScript. Approach: We want to implement a function that invokes another function and provides the arguments it received. We can get the result by using (...) the spread/rest operator. Explanation: Let's say, we creat
3 min read
How to create a function that invokes the provided function with its arguments transformed in JavaScript ?
In programming, functions are used to reduce the effort of writing the same instance of code repeatedly. In this article let us see how we can create a function that invokes the provided function with its arguments transformed in JavaScript. In this article, the function transformer invokes the function scaling with its arguments, where the functio
2 min read
How to create a function that invokes each provided function with the arguments it receives using JavaScript ?
In this article, we will see how to create a function that invokes each provided function with the arguments it receives using JavaScript. It helps in reducing the effort of creating the same instance of code again and again. In this article let us see how to create a function that invokes each provided function with the arguments it receives and r
3 min read
How to create a function that invokes function with partials prepended arguments in JavaScript ?
In this article, we will see how to create a function that invokes functions with partials prepended to the arguments it receives in JavaScript. Before understanding the problem statement and approaching the solution for the same, let's, first of all, know what a function (also called a method) is and how a function gets executed. A function (or a
5 min read
Difference between Function.prototype.apply and Function.prototype.call
JavaScript treats everything as an object, even functions, and every object has its own properties and methods. Function objects have both apply() and call() methods on them. However, there is confusion about the two functions in JavaScript. The main difference between them is how they handle function arguments. There is no difference between these
2 min read
Explain the differences on the usage of foo between function foo() {} and var foo = function() {}
Here we see the differences on the usage of foo between function foo() {} and var foo = function() {} types of function declarations in JavaScript. function foo() {} is a Normal Function or traditional general way of Function Declaration which every user or developer finds it simpler to declare and use it every ever required and var foo = function(
4 min read