D3.js | d3.range() function

The d3.range() function in D3.js is used to return an array containing an arithmetic progression starting from the start parameter and iterated over a sequence of uniformly-spaced numeric value called a step and ends with a stop parameter.
Syntax: 
 

d3.range(start, stop, step)

Parameters: This function accepts three parameter which are illustrated below:- 
 

  • start: It is the inclusive integer value which is the first element of the output array. Its default value is 0.
  • stop: It is the exclusive integer value which are not added into the output array.
  • step: It is the integer value which regularly gets added with the start value and prints the result till stop value arrives.

Return Value: It returns an array containing an arithmetic progression.
Below programs illustrate the d3.range() function in D3.js.
Example 1: 
 

javascript




<body>
    <script src='https://d3js.org/d3.v4.min.js'></script>
 
    <script>
     
        // Calling to d3.range() function
        // with parameters start, stop and steps.
        A = d3.range(0, 4, 1);
        B = d3.range(10, 100, 10);
        C = d3.range(5, 50, 5);
        D = d3.range(1, 10, 2);
         
        // Getting an array of arithmetic progression
        document.write(A + "<br>");
        document.write(B + "<br>");
        document.write(C + "<br>");
        document.write(D + "<br>");
    </script>
</body>


Output: 
 

[0,1,2,3]
[10,20,30,40,50,60,70,80,90]
[5,10,15,20,25,30,35,40,45]
[1,3,5,7,9]

Example 2: 
 

javascript




<body>
    <script src='https://d3js.org/d3.v4.min.js'></script>
 
    <script>
     
        // Calling to d3.range() function
        // with parameters start, stop and steps.
        A = d3.range(1, 2);
        B = d3.range(10, 20);
        C = d3.range(0, 10, 0.5);
        D = d3.range(1, 10, 0.9);
         
        // Getting an array of arithmetic progression
        document.write(A + "<br>");
        document.write(B + "<br>");
        document.write(C + "<br>");
        document.write(D + "<br>");
    </script>
</body>


Output: 
 

1
[10,11,12,13,14,15,16,17,18,19]
[0,0.5,1,1.5,2,2.5,3,3.5,4,4.5,5,5.5,6,6.5,7,7.5,8,8.5,9,9.5]
[1,1.9,2.8,3.7,4.6,5.5,6.4,7.3,8.2,9.1]

Note:In the above code, some range() functions did not take step value so its default value is considered as 1.
Reference: https://devdocs.io/d3~5/d3-array#range