D3.js | d3.utcHour Function

The d3.utcHour function in D3.js is used to return all the hours with date in the given range of start and end time in Coordinated Universal Time (UTC).

Syntax:

d3.utcHour.range(start, end, step);

Parameters: This function accept three parameters which are given below:

Start: This parameter holds the given start time.
end: This parameter holds the given end time.
step: This is the optional value used to skip hours.

Return Value: This function returns all the possible hours in the given range.

Below programs illustrate the d3.utcHour function in D3.js:

Example 1:

<!DOCTYPE html> 
<html> 

   <head> 

      <title> 

          D3.js | d3.utcHour Function  

      </title> 

      <script src = 

          "https://d3js.org/d3.v4.min.js"> 

      </script> 

   </head> 

   <body> 

      <script> 

         // Initialising start and end time 

         var start = new Date(2015, 07, 01, 4, 20); 

         var end = new Date(2015, 07, 01, 8, 20); 

         // Calling the utcHour function 

         // without step value 

         var a = d3.utcHour.range(start, end); 

         // Getting the hours values 

         console.log(a); 

      </script> 

   </body> 
</html>

Output:

["2015-07-31T23:00:00.000Z", "2015-08-01T00:00:00.000Z",
 "2015-08-01T01:00:00.000Z", "2015-08-01T02:00:00.000Z"]

Example 2:

<!DOCTYPE html> 
<html> 

   <head> 

      <title> 

          D3.js | d3.utcHour Function  

      </title> 

      <script src = 

          "https://d3js.org/d3.v4.min.js"> 

      </script> 

   </head> 

   <body> 

      <script> 

         // Initialising start and end time 

         var start = new Date(2015, 07, 01, 1, 20); 

         var end = new Date(2015, 07, 01, 6, 20); 

         // Calling the utcHour function 

         // with step value 

         var a = d3.utcHour.range(start, end, 2); 

         // Getting the hour values 

         console.log(a); 

      </script> 

   </body> 
</html>

Output:

["2015-07-31T20:00:00.000Z", "2015-07-31T22:00:00.000Z",
 "2015-08-01T00:00:00.000Z"]

Reference: https://devdocs.io/d3~5/d3-time#timeHour

Article Tags :

JavaScript

Web Technologies

D3.js