2b:null 2c:["$","title",null,{"children":"dependency data | Vidhi | Observable"}] 31:T2d34,// Copyright 2021 Observable, Inc. // Released under the ISC license. // https://observablehq.com/@d3/disjoint-force-directed-graph function ForceGraph({ nodes, // an iterable of node objects (typically [{id}, …]) links // an iterable of link objects (typically [{source, target}, …]) }, { nodeId = d => d.id, // given d in nodes, returns a unique identifier (string) nodeGroup, // given d in nodes, returns an (ordinal) value for color nodeGroups, // an array of ordinal values representing the node groups nodeTitle, // given d in nodes, a title string nodeFill = "currentColor", // node stroke fill (if not using a group color encoding) nodeStroke = "#fff", // node stroke color nodeStrokeWidth = 1.5, // node stroke width, in pixels nodeStrokeOpacity = 1, // node stroke opacity nodeRadius = 5, // node radius, in pixels nodeStrength , pageX, pageY, 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 = "#999", // 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 linkStrength=1, colors = d3.schemeTableau10, // 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 } = {}) { // Compute values. const N = d3.map(nodes, nodeId).map(intern); const LS = d3.map(links, linkSource).map(intern); const LT = d3.map(links, linkTarget).map(intern); //if (nodeTitle === undefined) nodeTitle = (_,i) => N[i]; const T = nodeTitle == null ? null : null;//d3.map(nodes, nodeTitle); const G = d3.map(nodes, nodeGroup).map(intern); const W = typeof linkStrokeWidth !== "function" ? null : d3.map(links, linkStrokeWidth); // Replace the input nodes and links with mutable objects for the simulation. nodes = d3.map(nodes, (_, i) => ({id: N[i]})); links = d3.map(links, (_, i) => ({source: LS[i], target: LT[i]})); // Compute default domains. if (G && nodeGroups === undefined) nodeGroups = d3.sort(G); // Construct the scales. const color = nodeGroup == null ? null : d3.scaleOrdinal(nodeGroups, colors); // Construct the forces. const forceNode = d3.forceManyBody().strength(-100); const forceLink = d3.forceLink(links).id(({index: i}) => N[i]); if (nodeStrength !== undefined) forceNode.strength(nodeStrength); if (linkStrength !== undefined) forceLink.strength(linkStrength); const simulation = d3.forceSimulation(nodes) .force("link", forceLink) .force("charge", forceNode) .force('collision', d3.forceCollide().radius(function(d) { return d.radius })) .force("x", d3.forceX()) .force("y", d3.forceY()) .on("tick", ticked); const svg = d3.create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [-width, -height, width*2, height*2]) .attr("style", "max-width: 100%; height: auto; height: intrinsic;"); const z= svg.append("g"); //.text("abcdefghj"); svg.call(d3.zoom() .on("zoom", function () { z.attr("transform",d3.zoomTransform(this)) })); const link = z.append("g") .attr("stroke",linkStroke) .attr("stroke-opacity", linkStrokeOpacity) .attr("stroke-width", typeof linkStrokeWidth !== "function" ? linkStrokeWidth : null) .attr("stroke-linecap", linkStrokeLinecap) .selectAll("line") .data(links) .join("line") .attr("transform", "scale(0.5)") .attr("marker-end", "url(#end)"); if (W) link.attr("stroke-width", ({index: i}) => W[i]); const node = z.append("g") //.attr("fill", nodeFill) .attr("stroke", "transparent")//nodeStroke) .attr("stroke-opacity", nodeStrokeOpacity) .attr("stroke-width", "1px")//nodeStrokeWidth) .selectAll("circle") .data(nodes) .attr("class", "node") .join("circle") .attr("r", nodeRadius) .call(drag(simulation)) .attr("transform", "scale(0.5)") .on("mouseover",function (event,d) { tooltip.style("visibility","visible") .html("Job Name: " + d.id + "
Business Unit: " + JSON.stringify(forceNode, null, 4)) .style("top", (event.pageY+10) + "px") .style("left", (event.pageX+10) + "px"); highlightNeighbours(d); }) .on("mouseleave",deHighlight) .on("mouseout",function (d){ tooltip.style("visibility","hidden"); }); var neighbours = {}; nodes.forEach((node) => { neighbours[node.id] = neighbours[node.id] || [node.id]; }); links.forEach((link) => { if(neighbours[link.source.id]){ neighbours[link.source.id].push(link.target.id); } neighbours[link.target.id].push(link.source.id); }); function highlightNeighbours(d) { deHighlight(); node.attr("opacity", (n) => { return neighbours[d.id].indexOf(n.id) != -1 ? 1 : 0.4; }); link.attr("opacity", (n) => { return d.id == n.source.id || d.id == n.target.id ? 1 : 0.4; }); textLabels.filter(n => neighbours[d.id].indexOf(n.id) != -1) .style("visibility", "visible"); // select self and change its properties // d3.select(this).attr("opacity", "1"); //d3.selectAll(this.childNodes).style({ // "display": "inline-block", // "visibility": "visible" //}); }; function deHighlight() { //node.attr("fill","green") node.attr("opacity", nodeStrokeOpacity); link.attr("opacity",linkStrokeOpacity ); if(d3.select("#check").property("checked")){ textLabels.style("visibility","visible"); } else{ textLabels.style("visibility","hidden"); } } var arrows = z.append("defs").selectAll("marker") .data(["end"]) .enter() .append("z:marker") .attr("id", String) .attr("viewBox", "0 -5 10 10") .attr("refX", "50") .attr("refY","0") .attr("orient", "auto") .attr("markerHeight","5") .attr("markerWidth","6") .append("z:path") .style("fill","#999") .attr("d", "M0,-5L10,0L0,5"); var textLabels = z.selectAll("text") .data(nodes) .enter() .append("text") .text(function (d) { return d.id }) .attr("font-family", "TitilliumWebLight") .attr("text-anchor","middle") .attr("font-size", "9px") .attr("fill", "black") .attr("transform","scale(0.5)") //.attr("transform", d => `translate(${d.x}, ${d.y})`) .text(function (d){ if (d.id.length > 5){ return d.id.substring(0,5)+ "...";} else {return d.id;} }) .style("background-color", 'white') .style("visibility","hidden") ; const toolbar = svg.append("g") .style("background-color", 'white'); const tooltip = d3.select("body") .append("div") // the tooltip always "exists" as its own html div, even when not visible //.append("foreignObject") .style("position","absolute") .attr("class", "tooltip") .attr('x',-width + 10) .attr('y',-height + 10) //.attr("top",0) .attr("width",250) .attr("height",40) //.append("xhtml:div") //.html("Job Name:
Business Unit:") .style("border", "solid") .style("visibility","hidden") //.style("arrow","bottom") .style("border-width", "1px") .style("border-radius", "30px") .style("padding", "10px") .style("font-size", "20px") .style("box-sizing", "border-box") .style('padding', '5px') .style('border-color',"#4E79A7") .style('border-radius', '2.5px') .style('box-shadow', '0px 0px 3px 2px #cec9c9') .style("background-color", "rgba(247, 247, 247, 0.85)") .style("color", "#333333"); const textbox =toolbar.append("g") .append("foreignObject") //.attr("position","absolute") .attr("height",30) .attr('x',-width + 60) .attr('y',-height +100) .attr("width",500) .attr("dy",24) .append("xhtml:div") .html("

