30: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(); }31:[] 2e:{"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"},{"id":6,"value":"$30","pinned":true,"hidden":false,"mode":"ojs"},{"id":91,"value":"delaunay = d3.Delaunay.from(data)","pinned":true,"hidden":false,"mode":"ojs"},{"id":15,"value":"voronoi = delaunay.voronoi([-1, -1, width + 1, height + 1])","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"id":139,"value":"width = 928","pinned":true,"hidden":false,"mode":"ojs"},{"id":133,"value":"height = 600","pinned":true,"hidden":false,"mode":"ojs"},{"id":17,"value":"See also the [Observable Plot](/plot/) [version](/@fil/plot-voronoi-labels).","pinned":false,"hidden":false,"mode":"md"}],"files":"$W31","stdlib":"1","titling":"auto"}