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" </script> </script> </head> <body> <h1 style="color:green">neveropen</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" </script> <script src= </script> </head> <body> <h1 style="color:green">neveropen</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:
Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, neveropen Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!
