Skip to content
Related Articles

Related Articles

Improve Article

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=
</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=
</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>

Output:

Attention reader! Don’t stop learning now. Get hold of all the important Comcompetitivepetitve Programming concepts with the Web Design for Beginners | HTML  course.




My Personal Notes arrow_drop_up
Recommended Articles
Page :