D3.js voronoi.y() Function

Last Updated : 14 Oct, 2020

The voronoi.y() function is used to set the y-coordinate accessor. If y is not specified then this function returns the current y-coordinate accessor to the Voronoi generator function.

Syntax:

d3.voronoi.y([y]);

Parameters: This function takes one parameter as given above and described below:

y: It is the value for the y-coordinate accessor.

Return Value: This function does not return anything.

Note: Please create a data.csv file. The data for the file is given in the below code.

Below given are a few examples of the Voronoi.y() function.

Example 1:

<!DOCTYPE html>  
<html lang="en">  
  
<head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="  
        width=device-width, initial-scale=1.0">  
  
    <script type="text/javascript"
        src="https://d3js.org/d3.v4.min.js">  
    </script> 
    <script src="https://d3js.org/d3-voronoi.v1.min.js"> 
    </script> 
</head>  
  
<body>  
    <h1 style="color:green">GeeksforGeeks</h1> 
    <h3 style="color:green">voronoi.y()</h3> 
      
    <script>  
        d3.csv("data.csv", function(error, data){ 
            var svg = d3.select("body") 
                        .append("svg") 
                        .attr("height", 400) 
                        .attr("width", 400) 
                        .append("g") 
                        .attr("transform", "translate( 
                 " + 20 + "," + -20 + ")"); 
  
            var y = d3.scaleLinear() 
                      .domain([2,20]) 
                      .range([400,0]); 
            var x = d3.scaleLinear() 
                      .domain([2,15]) 
                      .range([0,400]); 
            svg.append("g") 
                    .call(d3.axisLeft(y)); 
  
            svg.append("g") 
                    .attr("transform", "translate(0," + 400 + ")") 
                    .call(d3.axisBottom(x)); 
  
  
            var voronoi = d3.voronoi() 
                            .x(function(d) { return x(d.x); }); 
            // Use of voronoi.y() Function 
                voronoi.y(function(d) { return y(d.y); }) 
                .extent([[0, 0], [400,400]]); 
                      
            svg.append("g").selectAll("path") 
                .data(voronoi(data).polygons()) 
                .enter() 
                .append("path") 
                .attr("d",(d)=>{ return d ? ( 
          "M" + d.join("L") + "Z") : null; }) 
  
                .attr("fill","green") 
                .attr("stroke","black"); 
        }); 
  
        // Data for CSV file 
        // x,y,group 
        // 45,4.4,H 
        // 9.1,4.4,H 
        // 9.9,9.9,H 
        // 4.45,9.6,H 
        // 4,7.6,H 
        // 9,45,H 
        // 4,9.7,H 
        // 9.7,4.7,H 
        // 9.9,4.5,H 
        // 4,4.5,H 
        // 7.9,9,H 
        // 9.9,45,H 
        // 9,4.4,H 
    </script>  
</body>  
  
</html>  

Output:

Example 2:

<!DOCTYPE html>  
<html lang="en">  
  
<head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="  
        width=device-width,  
                initial-scale=1.0">  
  
    <script type="text/javascript"
        src="https://d3js.org/d3.v4.min.js">  
    </script> 
    <script src= 
"https://d3js.org/d3-voronoi.v1.min.js"> 
    </script> 
</head>  
  
<body>  
    <h1 style="color:green">GeeksforGeeks</h1> 
    <h3 style="color:green">voronoi.y()</h3> 
      
    <script>  
        d3.csv("data.csv", function(error, data){ 
            var svg = d3.select("body") 
                        .append("svg") 
                        .attr("height", 400) 
                        .attr("width", 400) 
                        .append("g") 
                        .attr("transform",  
                              "translate( 
                  " + 20 + "," + -20 + ")"); 
  
            var y = d3.scaleLinear() 
                      .domain([2,20]) 
                      .range([400,0]); 
            var x = d3.scaleLinear() 
                      .domain([2,15]) 
                      .range([0,400]); 
            svg.append("g") 
                    .call(d3.axisLeft(y)); 
  
            svg.append("g") 
                .attr("transform", "translate(0," + 400 + ")") 
                    .call(d3.axisBottom(x)); 
  
  
            var voronoi = d3.voronoi() 
                            .x(function(d) { return x(d.x); }); 
            // Use of voronoi.y() Function 
                voronoi.y(function(d) { return y(d.y); }) 
                // Setting the extent  
                .extent([[100, 100], [300,300]]); 
                      
            svg.append("g").selectAll("path") 
                .data(voronoi(data).polygons()) 
                .enter() 
                .append("path") 
                .attr("d",(d)=>{ return d ? ( 
                "M" + d.join("L") + "Z") : null; }) 
                .attr("fill","none") 
                .attr("stroke","green"); 
        }); 
  
        // Data for CSV file 
        // x,y,group 
        // 45,4.4,H 
        // 9.1,4.4,H 
        // 9.9,9.9,H 
        // 4.45,9.6,H 
        // 4,7.6,H 
        // 9,45,H 
        // 4,9.7,H 
        // 9.7,4.7,H 
        // 9.9,4.5,H 
        // 4,4.5,H 
        // 7.9,9,H 
        // 9.9,45,H 
        // 9,4.4,H 
    </script>  
</body>  
  
</html>  

Output:

Suggest improvement

D3.js voronoi() Function

Share your thoughts in the comments

D3.js voronoi.y() Function

Please Login to comment...

Similar Reads

What kind of Experience do you want to share?