30:T4b1,voronoiCentroids = (options) => Plot.initializer( options, function ( data, facets, { x: X0, y: Y0, x2: X = X0, y2: Y = Y0 }, { x, y }, { width, height, marginLeft, marginRight, marginTop, marginBottom }, { projection } ) { const n = X.value.length; const P = new Float64Array(2 * n).fill(NaN); let i; if (projection) { const stream = projection.stream({ point(x, y) { P[2 * i] = x; P[2 * i + 1] = y; } }); for (i = 0; i < n; ++i) stream.point(X.value[i], Y.value[i]); } else { for (i = 0; i < n; ++i) P[2 * i] = x ? x(X.value[i]) : X.value[i]; for (i = 0; i < n; ++i) P[2 * i + 1] = y ? y(Y.value[i]) : Y.value[i]; } for (const I of facets) { const v = new d3.Delaunay(P).voronoi([ marginLeft, marginTop, width - marginRight, height - marginBottom ]); for (const [i, k] of I.entries()) [X.value[i], Y.value[i]] = d3.polygonCentroid(v.cellPolygon(k) ?? []); } delete X.scale; delete Y.scale; return { data, facets }; } )31:[{"id":"3ba6ffc2faf6f7ee4be0ed0566243932de17192846f8645847a5f7b580b339f9ba604a70b017eeaa8c4a5e1a4032d5a87e828a8e73512d5445226b3b83ac7a29","href":"https://static.observableusercontent.com/files/3ba6ffc2faf6f7ee4be0ed0566243932de17192846f8645847a5f7b580b339f9ba604a70b017eeaa8c4a5e1a4032d5a87e828a8e73512d5445226b3b83ac7a29","name":"airports.csv","type":"text/csv","lastModified":1670511370149.817,"size":172073}] 2e:{"title":"Plot: Voronoi labels","cells":[{"id":0,"value":"

Plot: Voronoi labels

Observable Plot › Gallery

\n\n# Voronoi labels\n\nUsing the [Voronoi diagram](https://github.com/d3/d3-delaunay) to limit label occlusion. See also [D3: Voronoi labels](https://observablehq.com/@d3/voronoi-labels), [occlusion](https://observablehq.com/@fil/occlusion), and [Plot issue #27](https://github.com/observablehq/plot/issues/27).","pinned":false,"hidden":false,"mode":"md"},{"id":198,"value":"viewof showVoronoi = Inputs.toggle({ label: \"show voronoi\", value: true })","pinned":false,"hidden":false,"mode":"ojs"},{"id":83,"value":"viewof activate = Inputs.toggle({ label: \"move to centroids\", value: true })","pinned":false,"hidden":false,"mode":"ojs"},{"id":216,"value":"viewof useProjection = Inputs.toggle({\n label: \"mercator\",\n value: false\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"Plot.plot({\n width,\n height: useProjection ? width : width * 0.7,\n inset: useProjection ? 0 : 20,\n projection: useProjection ? { type: \"mercator\" } : undefined,\n marks: [\n useProjection ? Plot.sphere() : Plot.frame(),\n showVoronoi\n ? Plot.voronoiMesh(airports, { x: \"longitude\", y: \"latitude\" })\n : null,\n Plot.arrow(\n airports,\n maybeVoronoiCentroids({\n x1: \"longitude\",\n y1: \"latitude\",\n x2: \"longitude\",\n y2: \"latitude\",\n stroke: \"black\",\n strokeWidth: 0.7,\n bend: true,\n headLength: 0\n })\n ),\n Plot.dot(airports, {\n x: \"longitude\",\n y: \"latitude\",\n r: 1.5,\n fill: \"black\"\n }),\n Plot.text(\n airports,\n maybeVoronoiCentroids({\n x: \"longitude\",\n y: \"latitude\",\n text: (d) => d.name.split(/ /)[0],\n stroke: \"white\",\n strokeWidth: 7,\n fill: \"black\"\n })\n )\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":193,"value":"The custom **voronoiCentroids** options transform (code below) modifies the ﹤x, y﹥ position channels (for the text mark)—and ﹤x2, y2﹥, for the link mark— to reflect the cendroid of the associated polygon in the Voronoi diagram created by the data. This allows to position text labels where there is more space, thus limiting occlusion. If you pass a link or arrow mark, that has ﹤x1, y1, x2, y2﹥ positions, the ﹤x1, y1﹥ channels are left intact as the starting point, with ﹤x2, y2﹥ being the end point.","pinned":false,"hidden":false,"mode":"md"},{"id":13,"value":"$30","pinned":true,"hidden":false,"mode":"ojs"},{"id":147,"value":"maybeVoronoiCentroids = activate ? voronoiCentroids : (options) => options","pinned":true,"hidden":false,"mode":"ojs"},{"id":119,"value":"---\n_data_","pinned":false,"hidden":false,"mode":"md"},{"id":5,"value":"airports = FileAttachment(\"airports.csv\")\n .csv({ typed: true })\n .then((data) => data.filter((d, i) => i % 20 === 0))","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}