2b:null 2c:["$","title",null,{"children":"Force Layout Cells With Links | Zacharias | Observable"}] 31:T1d80,chart = { const svg = d3.select(DOM.svg(width, height)).attr("id", "chart"); const g = svg.append("g"); const line = d3.line().curve(d3.curveBasisClosed); const forceLink = d3.forceLink(links).id((d) => d.id); d3.selectAll("div.tooltip").remove(); // clear tooltips from before const tooltip = d3 .select("body") .append("div") .attr("class", `tooltip ${classes}`) .style("position", "absolute") .style("opacity", 0) // .style("visibility", "hidden") .text("I'm a circle!"); const simulation = d3 .forceSimulation() .alpha(0.3) .force( "center", d3 .forceCenter() .x(width / 2) .y(height / 2) ) .force("charge", d3.forceManyBody()) .force( "collide", d3.forceCollide((d) => d.radius + padding) ) .nodes(nodes, (d) => d.id) .force("x", d3.forceX()) .force("y", d3.forceY()) .force("links", forceLink) .on("tick", ticked) .restart(); let showCells = true; const hullG = svg.append("g").attr("class", "hulls"); const text = g .selectAll("text") .data(nodes) .join("text") .attr("opacity", 0.0) .attr("fill", (d) => color(d.ncolor)) .attr("font-size", "12px") .text((d) => `${d.id}`); const node = svg .append("g") .attr("class", "nodes") .selectAll("circle") .data(nodes, (d) => d.$id) .enter() .append("circle") .attr("class", (d) => `cluster${d.cluster}`) .attr("r", (d) => d.radius) .attr("fill", (d) => color(+d.ncolor)) .call( d3 .drag() .on("start", dragstarted) .on("drag", dragged) .on("end", dragended) ); node.append("title").text((d) => d.id); node .style("cursor", "pointer") .on("mouseover", function (evt, d) { const connected = links.filter( (link) => link.source === d || link.target === d ); const connectedIds = connected.map((link) => link.source === d ? link.target.id : link.source.id ); tooltip .html( `${d.display_name || d.id}
Role: ${d.primary_roles || "N/A"}
Parent: ${d.cluster || "N/A"}` ) .style("opacity", 1) .style("left", `${evt.pageX + 10}px`) .style("top", `${evt.pageY - 10}px`); node.style("opacity", (n) => n.id === d.id || connectedIds.includes(n.id) ? 1 : 0.1 ); link.style("opacity", (l) => (connected.includes(l) ? 1 : 0.1)); text.style("opacity", (t) => (connectedIds.includes(t.id) ? 1 : 0)); hulls.style("opacity", (h) => h.nodes.data().some((n) => connectedIds.includes(n.id)) ? 0.2 : 0.05 ); }) .on("mousemove", (evt) => { tooltip .style("left", `${evt.pageX + 10}px`) .style("top", `${evt.pageY - 10}px`); }) .on("mouseout", () => { tooltip.style("opacity", 0); node.style("opacity", 1); link.style("opacity", 1); text.style("opacity", 0); hulls.style("opacity", 0.2); }) .on("click", (evt, d) => { const clusterId = d.cluster; tooltip .html( `${d.display_name || d.id}
Cluster Focused: ${clusterId}` ) .style("opacity", 1) .style("left", `${evt.pageX + 10}px`) .style("top", `${evt.pageY - 10}px`); node .transition() .style("opacity", (n) => (n.cluster === clusterId ? 1 : 0.1)); link .transition() .style("opacity", (l) => l.source.cluster === clusterId && l.target.cluster === clusterId ? 1 : 0.1 ); text .transition() .style("opacity", (t) => (t.cluster === clusterId ? 1 : 0)); hulls .transition() .style("opacity", (h) => (h.cluster === clusterId ? 0.3 : 0.05)); }); const hulls = hullG .selectAll("path") .data( Object.keys(clusters) .map((c) => { return { cluster: c, nodes: node.filter((d) => d.cluster == c) }; }) .filter((d) => d.cluster != 0), (d) => d.cluster ) .enter() .append("path") .attr("d", (d) => line(d3.polygonHull(hullPoints(d.nodes)))) .attr("fill", (d) => color(+d.cluster)) .attr("opacity", 0.2); const linkSource = ({ source }) => source, // given d in links, returns a node identifier string linkTarget = ({ target }) => target, // given d in links, returns a node identifier string linkStroke = "#8f3c59", // link stroke color linkStrokeOpacity = 0.6, // link stroke opacity linkStrokeWidth = 1.5, // given d in links, returns a stroke width in pixels linkStrokeLinecap = "round", // link stroke linecap colors = h10; // an array of color strings, for the node groups //width = 640, // outer width, in pixels //height = 400, // outer height, in pixels //invalidation // when this promise resolves, stop the simulation const link = svg .append("g") .attr("stroke", typeof linkStroke !== "function" ? linkStroke : null) .attr("stroke-opacity", linkStrokeOpacity) .attr( "stroke-width", typeof linkStrokeWidth !== "function" ? linkStrokeWidth : null ) .attr("stroke-linecap", linkStrokeLinecap) .selectAll("line") .data(links) .join("line"); function ticked() { link .attr("x1", (d) => d.source.x) .attr("y1", (d) => d.source.y) .attr("x2", (d) => d.target.x) .attr("y2", (d) => d.target.y); node .each(cluster(0.2)) .each(collide(0.2)) .attr( "cx", (d) => (d.x = Math.max(d.radius, Math.min(width - d.radius, d.x))) ) .attr( "cy", (d) => (d.y = Math.max(d.radius, Math.min(height - d.radius, d.y))) ); text.attr("x", (d) => d.x).attr("y", (d) => d.y); hulls.attr("d", (d) => line(d3.polygonHull(hullPoints(d.nodes)))); } nodes.forEach((d) => { if (d.primary && d.primary.includes("Distributor")) { d.engtype = "Distributor"; } else if (d.primary && d.primary.includes("Retailer")) { d.engtype = "Retailer"; } else { d.engtype = "Other"; } }); d3.select("#updateButton").on("click", () => { showCells = !showCells; const useNodes = showCells ? nodes : nodes.map((d) => ({ ...d, radius: 3, cluster: 0 })); simulation .force( "collide", d3.forceCollide((d) => d.radius + padding) ) .nodes(useNodes); const forceXDist = d3 .forceX() .x((d) => d.cluster_type === "Distributor" ? width * 0.2 : d.cluster_type === "Retailer" ? width * 0.8 : width / 2 ); simulation.force("x", forceXDist); simulation.alpha(0.1).restart(); node .data(useNodes, (d) => d.id) .transition() .duration(1000) .attr("class", (d) => `cluster${d.cluster}`) .attr("r", (d) => d.radius) .attr("fill", (d) => color(d.ncolor)); hulls .transition() .duration(1000) .attr("opacity", showCells ? 0.3 : 0); }); function dragstarted(event, d) { if (!event.active) simulation.alphaTarget(0.1).restart(); d.fx = d.x; d.fy = d.y; } function dragged(event, d) { d.fx = event.x; d.fy = event.y; } function dragended(event, d) { if (!event.active) simulation.alphaTarget(0); d.fx = null; d.fy = null; } return svg.node(); }32:T55a,createNode = { const forceLink = d3.forceLink(links).id((d) => d.id); const svg = d3.select(DOM.svg(width, height)).attr("id", "chart"); const g = svg.append("g"); function dragstarted(event, d) { if (!event.active) simulation.alphaTarget(0.1).restart(); d.fx = d.x; d.fy = d.y; } function dragged(event, d) { d.fx = event.x; d.fy = event.y; } function dragended(event, d) { if (!event.active) simulation.alphaTarget(0); d.fx = null; d.fy = null; } const simulation = d3 .forceSimulation() .alpha(0.3) .force( "center", d3 .forceCenter() .x(width / 2) .y(height / 2) ) .force("charge", d3.forceManyBody()) .force( "collide", d3.forceCollide((d) => d.radius + padding) ) .nodes(nodes, (d) => d.id) .force("x", d3.forceX()) .force("y", d3.forceY()) .force("links", forceLink) .on("tick", ticked) .restart(); return svg .append("g") .attr("class", "nodes") .selectAll("circle") .data(nodes, (d) => d.$id) .enter() .append("circle") .attr("class", (d) => `cluster${d.cluster}`) .attr("r", (d) => d.radius) .attr("fill", (d) => color(+d.ncolor)) .call( d3 .drag() .on("start", dragstarted) .on("drag", dragged) .on("end", dragended) ); }33:T82c,nodeEventHandling = { const node = svg .append("g") .attr("class", "nodes") .selectAll("circle") .data(nodes, (d) => d.$id) .enter() .append("circle") .attr("class", (d) => `cluster${d.cluster}`) .attr("r", (d) => d.radius) .attr("fill", (d) => color(+d.ncolor)) .call( d3 .drag() .on("start", dragstarted) .on("drag", dragged) .on("end", dragended) ); node.append("title").text((d) => d.id); node .style("cursor", "pointer") .on("mouseover", function (evt, d) { const connected = links.filter( (link) => link.source === d || link.target === d ); const connectedIds = connected.map((link) => link.source === d ? link.target.id : link.source.id ); tooltip .html( `${d.display_name || d.id}
Role: ${d.primary_roles || "N/A"}
Parent: ${d.cluster || "N/A"}` ) .style("opacity", 1) .style("left", `${evt.pageX + 10}px`) .style("top", `${evt.pageY - 10}px`); node.style("opacity", (n) => n.id === d.id || connectedIds.includes(n.id) ? 1 : 0.1 ); link.style("opacity", (l) => (connected.includes(l) ? 1 : 0.1)); text.style("opacity", (t) => (connectedIds.includes(t.id) ? 1 : 0)); hulls.style("opacity", (h) => h.nodes.data().some((n) => connectedIds.includes(n.id)) ? 0.2 : 0.05 ); }) .on("mousemove", (evt) => { tooltip .style("left", `${evt.pageX + 10}px`) .style("top", `${evt.pageY - 10}px`); }) .on("mouseout", () => { tooltip.style("opacity", 0); node.style("opacity", 1); link.style("opacity", 1); text.style("opacity", 0); hulls.style("opacity", 0.2); }) .on("click", (evt, d) => { const clusterId = d.cluster; return node.style("cursor", "pointer") .on("mouseover", handleMouseOver) .on("mousemove", handleMouseMove) .on("mouseout", handleMouseOut) .on("click", handleClick) } } 34:[{"id":"de7ce20ceb82b561c237c67da5ab2207d971a80e923a9acb96eee9619fb4696c1609cd2add73798c14bd9054051ee7bea9b0471c82334fe03c4dd4a8f06b7088","href":"https://static.observableusercontent.com/files/de7ce20ceb82b561c237c67da5ab2207d971a80e923a9acb96eee9619fb4696c1609cd2add73798c14bd9054051ee7bea9b0471c82334fe03c4dd4a8f06b7088","name":"REAL DATA ETC - Copy of Metadata 3 (1)@1.csv","type":"text/csv","lastModified":1746830483069.231,"size":21375},{"id":"be89b301afff4094ee7144ceb575cb75e2516fd8ccad0b41a360670479cb87af77808ea24bccde1343194da0fa070cb711143722e3421d3c29dc3ad5c3ed24ea","href":"https://static.observableusercontent.com/files/be89b301afff4094ee7144ceb575cb75e2516fd8ccad0b41a360670479cb87af77808ea24bccde1343194da0fa070cb711143722e3421d3c29dc3ad5c3ed24ea","name":"linksonly.json","type":"application/json","lastModified":1746802412795.274,"size":85689},{"id":"0565bf7a61c6491baa1f8e6d8d13af3234988689b5e662629e8266127e4df7f65705bf79c2163b352f5159d50a3ea7398d0857ffd29de7dfae2b046ad1e866ec","href":"https://static.observableusercontent.com/files/0565bf7a61c6491baa1f8e6d8d13af3234988689b5e662629e8266127e4df7f65705bf79c2163b352f5159d50a3ea7398d0857ffd29de7dfae2b046ad1e866ec","name":"REAL DATA ETC - links no subsidiary (3).csv","type":"text/csv","lastModified":1746806124226.94,"size":28727}] 2f:{"id":"f14f20e96a9d1403","slug":null,"title":"Force Layout Cells With Links","thumbnail":"5813ba2d15504aa561dca2abc08f7709a03bae32c8a860fc05bbeb65a8d3e00c","access_level":"public","create_time":"$D2025-05-09T14:39:26.171Z","update_time":"$D2025-05-17T18:49:14.067Z","view_time":null,"first_public_time":"$D2025-05-17T18:02:38.944Z","has_unpublished_edits":null,"fork":{"id":"6da9ff3240a000cd","slug":null,"title":"Force Layout Cells With Links","owner":{"id":"8d0fccfb8528147b","login":"deadbead","name":"Дмитрий Бойков"}},"stars":0,"starred":false,"owner":{"type":"team","id":"c5651d9af30856e4","login":"zacharias","name":"Zacharias ","avatar_url":"https://avatars-next.observableusercontent.com/8a96284e0a79ed5e79946424a68026aaf17b839a14afce579d1c39e8b157666c","tier":"starter_2024"},"version":552,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"b63681e2437cf747","login":"harper-rubin","name":"Harper Rubin","avatar_url":"https://avatars-next.observableusercontent.com/d7f68946cb7015181fb846f74f185e814f785059f4c9c27a9b37e7538d1216e7","tier":null}],"members":[{"type":"individual","id":"b63681e2437cf747","login":"harper-rubin","name":"Harper Rubin","avatar_url":"https://avatars-next.observableusercontent.com/d7f68946cb7015181fb846f74f185e814f785059f4c9c27a9b37e7538d1216e7","tier":null,"role":"editor"},{"type":"team","id":"c5651d9af30856e4","login":"zacharias","name":"Zacharias ","avatar_url":"https://avatars-next.observableusercontent.com/8a96284e0a79ed5e79946424a68026aaf17b839a14afce579d1c39e8b157666c","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Force Layout Cells With Links","cells":[{"id":0,"value":"md`# Force Layout Cells With Links`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":100,"value":"viewof updateButton = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":285,"value":"- [x] Link\n- [ ] Claster hierarchy\n- [ ] Node hierarchy\n- [ ] Drag'n'drop set cluster","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":4,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":349,"value":"links2 = await FileAttachment(\"REAL DATA ETC - links no subsidiary (3).csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"links2","database":"$undefined"},{"id":54,"value":"collide = function(alpha) {\n // https://bl.ocks.org/mbostock/7882658\n const quadtree = d3.quadtree()\n .x(function (d) { return d.x; })\n .y(function (d) { return d.y; })\n .extent([[0, 0], [width, height]])\n .addAll(nodes);\n return function (d) {\n let r = d.radius + (maxRadius * 8) + Math.max(padding, clusterPadding),\n nx1 = d.x - r,\n nx2 = d.x + r,\n ny1 = d.y - r,\n ny2 = d.y + r;\n quadtree.visit(function (quad, x1, y1, x2, y2) {\n let data = quad.data;\n if (data && data !== d) {\n let x = d.x - data.x,\n y = d.y - data.y,\n l = Math.sqrt(x * x + y * y),\n r = d.radius + data.radius + (d.cluster == data.cluster ? padding : clusterPadding);\n if (l < r) {\n l = (l - r) / l * alpha;\n d.x -= x *= l;\n d.y -= y *= l;\n data.x += x;\n data.y += y;\n }\n }\n return x1 > nx2 || x2 < nx1 || y1 > ny2 || y2 < ny1;\n });\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":52,"value":"cluster = function(alpha) {\n // https://bl.ocks.org/mbostock/7881887\n return function (d) {\n const cluster = clusters[d.cluster];\n if (cluster === d || d.cluster == 0) return;\n let x = d.x - cluster.x,\n y = d.y - cluster.y,\n l = Math.sqrt(x * x + y * y),\n r = d.radius + cluster.radius + 3;\n if (l != r) {\n l = (l - r) / l * alpha;\n d.x -= x *= l;\n d.y -= y *= l;\n cluster.x += x;\n cluster.y += y;\n }\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":263,"value":"pack = data => d3.pack()\n .size([width, height])\n .padding(3)\n (d3.hierarchy(data)\n .sum(d => d.value)\n .sort((a, b) => b.value - a.value))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":49,"value":"hullPoints = function (data) {\n let pointArr = [];\n const padding = 7;\n data.each((d) => {\n const pad = d.radius + padding;\n pointArr = pointArr.concat([\n [d.x - pad, d.y - pad],\n [d.x - pad, d.y + pad],\n [d.x + pad, d.y - pad],\n [d.x + pad, d.y + pad]\n ]);\n });\n return pointArr;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"clusters = {\n const clusterMap = {};\n nodes.forEach(n => {\n if (!clusterMap[n.cluster] || (n.radius > clusterMap[n.cluster].radius)) clusterMap[n.cluster] = n;\n });\n return clusterMap;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"nodes = realDataEtcCopyOfMetadata3","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":204,"value":"links = linksonly","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":311,"value":"linksonly = await FileAttachment(\"linksonly.json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":47,"value":"padding = 15","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":45,"value":"clusterPadding = 40","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"maxRadius = 12","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"width = 1200","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"height = 1000","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":35,"value":"color = d3.scaleOrdinal(h10)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"radius = d3.scaleLinear().domain([0, 10]).range([3, maxRadius])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"d3 = require(\"d3@v7\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":215,"value":"import {ForceGraph} from \"@d3/force-directed-graph\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":306,"value":"realDataEtcCopyOfMetadata3 = await FileAttachment(\"REAL DATA ETC - Copy of Metadata 3 (1)@1.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"realDataEtcCopyOfMetadata3","database":"$undefined"},{"id":318,"value":"data = {\n return { nodes: nodes, links: links2 };\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":373,"value":"classes = \"blur\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":375,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":394,"value":"drag = (simulation) => {\n function dragstarted(event, d) {\n if (!event.active) simulation.alphaTarget(0.3).restart();\n d.fx = d.x;\n d.fy = d.y;\n }\n\n function dragged(event, d) {\n d.fx = event.x;\n d.fy = event.y;\n }\n\n function dragended(event, d) {\n if (!event.active) simulation.alphaTarget(0);\n d.fx = null;\n d.fy = null;\n }\n\n return d3\n .drag()\n .on(\"start\", dragstarted)\n .on(\"drag\", dragged)\n .on(\"end\", dragended);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":457,"value":"import { h10 } from \"04d708900ab1e38b\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":514,"value":"createTooltip = {\n return d3.select(\"body\")\n .append(\"div\")\n .attr(\"class\", `tooltip ${classes}`)\n .style(\"position\", \"absolute\")\n .style(\"opacity\", 0)\n .text(\"I'm a circle!\");\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":537,"value":"ticked = {\n const circles = d3.selectAll(\"circle\");\n circles.attr(\"cx\", (d) => d.x).attr(\"cy\", (d) => d.y);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":519,"value":"createSimulation = {\n const forceLink = d3.forceLink(links).id((d) => d.id);\n\n return d3\n .forceSimulation()\n .alpha(0.3)\n .force(\n \"center\",\n d3\n .forceCenter()\n .x(width / 2)\n .y(height / 2)\n )\n .force(\"charge\", d3.forceManyBody())\n .force(\n \"collide\",\n d3.forceCollide((d) => d.radius + padding)\n )\n .nodes(nodes, (d) => d.id)\n .force(\"x\", d3.forceX())\n .force(\"y\", d3.forceY())\n .force(\"links\", forceLink)\n .on(\"tick\", ticked)\n .restart();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":522,"value":"createText = {\n const svg = d3.select(DOM.svg(width, height)).attr(\"id\", \"chart\");\n const g = svg.append(\"g\");\n return g\n .selectAll(\"text\")\n .data(nodes)\n .join(\"text\")\n .attr(\"opacity\", 0.0)\n .attr(\"fill\", (d) => color(d.ncolor))\n .attr(\"font-size\", \"12px\")\n .text((d) => `${d.id}`);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":525,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":529,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":534,"value":"createHulls = {\n return hullG\n .selectAll(\"path\")\n .data(\n Object.keys(clusters)\n .map((c) => {\n return {\n cluster: c,\n nodes: node.filter((d) => d.cluster == c)\n };\n })\n .filter((d) => d.cluster != 0),\n (d) => d.cluster\n )\n .enter()\n .append(\"path\")\n .attr(\"d\", (d) => line(d3.polygonHull(hullPoints(d.nodes))))\n .attr(\"fill\", (d) => color(+d.cluster))\n .attr(\"opacity\", 0.2);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 30:"$2f:body"