2b:null 2c:["$","title",null,{"children":"Occlusion | celeste knapp's Workspace | Observable"}] 31:T57c,svg = { const width = 928; const height = 400; const svg = d3 .create("svg") .attr("height", height) .attr("viewBox", [0, 0, width, height]) .attr("style", "max-width: 100%; height: auto; font: 14.5px sans-serif;"); // Important! Make sure the SVG is attached to the DOM before calling occlusion(), // so that the bounding boxes can be measured. yield svg.node(); const n = 1000; svg .selectAll("text") .data(rwg(n)) .join("text") .text((d) => d) .attr("x", () => (width * Math.random()) | 0) .attr("y", () => (height * Math.random()) | 0); // Raise on mouseover, set data-priority on click. let priority = 0; svg .selectAll("text") .on("mouseover", function () { d3.select(this).attr("fill", "red").raise(); svg.call(occlusion); }) .on("mouseout", function () { d3.select(this).attr("fill", null); svg.call(occlusion); }) .on("click", function () { const node = d3.select(this); const cur = +node.attr("data-priority"); node .attr("data-priority", cur ? null : ++priority) .style("fill", cur ? null : "steelblue"); svg.call(occlusion); }); // Introduce random changes. do { const i = (Math.random() * n) | 0; svg.select(`text:nth-of-type(${i})`).raise(); svg.call(occlusion); await Promises.delay(300); } while (true); }32:[] 2f:{"id":"6cffd0055029b19e","slug":null,"title":"Occlusion","thumbnail":"0e62a8032c9d195ffe590444693b451b5d69c3412d32f8f0b63f7e272baf812e","access_level":"public","create_time":"$D2023-12-16T05:38:31.105Z","update_time":"$D2023-12-16T05:38:31.105Z","view_time":null,"first_public_time":"$D2023-12-16T05:38:31.105Z","fork":{"id":"56a170de7e71a28e","slug":"occlusion","title":"Occlusion","owner":{"id":"863951e3ebe4c0ae","login":"d3","name":"D3"}},"stars":0,"starred":false,"owner":{"type":"team","id":"337d21ce263b597f","login":"celeste-knapp-ws","name":"celeste knapp's Workspace","avatar_url":"https://avatars-next.observableusercontent.com/be73c50229778aa1b537e3466078fb815d793bc2d1fc72ab5e7d51090769147a","tier":"starter_2024"},"version":291,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"44ea150b16d49c26","login":"celeste-knapp","name":"celeste knapp","avatar_url":"https://avatars-next.observableusercontent.com/a4bd4c3698834429f36539eb27247c33bef5964f981e3ab384c7177bdb2a2bf8","tier":null}],"members":[{"type":"individual","id":"44ea150b16d49c26","login":"celeste-knapp","name":"celeste knapp","avatar_url":"https://avatars-next.observableusercontent.com/a4bd4c3698834429f36539eb27247c33bef5964f981e3ab384c7177bdb2a2bf8","tier":null,"role":"editor"},{"type":"team","id":"337d21ce263b597f","login":"celeste-knapp-ws","name":"celeste knapp's Workspace","avatar_url":"https://avatars-next.observableusercontent.com/be73c50229778aa1b537e3466078fb815d793bc2d1fc72ab5e7d51090769147a","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Occlusion","cells":[{"id":0,"value":"

Occlusion

D3 › Gallery

\n\n# Occlusion\n\nHides the text nodes that are covered by another node. Add a data-priority attribute to sort by priority. (If you have very many labels, Benjamin Schmidt’s [version](https://observablehq.com/@bmschmidt/finding-text-occlusion-with-quadtrees) explores efficient optimization strategies with quadtrees or RBush.)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":119,"value":"Usage:\n~~~{js}\nimport {occlusion} from \"@fil/occlusion\"\nsvg.call(occlusion)\n~~~\n\nStyle with CSS:\n~~~~{css}\n.occluded { display:none }\n~~~~\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":58,"value":"html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"function occlusion(svg, against = \"text\") {\n const nodes = d3\n .sort(svg.selectAll(against), (node) => +node.getAttribute(\"data-priority\"))\n .reverse()\n .map((node) => {\n const { x, y, width, height } = node.getBoundingClientRect();\n return { node, x, y, width, height };\n });\n\n const visible = [];\n for (const d of nodes) {\n const occluded = visible.some((e) => intersectRect(d, e));\n d3.select(d.node).classed(\"occluded\", occluded);\n if (!occluded) visible.push(d);\n }\n return visible;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":76,"value":"// This intersection function works for rect and text, but not so much for circles.\nfunction intersectRect(a, b) {\n return !(\n a.x + a.width < b.x ||\n b.x + b.width < a.x ||\n a.y + a.height < b.y ||\n b.y + b.height < a.y\n );\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"// https://www.npmjs.com/package/random-words\nrwg = require(\"random-words@1.1.0\").catch(() => window.words)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W32","stdlib":"1","titling":"auto"}} 30:"$2f:body"