2d:null 2e:["$","title",null,{"children":"Plot: Voronoi labels | Fil | Observable"}] 33: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 }; } )34:[{"id":"3ba6ffc2faf6f7ee4be0ed0566243932de17192846f8645847a5f7b580b339f9ba604a70b017eeaa8c4a5e1a4032d5a87e828a8e73512d5445226b3b83ac7a29","href":"https://static.observableusercontent.com/files/3ba6ffc2faf6f7ee4be0ed0566243932de17192846f8645847a5f7b580b339f9ba604a70b017eeaa8c4a5e1a4032d5a87e828a8e73512d5445226b3b83ac7a29","name":"airports.csv","type":"text/csv","lastModified":1670511370149.817,"size":172073}] 31:{"id":"e2b859b59f7bc3e6","slug":"plot-voronoi-labels","title":"Plot: Voronoi labels","thumbnail":"00e4202fa6df3512306c24d1cd7e830ece63f92c10c2fa66996210779e501474","access_level":"public","create_time":"$D2022-12-08T14:56:10.149Z","update_time":"$D2025-04-22T06:38:25.673Z","view_time":null,"first_public_time":"$D2022-12-08T15:16:53.715Z","has_unpublished_edits":null,"fork":true,"stars":38,"starred":false,"owner":{"type":"team","id":"da2a32154638c457","login":"fil","name":"Fil","avatar_url":"https://avatars-next.observableusercontent.com/d5b1777907117a2bdf2a07eb98600d7a9beb21639fde42b9753e95c88c7731a6","tier":"starter_2024"},"version":228,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"45a379fcfcb14253","login":"fil","name":"Fil","avatar_url":"https://avatars-next.observableusercontent.com/d5b1777907117a2bdf2a07eb98600d7a9beb21639fde42b9753e95c88c7731a6","tier":null}],"members":[{"type":"individual","id":"45a379fcfcb14253","login":"fil","name":"Fil","avatar_url":"https://avatars-next.observableusercontent.com/d5b1777907117a2bdf2a07eb98600d7a9beb21639fde42b9753e95c88c7731a6","tier":null,"role":"editor"}],"comments":[{"id":"38d9831bded4e111","reply_to_id":null,"content":"I´m trying to use this awesome plugin with a Plot.geo context, but it won´t work as the lat long it´s not projected properly. The \"TypeError: x is not a function\" when tries to build the delanuay breaks everything. Any clues?\n\nhttps://observablehq.com/@rusosnith/conociendo-nuestra-fauna","create_time":"$D2025-04-22T02:24:27.336Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"6af64127e9c2630a","login":"rusosnith","name":"Andres Snitcofsky","avatar_url":"https://avatars-next.observableusercontent.com/2b262ea0f2ac88cc8e7b343d227833840f0f3f16653078effbfb00582801e631","tier":null}},{"id":"dac4140b846e7081","reply_to_id":"38d9831bded4e111","content":"I've updated the code above to work with projections, too.","create_time":"$D2025-04-22T06:33:48.273Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"45a379fcfcb14253","login":"fil","name":"Fil","avatar_url":"https://avatars-next.observableusercontent.com/d5b1777907117a2bdf2a07eb98600d7a9beb21639fde42b9753e95c88c7731a6","tier":null}}],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":8,"collection":{"id":"345b01c448a705cd","slug":"label","title":"Label","owner":{"id":"da2a32154638c457","login":"fil","name":"Fil"}},"type":"notebook","body":{"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","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":198,"value":"viewof showVoronoi = Inputs.toggle({ label: \"show voronoi\", value: true })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":83,"value":"viewof activate = Inputs.toggle({ label: \"move to centroids\", value: true })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":216,"value":"viewof useProjection = Inputs.toggle({\n label: \"mercator\",\n value: false\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":13,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":147,"value":"maybeVoronoiCentroids = activate ? voronoiCentroids : (options) => options","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":119,"value":"---\n_data_","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 32:"$31:body"