41:null 42:["$","title",null,{"children":"Force Hulls | John Alexis Guerra Gómez | Observable"}] 48:T188f,function ForceHulls( graph, // { nodes, links, clusters /* Map of Arrays for hulls */ } options = {} ) { let o = { groupBy: (d) => d.group, nodeSize: 25, height: 500, width: 800, hullPadding: 5, showGroupingNodes: false, 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 + "px") .attr("height", o.height + "px") .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; }49: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) ); }) ); }4a:[{"id":"5c42a3b21cfcafb1db3a01c916bb5fda0efb1ab16952d04216db9dea1c27f98e80a380f66ebf5e6cf465c1e26ac2368b96d4c1505ab1d7409c5ee5a5a93741b0","href":"https://static.observableusercontent.com/files/5c42a3b21cfcafb1db3a01c916bb5fda0efb1ab16952d04216db9dea1c27f98e80a380f66ebf5e6cf465c1e26ac2368b96d4c1505ab1d7409c5ee5a5a93741b0","name":"miserables.json","type":"application/json","lastModified":1700259638979.199,"size":18844}] 46:{"id":"74628aadd749e99d","slug":"force-hulls","title":"Force Hulls","thumbnail":"03af8baf35240ef8c9535ac816c06530c999e9b97a2ba8dac3f6ee22c38153dc","access_level":"public","create_time":"$D2023-11-17T22:18:50.487Z","update_time":"$D2024-03-15T17:03:24.982Z","view_time":null,"first_public_time":"$D2023-11-17T22:32:28.978Z","has_unpublished_edits":null,"fork":false,"stars":3,"starred":false,"owner":{"type":"team","id":"cd3c1e49fc84d010","login":"john-guerra","name":"John Alexis Guerra Gómez","avatar_url":"https://avatars-next.observableusercontent.com/21638cee44bb0ea70798da725b57111a5d3e2acebcd14524565992f7d1594aed","tier":"starter_2024","bio":"I love to build dataviz for insight discovery. I also love to put technology to the service of humanity","following":false},"version":461,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"be0076fec73aa550","login":"john-guerra","name":"John Alexis Guerra Gómez","avatar_url":"https://avatars-next.observableusercontent.com/21638cee44bb0ea70798da725b57111a5d3e2acebcd14524565992f7d1594aed","tier":null,"bio":"I love to build dataviz for insight discovery. I also love to put technology to the service of humanity","following":false}],"members":[{"type":"individual","id":"be0076fec73aa550","login":"john-guerra","name":"John Alexis Guerra Gómez","avatar_url":"https://avatars-next.observableusercontent.com/21638cee44bb0ea70798da725b57111a5d3e2acebcd14524565992f7d1594aed","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":4,"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. If you want to create the network data structure out of tabular data by grouping by an attribute, please check my [GraphByGrouping](https://observablehq.com/@john-guerra/graph-by-grouping).\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 { nodes: graph.nodes.slice(0, n), links: graph.links },\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":"$48","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":"$49","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":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":"$W4a","stdlib":"1"}} 47:"$46:body"