D3.js voronoi() Function

0 0 1 minute read

The d3.voronoi() function in D3.js is used to create a new Voronoi diagram layout with the default x and y accessors and a null extent. The Voronoi diagram is drawn using a set of data points that can be specified later.

Syntax:

d3.voronoi()

Parameters: This function does not accept any parameters.

The example below demonstrates the d3.voronoi() function:

Example:

HTML

<!DOCTYPE html> 
<html> 
<head> 
  <script 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"> 
    zambiatek 
  </h1> 
  
  <script> 
      
    // Import the CSV data for 
    // specifying the Voronoi 
    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)); 
  
      // Using the d3.voronoi() function 
      // to create a Voronoi diagram 
      var voronoi = d3.voronoi() 
        .x(function (d) { return x(d.x); }) 
        .y(function (d) { return y(d.y); }) 
        .extent([[0, 0], [400, 400]]); 
  
      // Adding data to represent the Voronoi 
      // and displaying it 
      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"); 
    }); 
  </script> 
</body> 
</html>

Output:

Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, zambiatek 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!