25:["$","title",null,{"children":"Force Hulls | Lana Do's Workspace | Observable"}] 49:T188b,function ForceHulls( graph, // { nodes, links, clusters /* Map of Arrays for hulls */ } options = {} ) { let o = { groupBy: (d) => d.group, nodeSize: 50, height: 1000, width: 800, hullPadding: 5, showGroupingNodes: true, hullColor: d3.scaleOrdinal(d3.schemeCategory10), fontSize: 6, clipLabels: true, minDegree: 0, useImages: true, sizeBy: (d) => d.degree, id: (d) => d.id, labelBy: (d, i) => d.id, lineWidth: 1.3, title: "", invalidation: null, this: null, chargeStrength: null, // If provided sets the fixed charge strength for all nodes maxCharge: -200, // If chargeStrength is null, this value will be use to assign the charge strength proportionally to the radius and with this maxCharge strength value photoBy: (d) => d.photo, photoMargin: 2, centerStrength: 0.1, linkStrength: 0.15, linkDistance: 5, disjoint: false, tipcontent: null, // Provide a function that returns html for the tooltip warmUpTicks: 100, drawHulls: true, transitionDuration: 500, animate: false, ...options }; let visibleNodes = new Map(graph.nodes.map((d) => [o.id(d), d])); let clusters = []; if (o.drawHulls) { //if (graph.clusters) { //clusters = graph.clusters; //} else { clusters = d3.group(graph.nodes, (d) => ("" + o.groupBy(d)).trim()); //} } const filteredClusters = filterClustersFromNodes({ clusters, visibleNodes, id: o.id }); const filteredLinks = filterLinksFromNodes({ links: graph.links, visibleNodes, id: o.id }); console.log( "filtered Links", filteredLinks); const chargeScale = d3 .scalePow() .exponent(1.5) .domain([1, 30]) .range([-0.1, o.maxCharge]); o.chargeStrength = o.chargeStrength || ((d) => chargeScale(d.r)); const svg = o.this ? d3.select(o.this).select("svg") : d3.create("svg"); svg.append("defs").append("style").text(` circle.highlight { stroke: red; stroke-width: 2px; } `); const target = htl.html`

${o.title}

${svg.node()}

`; svg .attr("width", o.width) .attr("height", o.height) .attr("viewBox", [0, 0, o.width, o.height]) .attr( "style", // "max-width: 100%; height: auto; height: intrinsic; overflow: visible", //"overflow: visible" ); const r = d3 .scalePow() .domain([0, d3.max(graph.nodes, o.sizeBy)]) .range([o.nodeSize / 2, o.nodeSize * 2]); graph.nodes.map((d) => (d.r = o.sizeBy(d) ? r(o.sizeBy(d)) : r.range()[0])); const collision = d3.forceCollide((d) => d.r + 2).iterations(4); const simulation = d3 .forceSimulation(graph.nodes) .force( "link", d3 .forceLink(filteredLinks) .id((n) => o.id(n)) .distance(o.linkDistance) .strength(o.linkStrength) ) .force("charge", d3.forceManyBody().strength(o.chargeStrength)); // Accelerate the simulation the first time if (!o.this) { simulation.alpha(3); } else { simulation.alpha(1); } if (o.disjoint) { simulation .force("x", d3.forceX(o.width / 2).strength(o.centerStrength)) .force( "y", d3 .forceY(o.height / 2) .strength((o.centerStrength * 0.7 * width) / o.height) ); } else { simulation.force("center", d3.forceCenter(width / 2, o.height / 2)); } // -------- HULLS --------- const { hull, getHull } = drawHull({ o, svg, graph, filteredClusters }); // -------- LINKS --------- const link = drawLinks({ graph, o, svg, filteredLinks }); // -------- NODES --------- const node = drawNodes({ svg, graph, simulation, o, filteredClusters }); // -------- LABELS --------- const label = createLabels({ svg, _data: graph.nodes.filter( (d) => // d.type !== "Connection" ? d.degree >= o.minDegree : 0 d.type !== "Connection" ), className: "nodeLabel", o }); // ---------- IMAGES --------------- const images = drawImages({ svg, graph, simulation, o }); // --------- Group Labels ------------ const labelDepts = createLabels({ svg, _data: graph.nodes.filter((d) => d.type === "Connection"), className: "connectionLabel", o }); // --------- Tooltips --------------- const hoverOptions = { raise: false, r: r.range()[1], svg }; if (o.tipcontent) hoverOptions.tipcontent = o.tipcontent; const hoverObj = hover(node, invalidation, hoverOptions); function ticked() { link // .transition() // .duration(o.transitionDuration) // .attr("display", simulation.alpha() <= 0.1 ? "block" : "none") .attr("x1", (d) => d.source.x) .attr("y1", (d) => d.source.y) .attr("x2", (d) => d.target.x) .attr("y2", (d) => d.target.y); label .classed("shadow", simulation.alpha() <= 0.1) // .transition() // .duration(o.transitionDuration) .attr("transform", (d) => `translate(${d.x}, ${d.y})`); labelDepts .classed("shadow", simulation.alpha() <= 0.1) // .transition() // .duration(o.transitionDuration) .attr("transform", (d) => `translate(${d.x}, ${d.y})`); node .classed("shadow", simulation.alpha() <= 0.1) // .transition(t) // .duration(o.transitionDuration) .attr("transform", (d) => `translate(${d.x}, ${d.y})`); // .attr("cx", (d) => d.x) // .attr("cy", (d) => d.y) o.useImages && images // .transition() // .duration(o.transitionDuration) // .attr("transform", (d) => `translate(${d.x}, ${d.y})`) .attr("x", (d) => d.x) .attr("y", (d) => d.y); hull.attr("d", getHull); // Update the binary tree for the tooltip; hoverObj.reset(); // collide only at the end of the simulation simulation.force("collide", simulation.alpha() <= 0.5 ? collision : null); } simulation.stop(); simulation.on("tick", ticked); for (let i = 0; i < o.warmUpTicks; i++) { simulation.tick(); } simulation.restart(); // For when no invalidation is passed const _invalidation = o.invalidation || invalidation; _invalidation.then(() => { simulation.stop(); }); ticked(); target.clusters = filteredClusters; return target; }4a:T752,function createLabels({ svg, _data, className = "nodeLabel", o }) { const gLabel = svg .selectAll(`g#gLabel_${className}`) .data([0]) .join("g") .attr("id", `gLabel_${className}`); const getNameArray = (d, i, all) => { const label = d.type === "Connection" ? d._id : o.labelBy(d, i, all); return d.nameArray ? d.nameArray : label && typeof label.split === "function" ? label.split(" ") : [label]; }; // 1.8 for each line, but then move back for centering on y const fontSizeFn = (d) => o.fontSize * (d.type !== "Connection" ? 1 : 1.8); return ( gLabel .selectAll(`text.${className}`) .data(_data, o.id) .join(...fadeInJoin({ element: "text", o })) .attr("class", className) // .attr("text-align", "center") .attr("text-anchor", "middle") // // .attr("x", (d) => d.r) .attr( "y", (d, i, all) => -(getNameArray(d, i, all).length / 2) * fontSizeFn(d) + "px" ) .attr("font-size", (d) => `${fontSizeFn(d)}pt`) .attr("font-weight", (d) => d.type !== "Connection" ? "light" : "bolder" ) .attr("font-family", "Oswald") .attr("pointer-events", "none") // .style("clip-path", (d) => // o.clipLabels && d.type !== "Connection" ? `circle(closest-side)` : "" // ) .style("clip-path", (d) => o.clipLabels && d.type !== "Connection" ? `circle(${d.r - o.photoMargin}px at 50% 50%)` : "" ) // .text(id); .each(function (d) { return ( d3 .select(this) .selectAll("tspan") .data(getNameArray) .join("tspan") .attr("x", 0) .attr("dy", fontSizeFn(d) + "px") // .attr("dy", "2.1ch") .text((n) => n) ); }) ); }4b:[{"id":"5c42a3b21cfcafb1db3a01c916bb5fda0efb1ab16952d04216db9dea1c27f98e80a380f66ebf5e6cf465c1e26ac2368b96d4c1505ab1d7409c5ee5a5a93741b0","href":"https://static.observableusercontent.com/files/5c42a3b21cfcafb1db3a01c916bb5fda0efb1ab16952d04216db9dea1c27f98e80a380f66ebf5e6cf465c1e26ac2368b96d4c1505ab1d7409c5ee5a5a93741b0","name":"miserables.json","type":"application/json","lastModified":1710524115652.104,"size":18844}] 29:{"id":"4ea6ee00c7db1ad2","slug":null,"title":"Force Hulls","thumbnail":"76befdc506c28089a45398050406fe68e16850f57247a35990e58b25de28a5e8","access_level":"public","create_time":"$D2024-03-15T17:35:15.652Z","update_time":"$D2024-03-15T18:50:12.797Z","view_time":null,"first_public_time":"$D2024-03-15T18:48:51.033Z","has_unpublished_edits":null,"fork":{"id":"74628aadd749e99d","slug":"force-hulls","title":"Force Hulls","owner":{"id":"cd3c1e49fc84d010","login":"john-guerra","name":"John Alexis Guerra Gómez"}},"stars":1,"starred":false,"owner":{"type":"team","id":"4e7c11e19b2ac953","login":"lana-do-ws","name":"Lana Do's Workspace","avatar_url":"https://avatars-next.observableusercontent.com/9ed17a7761f06beca5349dc4d1aec814ebefb6c14a60f9ab748e41f2da3901a0","tier":"starter_2024","bio":"","following":false},"version":497,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"3766413752fb02de","login":"lana-do","name":"Lana Do","avatar_url":"https://avatars-next.observableusercontent.com/92bbaac3d5d9ff2b58a4255775ea4d6197fec6c7b399786750d57e98e4316cb7","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"3766413752fb02de","login":"lana-do","name":"Lana Do","avatar_url":"https://avatars-next.observableusercontent.com/92bbaac3d5d9ff2b58a4255775ea4d6197fec6c7b399786750d57e98e4316cb7","tier":null,"role":"editor"},{"type":"team","id":"4e7c11e19b2ac953","login":"lana-do-ws","name":"Lana Do's Workspace","avatar_url":"https://avatars-next.observableusercontent.com/9ed17a7761f06beca5349dc4d1aec814ebefb6c14a60f9ab748e41f2da3901a0","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Force Hulls","cells":[{"id":0,"value":"# Force Hulls\n\nForce directed network that draws hulls around the nodes by a grouping property. Also can display labels inside the nodes and even show photos\n\nCredits to [@fil](/@fil) for his [hull-padding demo](https://observablehq.com/@fil/hull-padding).\n\n## Usage\n\n```js\nimport { ForceHulls } from \"@john-guerra/force-hulls\"\n\nForceHulls({ nodes, links }, { invalidation, this: this});\n```\n\nTODO:\n* Draw the labels for the clusters\n* Create a force to keep hulls together","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":348,"value":"viewof n = Inputs.range([0, graph.nodes.length], {step: 1, label: \"Number of nodes to show\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":416,"value":"viewof disjoint = Inputs.toggle({label: \"Disjoint graph\", value: true})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":420,"value":"viewof animate = Inputs.toggle({label: \"Animate\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"chart = ForceHulls(\n graph,\n {\n width,\n groupBy: (d) => d.group,\n chargeStrength: -100,\n disjoint: disjoint,\n animate: animate,\n this: this, // provide this and invalidation to support better animations\n invalidation\n \n }\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":390,"value":"fadeInJoin({element: \"circle\", o: {animate: true}})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"$49","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"// ----------- Drag ----------------\nfunction drag(simulation) {\n function dragstarted(event) {\n if (!event.active) simulation.alphaTarget(0.3).restart();\n event.subject.fx = event.subject.x;\n event.subject.fy = event.subject.y;\n }\n\n function dragged(event) {\n event.subject.fx = event.x;\n event.subject.fy = event.y;\n }\n\n function dragended(event) {\n if (!event.active) simulation.alphaTarget(0);\n event.subject.fx = null;\n event.subject.fy = null;\n }\n\n return d3\n .drag()\n .on(\"start\", dragstarted)\n .on(\"drag\", dragged)\n .on(\"end\", dragended);\n}\n// ----------- /Drag ----------------","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":152,"value":"// To be used with selection.join to generate a fade in effect\nfadeInJoin = ({ element, o, opacity = 1 } = {}) => o.animate ? [\n (enter) => {\n const ele = enter.append(element).style(\"opacity\", 0);\n ele\n .transition()\n .delay((_, i, all) => (i * o.transitionDuration) / all.length)\n .duration(1000)\n .style(\"opacity\", opacity);\n return ele;\n },\n (update) => update,\n (exit) =>\n exit\n .transition()\n .duration(o.transitionDuration)\n .style(\"opacity\", 0)\n .remove()\n] : [element]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"function drawNodes({ svg, graph, simulation, o, filteredClusters }) {\n const nodeG = svg\n .selectAll(\"g#gNodes\")\n .data([0])\n .join(\"g\")\n .attr(\"id\", \"gNodes\");\n const node = nodeG\n .selectAll(\"circle\")\n .data(\n graph.nodes.filter(\n (d) => o.showGroupingNodes || d.type !== \"Connection\" // hide grey nodes\n ),\n (n) => o.id(n)\n )\n .join(...fadeInJoin({ element: \"circle\", o }))\n .attr(\"fill\", (d) =>\n d.type === \"Connection\"\n ? \"#999\"\n : o.hullColor(\n getFirstMatchInMap({ map: filteredClusters, query: d, id: o.id })\n )\n )\n // .attr(\"stroke\", \"black\")\n .attr(\"stroke-opacity\", 1)\n .attr(\"stroke-width\", 1)\n .attr(\"r\", (d) => d.r)\n .call(drag(simulation));\n\n return node;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":125,"value":"function drawLinks({ graph, o, svg, filteredLinks }) {\n const linkG = o.this\n ? svg.select(\"g#gLinks\")\n : svg.append(\"g\").attr(\"id\", \"gLinks\");\n const link = linkG\n .attr(\"stroke\", \"#999a\")\n .attr(\"stroke-opacity\", 1)\n .attr(\"stroke-width\", 0.5)\n .attr(\"stroke-linecap\", \"round\")\n .selectAll(\"line.link\")\n .data(\n filteredLinks.filter(\n (d) => o.showGroupingNodes || d.target.type !== \"Connection\"\n ),\n (d) => `${o.id(d.source)}-${o.id(d.target)}`\n )\n .join(...fadeInJoin({element: \"line\", o}))\n .attr( \"class\", \"link\")\n .style(\"pointer-events\", \"none\");\n\n return link;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":142,"value":"function drawHull({ o, svg, graph, filteredClusters }) {\n const area = d3.line().curve(d3.curveCatmullRomClosed);\n const hp = o.hullPadding;\n const getHull = (d) => {\n const points = d[1]\n .filter((d) => o.showGroupingNodes || d.type !== \"Connection\")\n .map((n) => [\n [n.x - (n.r + hp), n.y],\n [n.x + n.r + hp, n.y],\n [n.x, n.y + n.r + hp],\n [n.x, n.y - (n.r + hp)]\n ])\n .flat();\n const hull = d3.polygonHull(points);\n\n return hull && area(hull);\n };\n\n const hullG = o.this\n ? svg.select(\"g#gHulls\")\n : svg.append(\"g\").attr(\"id\", \"gHulls\");\n const hull = hullG\n .selectAll(\"path.hull\")\n .data(filteredClusters, (d) => d[0])\n .join(...fadeInJoin({ element: \"path\", opacity: 0.3, o }))\n .attr(\"class\", \"hull\")\n .attr(\"fill\", (d) => o.hullColor(d[0]))\n .attr(\"opacity\", 0.3)\n .attr(\"pointer-events\", \"none\");\n\n return { hull, getHull };\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"$4a","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"function drawImages({svg, graph, simulation, o}) {\n const gImages = svg\n .selectAll(\"g#gImages\")\n .data([0])\n .join(\"g\")\n .attr(\"id\", \"gImages\");\n \n return gImages\n .selectAll(\"image\")\n .data(\n o.useImages\n ? graph.nodes.filter(\n (d) =>\n d.type !== \"Connection\" &&\n o.photoBy(d)\n // && d.photo.toUpperCase().indexOf(\"JPG\") !== -1 \n )\n : [],\n o.id\n )\n .join(...fadeInJoin({element: \"image\", o}))\n .attr(\"href\", o.photoBy)\n .attr(\"width\", (d) => d.r * 2 - o.photoMargin)\n .attr(\"height\", (d) => d.r * 2 - o.photoMargin)\n // .attr(\"stroke\", \"black\")\n .attr(\"preserveAspectRatio\", \"xMidYMid slice\")\n .attr(\"transform\", (d) => `translate(-${d.r - o.photoMargin/2}, -${d.r - o.photoMargin/2})`)\n .style(\"clip-path\", (d) => `circle(${d.r - o.photoMargin/2}px)`)\n .style(\"pointer-events\", \"none\")\n .call(drag(simulation));\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":264,"value":"// Searches in a Map of Arrays for the first occurance of a value using an id function\nfunction getFirstMatchInMap({ map, query, id }) {\n for (let [eleKey, eleNodes] of map) {\n for (let n of eleNodes) {\n if (id(n) === id(query)) return eleKey;\n }\n }\n\n return null;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":292,"value":"function filterClustersFromNodes({clusters, visibleNodes, id}) {\n let filteredMap = new Map(); \n for (let [eleKey, eleNodes] of clusters) {\n const filteredNodes = eleNodes.filter(n => visibleNodes.has(id(n)));\n if (filteredNodes.length>0) {\n filteredMap.set(eleKey, filteredNodes);\n }\n }\n\n return filteredMap;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":297,"value":"function filterLinksFromNodes({ links, visibleNodes, id }) {\n const idIfObject = (d) => (typeof d === \"string\" ? d : id(d));\n\n return links.filter(\n ({ source, target }) =>\n visibleNodes.has(idIfObject(source)) &&\n visibleNodes.has(idIfObject(target))\n );\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":467,"value":"network","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":460,"value":"import {network} from \"bfb0f4aada2da7ae\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"graph = FileAttachment(\"miserables.json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":78,"value":"import {hover, link} with {tippytheme} from \"@john-guerra/hello-tippy\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":111,"value":"link","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":107,"value":"tippytheme = \"light\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4b","stdlib":"1"}} 24:null