D3.js scaleLinear() method

Last Updated : 19 Aug, 2020

The d3.scaleLinear() method is used to create a visual scale point. This method is used to transform data values into visual variables.

Syntax:

d3.scaleLinear();

Parameters: This method takes no parameters.

Return Value: This method returns a Linear scale function.

Example 1: Plotting scale points.

<!DOCTYPE html> 
<html> 
<meta charset="utf-8"> 
<head> 
  <title>Line in D3.js</title> 
</head> 
<script src= 
"https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.2/d3.min.js"> 
</script> 
  
<body> 
    <h1 style="text-align: center; 
               color: green;"> 
       GeeksforGeeks 
    </h1> 
  <center> 
    <svg width="700" height="40"> 
    <g class="scal" transform="translate(40, 30)"> 
    </g> 
  </svg> 
</center> 
  <script> 
var points = [ 0, 2, 4, 6, 7.72, 9.11, 9.99 ]; 
  
var ScaleGener = d3.scaleLinear() 
  .domain([0, 10]) 
  .range([0, 600]); 
  
  
d3.select('svg .scal') 
    .selectAll('circle') 
    .data(points) 
    .enter() 
    .append('circle') 
    .attr('r', 3) 
    .attr('fill', "green") 
    .attr('cx', function(d) { 
        return ScaleGener(d); 
    }); 
</script> 
</body> 
</html>

Output:

Example 2: Setting text for each point.

<!DOCTYPE html> 
<html> 
<meta charset="utf-8"> 
<head> 
  <title>Line in D3.js</title> 
</head> 
<script src= 
"https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.2/d3.min.js"> 
</script> 
  
<body> 
    <h1 style="text-align: center;  
               color: green;"> 
      GeeksforGeeks 
    </h1> 
  <center> 
    <svg width="700" height="40"> 
    <g class="scal" transform="translate(40, 30)"> 
    </g> 
  </svg> 
</center> 
  <script> 
var points = [ 0, 2, 4, 6, 7.72, 9.11, 9.99 ]; 
  
var ScaleGener = d3.scaleLinear() 
  .domain([0, 10]) 
  .range([0, 600]); 
  
  
d3.select('svg .scal') 
    .selectAll('circle') 
    .data(points) 
    .enter() 
    .append('circle') 
    .attr('r', 3) 
    .attr('fill', "green") 
    .attr('cx', function(d) { 
        return ScaleGener(d); 
    }); 
  
d3.select('svg .scal') 
    .selectAll('text') 
    .data(points) 
    .enter() 
    .append('text') 
    .attr('x', function(d) { 
        return ScaleGener(d); 
    }) 
    .attr('y', -10) 
    .text(function(d) { 
        return d; 
    }); 
  
</script> 
</body> 
</html>