A transform that uses @mapbox/polylabel to derive “pois”

package.json

@@ -79,7 +79,8 @@
   "dependencies": {
     "d3": "^7.9.0",
     "interval-tree-1d": "^1.0.0",
-    "isoformat": "^0.2.0"
+    "isoformat": "^0.2.0",
+    "polylabel": "^2.0.0"
   },
   "engines": {
     "node": ">=12"

src/index.js

@@ -42,7 +42,7 @@ export {WaffleX, WaffleY, waffleX, waffleY} from "./marks/waffle.js";
 export {valueof, column, identity, indexOf} from "./options.js";
 export {filter, reverse, sort, shuffle, basic as transform, initializer} from "./transforms/basic.js";
 export {bin, binX, binY} from "./transforms/bin.js";
-export {centroid, geoCentroid} from "./transforms/centroid.js";
+export {centroid, geoCentroid, poi} from "./transforms/centroid.js";
 export {dodgeX, dodgeY} from "./transforms/dodge.js";
 export {find, group, groupX, groupY, groupZ} from "./transforms/group.js";
 export {hexbin} from "./transforms/hexbin.js";

src/marks/geo.js

@@ -4,7 +4,7 @@ import {negative, positive} from "../defined.js";
 import {Mark} from "../mark.js";
 import {identity, maybeNumberChannel} from "../options.js";
 import {applyChannelStyles, applyDirectStyles, applyIndirectStyles, applyTransform} from "../style.js";
-import {centroid} from "../transforms/centroid.js";
+import {poi} from "../transforms/centroid.js";
 import {withDefaultSort} from "./dot.js";
 
 const defaults = {
@@ -56,7 +56,7 @@ export class Geo extends Mark {
 }
 
 export function geo(data, options = {}) {
-  if (options.tip && options.x === undefined && options.y === undefined) options = centroid(options);
+  if (options.tip && options.x === undefined && options.y === undefined) options = poi(options);
   else if (options.geometry === undefined) options = {...options, geometry: identity};
   return new Geo(data, options);
 }

src/transforms/centroid.d.ts

@@ -20,6 +20,21 @@ export interface CentroidOptions {
  */
 export function centroid<T>(options?: T & CentroidOptions): Initialized<T>;
 
+/**
+ * Given a **geometry** input channel of GeoJSON geometry, derives **x** and
+ * **y** output channels representing the point that gives the largest possible
+ * ellipse of horizontal to vertical ratio 2 inscribed in Polygon or
+ * MultiPolygon geometries, and the classic centroid for point and line
+ * geometries. Usually a good place to anchor a label, an interactive tip, or a
+ * representative dot for a voronoi mesh. The pois are computed in screen
+ * coordinates according to the plot’s associated **projection** (or *x* and *y*
+ * scales), if any.
+ *
+ * For classic centroids, see Plot.centroid; for centroids of spherical
+ * geometry, see Plot.geoCentroid.
+ */
+export function poi<T>(options?: T & CentroidOptions): Initialized<T>;
+
 /**
  * Given a **geometry** input channel of spherical GeoJSON geometry, derives
  * **x** and **y** output channels representing the spherical centroids of the

src/transforms/centroid.js

@@ -1,7 +1,8 @@
-import {geoCentroid as GeoCentroid} from "d3";
+import {geoCentroid as GeoCentroid, geoPath, greatest, polygonArea, polygonContains} from "d3";
 import {memoize1} from "../memoize.js";
 import {identity, valueof} from "../options.js";
 import {initializer} from "./basic.js";
+import polylabel from "polylabel";
 
 export function centroid({geometry = identity, ...options} = {}) {
   const getG = memoize1((data) => valueof(data, geometry));
@@ -25,6 +26,55 @@ export function centroid({geometry = identity, ...options} = {}) {
   );
 }
 
+export function poi({geometry = identity, ...options} = {}) {
+  const getG = memoize1((data) => valueof(data, geometry));
+  return initializer(
+    {...options, x: null, y: null, geometry: {transform: getG}},
+    (data, facets, channels, scales, dimensions, {projection}) => {
+      const G = getG(data);
+      const n = G.length;
+      const X = new Float64Array(n);
+      const Y = new Float64Array(n);
+      let polygons, holes, ring;
+      const alpha = 2;
+      const context = {
+        arc() {},
+        moveTo(x, y) {
+          ring = [[x, -alpha * y]];
+        },
+        lineTo(x, y) {
+          ring.push([x, -alpha * y]);
+        },
+        closePath() {
+          ring.push(ring[0]);
+          if (polygonArea(ring) > 0) polygons.push([ring]);
+          else holes.push(ring);
+        }
+      };
+      const path = geoPath(projection, context);
+      for (let i = 0; i < n; ++i) {
+        polygons = [];
+        holes = [];
+        path(G[i]);
+        for (const h of holes) polygons.find(([ring]) => polygonContains(ring, h[0]))?.push(h);
+        const a = greatest(
+          polygons.map((d) => polylabel(d)),
+          (d) => d.distance
+        );
+        [X[i], Y[i]] = a ? [a[0], -a[1] / alpha] : path.centroid(G[i]);
+      }
+      return {
+        data,
+        facets,
+        channels: {
+          x: {value: X, scale: projection == null ? "x" : null, source: null},
+          y: {value: Y, scale: projection == null ? "y" : null, source: null}
+        }
+      };
+    }
+  );
+}
+
 export function geoCentroid({geometry = identity, ...options} = {}) {
   const getG = memoize1((data) => valueof(data, geometry));
   const getC = memoize1((data) => valueof(getG(data), GeoCentroid));