D3.js Delaunay.hullPolygon() Method

Last Updated : 28 Apr, 2025

The Delaunay.hullPolygon() Method returns the closed polygon [[x0, y0], [x1, y1], …, [x0, y0]] representing the convex hull.

Syntax:

Delaunay.hullPolygon()

Parameters:

This method takes no parameters.

Return Value:

This method returns an Array of polygons that represents a convex hull.

Example 1: The below code example shows the use of the d3.Delaunay.hullPolygon() method.

HTML

<!DOCTYPE html> <html>  <head>     <meta charset="utf-8">     <script src="https://d3js.org/d3.v5.min.js"></script> </head>  <body style="text-align: center;">     <h1 style="text-align: center; color: green;">         GeeksforGeeks     </h1>     <h3 style="text-align: center;">         D3.js | d3.hullPolygon() Method     </h3>      <div id="app" style=         "text-align: center;          margin-top: 20px;          font-size: 18px;">     </div>      <script type="module">         import * as d3 from "https://cdn.skypack.dev/d3@7";          const canvasWidth = 400;         const canvasHeight = 300;         const canvas =              document.createElement("canvas");         const context = canvas.getContext("2d");          canvas.width = canvasWidth;         canvas.height = canvasHeight;          const data = Array(50).fill()             .map((_, i) => ({                 x: (i * canvasWidth) / 50,                 y: Math.random() * canvasHeight             }));          const voronoi = d3.Delaunay.from(data,             (d) => d.x,             (d) => d.y         ).voronoi([0, 0, canvasWidth, canvasHeight]);          context.clearRect(0, 0, canvasWidth, canvasHeight);          context.fillStyle = "black";         context.beginPath();         voronoi.delaunay.renderPoints(context, 1);         context.fill();          context.lineWidth = 1.5;         const segments =              voronoi.render().split(/M/).slice(1);         for (const e of segments) {             context.beginPath();             context.strokeStyle =                  d3.hsl(360 * Math.random(), 0.7, 0.5);             context.stroke(new Path2D("M" + e));         }          const hull = voronoi.delaunay.hullPolygon();          document.querySelector("#app").innerHTML =             `Convex Hull: ${JSON.stringify(hull)}`;          document.querySelector("#app").             appendChild(canvas);     </script> </body>  </html>

Output:

Screenshot-2024-03-03-184851-(1)

Example 2: The below code demonstrates the use of D3.js HullPloygon() method to calculate the convex hull of a set of points.

HTML

<!DOCTYPE html> <html>  <head>     <meta charset="utf-8">     <script src="https://d3js.org/d3.v7.min.js"></script> </head>  <body style="text-align: center;">     <h1 style="text-align: center; color: green;">         GeeksforGeeks     </h1>     <h3 style="text-align: center;">         D3.js | hullPolygon() Method     </h3>      <div id="app" style=         "text-align: center;          margin-top: 20px;">     </div>      <script type="module">         import * as d3 from "https://cdn.skypack.dev/d3@7";          const width = 600;         const height = 400;          const points = Array.from({ length: 50 },              () => [Math.random() * width,                  Math.random() * height]);          const delaunay = d3.Delaunay.from(points);          const hull = delaunay.hullPolygon();          const canvas = d3.select("#app")             .append("canvas")             .attr("width", width)             .attr("height", height);          const context =              canvas.node().getContext("2d");          context.beginPath();         delaunay.renderPoints(context);         context.fillStyle = "black";         context.fill();          context.beginPath();         context.strokeStyle = "blue";         context.lineWidth = 2;         context.moveTo(hull[0][0], hull[0][1]);         for (const point of hull) {             context.lineTo(point[0], point[1]);         }         context.closePath();         context.stroke();     </script> </body>  </html>

Output:

Screenshot-2024-03-04-214448

D3.js voronoi.extent() Function

kirandeepkaurguler

Improve

Article Tags :

D3.js Delaunay.hullPolygon() Method

Syntax:

Parameters:

Return Value:

Similar Reads

d3-axis

d3-chord

d3-color

d3-interpolate

d3-contour

d3-delaunay

d3-hierarchy

d3-scale

d3-scale-chromatic