2b:null 2c:["$","title",null,{"children":"dependency data (with bird eye view + labels) | Piyush | Observable"}] 31:T1e32,// 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 , 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 : d3.map(nodes, nodeTitle); const G = nodeGroup == null ? null : 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) .attr("transform","scale(0.5)") .selectAll("line") .data(links) .join("line"); if (W) link.attr("stroke-width", ({index: i}) => W[i]); const node = z.append("g") .attr("fill", nodeFill) .attr("stroke", nodeStroke) .attr("stroke-opacity", nodeStrokeOpacity) .attr("stroke-width", nodeStrokeWidth) .attr("transform", "scale(0.5)") .selectAll("circle") .data(nodes) .attr("class", "node") .join("circle") .attr("r", nodeRadius) .call(drag(simulation)); const nodeLables = z.selectAll("text") .data(nodes) .enter() .append("text") .text( function (d) { if (d.id.length > 5){ return d.id.substring(0,5)+ "...";} else {return d.id;}}) .attr("text-anchor","middle") .attr("font-family", "sans-serif") .attr("font-size", "10px") .attr("fill", "black") .attr("transform", "scale(0.5)") .style("visibility", "hidden"); const toolbar = svg.append("g") // .attr("transform", "scale(1.5)") .style("background-color", 'white'); const textbox =toolbar.append("g") .append("foreignObject") //.attr("position","absolute") .attr("height",500) .attr('x',-width) .attr('y',-height ) .attr("width",500) .attr("dy",24) .append("xhtml:div") .html("

") ; const button = toolbar.append("g") .append("foreignObject") //.attr("position","absolute") .attr("height",310) .attr('x',-width + 250) .attr('y',-height) .attr("top",0) .attr("width",60) .append("xhtml:div") .html("") .on("click", function () { let txtName = d3.select("#txtName").node().value; //z.text(txtName); node.attr('fill', function(d) { return d.id === txtName ? "green" : "#AEAEAE"; }) node.attr('r', function(d) { return d.id === txtName ? 15 : 5; }) }); const checkbox =toolbar.append("g") .append("foreignObject") //.attr("position","absolute") .attr("height",200) .attr("width",300) .attr('x',-width + 350) .attr('y',-height) .append("xhtml:div") .html("

") .on("change", Labels); // d3.select("#check").on("change",Labels); // Labels(); function Labels(){ if(d3.select("#check").property("checked")){ nodeLables.style("visibility", "visible"); } else{ nodeLables.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); nodeLables.attr("x", d => d.x) //position of the lower left point of the text .attr("y", d => d.y); } 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":1674622054471.783,"size":680407}] 2f:{"id":"308092fc3868ef48","slug":null,"title":"dependency data (with bird eye view + labels)","thumbnail":"dd52b5dc6853a917376800bdf4319fb63dec2e218aa75b9ac359be13566de6cd","access_level":"public","create_time":"$D2023-01-25T04:47:34.471Z","update_time":"$D2023-01-25T10:27:29.731Z","view_time":null,"first_public_time":"$D2023-01-25T04:47:34.471Z","has_unpublished_edits":null,"fork":{"id":"af2808cfc05c962a","slug":null,"title":"dependency data","owner":{"id":"b8908dff97f9eeb9","login":"vidhi","name":"Vidhi"}},"stars":0,"starred":false,"owner":{"type":"team","id":"1b839cba4b5055bc","login":"coder08","name":"Piyush","avatar_url":"https://avatars-next.observableusercontent.com/60796d21ce871dc58aae11203e9455dc485261fdab238653f4d58c2d63f05ed3","tier":"starter_2024"},"version":747,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"39a66f176de14caa","login":"coder08","name":"Piyush","avatar_url":"https://avatars-next.observableusercontent.com/60796d21ce871dc58aae11203e9455dc485261fdab238653f4d58c2d63f05ed3","tier":null}],"members":[{"type":"individual","id":"39a66f176de14caa","login":"coder08","name":"Piyush","avatar_url":"https://avatars-next.observableusercontent.com/60796d21ce871dc58aae11203e9455dc485261fdab238653f4d58c2d63f05ed3","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"dependency data (with bird eye view + labels)","cells":[{"id":1,"value":"# dependency data (with bird eye view + labels)\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} (${d.group})`,\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"