2c:["$","title",null,{"children":"Voronoi labels | D3 | Observable"}] 31:T508,chart = { const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]) .attr("width", width) .attr("height", height) .attr("style", "max-width: 100%; height: auto;"); const cells = data.map((d, i) => [d, voronoi.cellPolygon(i)]); svg.append("g") .attr("stroke", "orange") .selectAll("path") .data(cells) .join("path") .attr("d", ([d, cell]) => `M${d3.polygonCentroid(cell)}L${d}`); svg.append("path") .attr("fill", "none") .attr("stroke", "#ccc") .attr("d", voronoi.render()); svg.append("path") .attr("d", delaunay.renderPoints(null, 2)); svg.append("g") .style("font", "10px sans-serif") .selectAll("text") .data(cells) .join("text") .each(function([[x, y], cell]) { const [cx, cy] = d3.polygonCentroid(cell); const angle = (Math.round(Math.atan2(cy - y, cx - x) / Math.PI * 2) + 4) % 4; d3.select(this).call(angle === 0 ? orient.right : angle === 3 ? orient.top : angle === 1 ? orient.bottom : orient.left); }) .attr("transform", ([d]) => `translate(${d})`) .attr("display", ([, cell]) => -d3.polygonArea(cell) > 2000 ? null : "none") .text((d, i) => i); return svg.node(); }32:[] 2f:{"id":"9b652b9f5cbafe53","slug":"voronoi-labels","title":"Voronoi labels","thumbnail":"d6818ee98477347468e29476a090328d14ee6540bc51a0594708003a1d3ac275","access_level":"public","create_time":"$D2018-05-12T01:01:57.627Z","update_time":"$D2023-08-01T14:38:24.106Z","view_time":null,"first_public_time":"$D2018-05-12T01:39:57.870Z","fork":false,"stars":69,"starred":false,"owner":{"type":"team","id":"863951e3ebe4c0ae","login":"d3","name":"D3","avatar_url":"https://avatars-next.observableusercontent.com/5af16e327a90b2873351dda8a596c0d2d3bf954f64523deefe80177c9764d0f7","tier":"pro_2024"},"version":143,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"074c414ad1d825f5","login":"mbostock","name":"Mike Bostock","avatar_url":"https://avatars-next.observableusercontent.com/7dbba99ced40bd5ab8013c99b1a11da61231bce321ba1148a9d16ad0f121550a","tier":null}],"members":[{"type":"team","id":"863951e3ebe4c0ae","login":"d3","name":"D3","avatar_url":"https://avatars-next.observableusercontent.com/5af16e327a90b2873351dda8a596c0d2d3bf954f64523deefe80177c9764d0f7","tier":"pro_2024","role":"editor"}],"comments":[{"id":"6af8002f87c47c3e","reply_to_id":null,"content":"cellPolygon will return null when the point has the same coordinates of another one. See https://observablehq.com/@john-guerra/smart-labels#SmartLabels for a workaround","create_time":"$D2023-05-09T00:18:39.462Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"be0076fec73aa550","login":"john-guerra","name":"John Alexis Guerra Gómez","avatar_url":"https://avatars-next.observableusercontent.com/21638cee44bb0ea70798da725b57111a5d3e2acebcd14524565992f7d1594aed","tier":null}},{"id":"b2ee23a01f531b37","reply_to_id":"6af8002f87c47c3e","content":"Here is a potential fix https://observablehq.com/compare/9b652b9f5cbafe53...73ccf874353c2b11","create_time":"$D2023-05-09T18:06:08.544Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"be0076fec73aa550","login":"john-guerra","name":"John Alexis Guerra Gómez","avatar_url":"https://avatars-next.observableusercontent.com/21638cee44bb0ea70798da725b57111a5d3e2acebcd14524565992f7d1594aed","tier":null}}],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":55,"collection":{"id":"5b103e0bf1b45d3f","slug":"d3-delaunay","title":"d3-delaunay","owner":{"id":"863951e3ebe4c0ae","login":"d3","name":"D3"}},"type":"notebook","body":{"title":"Voronoi labels","cells":[{"id":0,"value":"

Voronoi labels

D3 › Gallery

\n\n# Voronoi labels\n\nHere a [Voronoi diagram](/@d3/hover-voronoi) is used to label [a scatterplot](/@mbostock/d3-scatterplot): the area of each Voronoi cell determines whether the associated label is visible: larger cells tend to have room to accommodate labels. The vector between the point and the cell’s centroid (orange) determines the label orientation: top, right, bottom or left.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":6,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":91,"value":"delaunay = d3.Delaunay.from(data)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":15,"value":"voronoi = delaunay.voronoi([-1, -1, width + 1, height + 1])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":44,"value":"orient = ({\n top: text => text.attr(\"text-anchor\", \"middle\").attr(\"y\", -6),\n right: text => text.attr(\"text-anchor\", \"start\").attr(\"dy\", \"0.35em\").attr(\"x\", 6),\n bottom: text => text.attr(\"text-anchor\", \"middle\").attr(\"dy\", \"0.71em\").attr(\"y\", 6),\n left: text => text.attr(\"text-anchor\", \"end\").attr(\"dy\", \"0.35em\").attr(\"x\", -6)\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":11,"value":"data = {\n const randomX = d3.randomNormal(width / 2, 80);\n const randomY = d3.randomNormal(height / 2, 80);\n return d3.range(200)\n .map(() => ([randomX(), randomY()]))\n .filter(d => 0 <= d[0] && d[0] <= width && 0 <= d[1] && d[1] <= height);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":139,"value":"width = 928","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":133,"value":"height = 600","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":17,"value":"See also the [Observable Plot](/plot/) [version](/@fil/plot-voronoi-labels).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"}],"files":"$W32","stdlib":"1","titling":"auto"}} 30:"$2f:body" 2b:E{"digest":"NEXT_REDIRECT;replace;/@d3/voronoi-labels;307;"}