") ; const button = toolbar.append("g") .append("foreignObject") //.attr("position","absolute") .attr("height",30) .attr('x',-width) .attr('y',-height + 100) .attr("top",0) .attr("width",60) .append("xhtml:div") .html("") .on("click", function () { let txtName = d3.select("#txtName").node().value; if (txtName.length === 0){ alert("Input cannot be empty"); node.attr("fill","#4E79A7") .attr('r',5); } else{ node.attr('fill', function(d) { return d.id.toUpperCase().includes(txtName.toUpperCase()) ? "green" : "#AEAEAE"; }) node.attr('r', function(d) { return d.id.toUpperCase().includes(txtName.toUpperCase()) ? 15 : 5; })} }) ; const checkbox =toolbar.append("g") .append("foreignObject") .attr("position","absolute") .attr("height",30) .attr("width",700) .attr('x',-width + 350) .attr('y',-height + 100) .append("xhtml:div") .html("

") .on("click", Labels); const Reset = toolbar.append("g") .append("foreignObject") //.attr("position","absolute") .attr("height",30) .attr('x',-width + 500) .attr('y',-height + 100) .attr("top",0) .attr("width",60) .append("xhtml:div") .html("") .on("click", function (d){ node.attr("fill","#4E79A7") .attr('r', 5) d3.select("#txtName").property("value", "") }); // d3.select("#check").on("change",Labels); // Labels(); function Labels(){ if(d3.select("#check").property("checked")){ textLabels.style("visibility","visible"); } else{ textLabels.style("visibility","hidden"); } } if (G) node.attr("fill", ({index: i}) => color(G[i])); if (T) node.append("title").text(({index: i}) => T[i]); // Handle invalidation. if (invalidation != null) invalidation.then(() => simulation.stop()); function intern(value) { return value !== null && typeof value === "object" ? value.valueOf() : value; } 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 .attr("cx", d => d.x) .attr("cy", d => d.y); textLabels .attr("x",function(d) { return d.x; }) .attr("y",function(d) { return d.y - 6; }) } function drag(simulation) { function dragstarted(event) { if (!event.active) simulation.alphaTarget(0.3).restart(); event.subject.fx = event.subject.x; event.subject.fy = event.subject.y; } function dragged(event) { event.subject.fx = event.x; event.subject.fy = event.y; } function dragended(event) { if (!event.active) simulation.alphaTarget(0); event.subject.fx = null; event.subject.fy = null; } return d3.drag() .on("start", dragstarted) .on("drag", dragged) .on("end", dragended); } return Object.assign(svg.node(), {scales: {color}}); }32:[{"id":"420c2a7d552910d82a9447a58855c40ab523aa9d027250bdbc2ad8ff971cb88153c2f043715f0f058e8555b8736aa4aa40a0b7647b4ecfdcbd2df15ee51adec1","href":"https://static.observableusercontent.com/files/420c2a7d552910d82a9447a58855c40ab523aa9d027250bdbc2ad8ff971cb88153c2f043715f0f058e8555b8736aa4aa40a0b7647b4ecfdcbd2df15ee51adec1","name":"masked data.json","type":"application/json","lastModified":1674113159457.966,"size":680407},{"id":"36435e264158664ca4dd08e45e7d8823d97d3a0e7bbaed7f2c45ea189d71cfe06e133db788a515d6aa302f2275add1d651b2d6711015ce015bb11a294a5dfee7","href":"https://static.observableusercontent.com/files/36435e264158664ca4dd08e45e7d8823d97d3a0e7bbaed7f2c45ea189d71cfe06e133db788a515d6aa302f2275add1d651b2d6711015ce015bb11a294a5dfee7","name":"set 2 data.json","type":"application/json","lastModified":1674106064612.423,"size":29744}] 2f:{"id":"af2808cfc05c962a","slug":null,"title":"dependency data","thumbnail":"8fbcb1c9d93703a7d33c8bc88c15745c0ad7c23debcd5ab535a2df09e962df39","access_level":"public","create_time":"$D2023-01-18T12:26:04.511Z","update_time":"$D2023-02-20T05:35:57.466Z","view_time":null,"first_public_time":"$D2023-01-18T12:26:04.511Z","has_unpublished_edits":null,"fork":{"id":"6a4522cb8675da36","slug":null,"title":"1 dependency data","owner":{"id":"b8908dff97f9eeb9","login":"vidhi","name":"Vidhi"}},"stars":0,"starred":false,"owner":{"type":"team","id":"b8908dff97f9eeb9","login":"vidhi","name":"Vidhi","avatar_url":"https://avatars-next.observableusercontent.com/aeb2be3482040c170203c69248dd3c5dd8d2508fd463a92ea9714f5c1a0de529","tier":"starter_2024"},"version":1448,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"4cca4e6846c66a40","login":"vidhi","name":"Vidhi","avatar_url":"https://avatars-next.observableusercontent.com/aeb2be3482040c170203c69248dd3c5dd8d2508fd463a92ea9714f5c1a0de529","tier":null}],"members":[{"type":"individual","id":"4cca4e6846c66a40","login":"vidhi","name":"Vidhi","avatar_url":"https://avatars-next.observableusercontent.com/aeb2be3482040c170203c69248dd3c5dd8d2508fd463a92ea9714f5c1a0de529","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":3,"collection":null,"type":"notebook","body":{"title":"dependency data","cells":[{"id":1,"value":"# dependency data\n\n1708 -jobs
\n3057 -dependencies ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":180,"value":"key = Swatches(chart.scales.color)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":149,"value":"chart = ForceGraph(graph, {\n nodeId: d => d.id,\n nodeGroup: d => d.group,\n //nodeTitle: d => `${d.id}`,\n width,\n height: 680,\n invalidation // a promise to stop the simulation when the cell is re-run\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"graph = FileAttachment(\"masked data.json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":162,"value":"howto(\"ForceGraph\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":160,"value":"import {howto} from \"@d3/example-components\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":177,"value":"import {Swatches} from \"@d3/color-legend\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W32","stdlib":"1","titling":"auto"}} 30:"$2f:body"