2c:null 2d:["$","title",null,{"children":"Service inventory and dependency graph | bea | Observable"}] 32:T41c,viewof settings = form(html``)33:T2638,chartEntities = { const nodeSizeMode = settings.nodeSizeMode; // can be "dependsOn" or "requiredBy" const nodeColourMode = "team"; // only team is supported at the moment todo: support also "database" const linkColourMOde = "team"; // can be "team"; todo: support also apiStyle const linkStyle = settings.linkStyle; // can be "linkArc" or "linkRect" const height = 1500; const radiusScaleFactor = settings.radiusScaleFactor; ; const nodeForm = settings.nodeForm; // can be "rect" or "circle" const initialStrengthFactor = settings.initialStrengthFactor; // eg 30 const fontStyle = "12px sans-serif"; const arcBendFactor = 10; // 1 is the real arc const linkDrawing = d => eval(linkStyle + "(d)"); const initialStrength = (d) => -1 * d * initialStrengthFactor; // data preparation const links = []; // the links const serviceMap = {}; // a map of all services data.forEach(s => { s.graph = s.graph && s.graph.dependsOn ? s.graph : { "dependsOn" : []}; s.graph["requiredBy"] = [] serviceMap[s.name] = s; }); data.forEach(s => { let linkNumbers = {}; s.graph.dependsOn.forEach(d => { if(!linkNumbers[d.service]) linkNumbers[d.service] = 1; else linkNumbers[d.service]++; links.push({source:s.name, target:d.service, type: s.team, number: linkNumbers[d.service]}); serviceMap[d.service].graph.requiredBy.push({"service" : s.name, "description" : d.description}); }); }); // chart building const nodes = []; const unmappedNodes = []; let maxRadius = 1; Object.values(serviceMap).forEach(s => { let nodeSelection = s.graph.dependsOn.length == 0 && s.graph.requiredBy.length == 0 ? unmappedNodes : nodes; let radius = (s.graph && s.graph[nodeSizeMode])? ((s.graph[nodeSizeMode].length + 1 )*radiusScaleFactor) : radiusScaleFactor; nodeSelection.push({ id: s.name, radius: radius, type: s.team, desc: JSON.stringify(s,null,4) }); if(maxRadius < radius) maxRadius = radius; }); nodes.sort(function(a, b){ return b.radius-a.radius; }); unmappedNodes.sort(function(a, b){ return b.type > a.type ? -1 : 1; }); const types = Array.from(new Set(links.map(d => d.type))); const color = d3.scaleOrdinal(types, d3.schemeCategory10); // forces const simulation = d3.forceSimulation(nodes) .force("link", d3.forceLink(links).id(d => d.id)) .force("charge", d3.forceManyBody().strength(initialStrength(maxRadius))) .force("center", d3.forceCenter(width / 2, height / 2)) .force("x", d3.forceX()) .force("y", d3.forceY()); // link drawing const calculateCoordinatesCircle = (d, radiusFunction) => { const identity = (r) => r; let radiusFct = radiusFunction == undefined ? identity : radiusFunction; let diffX = d.target.x - d.source.x; let targetRadius = radiusFct(d.target.radius); let targetAngle = Math.atan((d.target.y - d.source.y)/(d.target.x - d.source.x)); let targetX = diffX > 0 ? d.target.x - targetRadius * Math.cos(targetAngle) : d.target.x + targetRadius * Math.cos(targetAngle); let targetY = diffX > 0 ? d.target.y - targetRadius * Math.sin(targetAngle): d.target.y + targetRadius * Math.sin(targetAngle); let sourceRadius = radiusFct(d.source.radius); let sourceAngle = Math.atan((d.target.y - d.source.y)/(d.target.x - d.source.x)); let sourceX = diffX < 0 ? d.source.x - sourceRadius * Math.cos(sourceAngle) : d.source.x + sourceRadius * Math.cos(sourceAngle); let sourceY = diffX < 0 ? d.source.y - sourceRadius * Math.sin(sourceAngle): d.source.y + sourceRadius * Math.sin(sourceAngle); return {source: {x: sourceX, y: sourceY}, target: {x: targetX, y: targetY}}; } const calculateCoordinatesRect = (d) => { const hypot = (r) => Math.hypot(r, r); const c = calculateCoordinatesCircle(d, hypot); const clamp = (x, lo, hi) => x < lo ? lo : x > hi ? hi : x; c.source.x = clamp(c.source.x, d.source.x - d.source.radius, d.source.x + d.source.radius); c.source.y = clamp(c.source.y, d.source.y - d.source.radius, d.source.y + d.source.radius); c.target.x = clamp(c.target.x, d.target.x - d.target.radius, d.target.x + d.target.radius); c.target.y = clamp(c.target.y, d.target.y - d.target.radius, d.target.y + d.target.radius); return c; } const linkRect = d => { let c = nodeForm == "rect" ? calculateCoordinatesRect(d) : calculateCoordinatesCircle(d); return `M ${c.source.x} ${c.source.y} H ${c.target.x} V ${c.target.y}`; } const linkArc = (d) => { let c = nodeForm == "rect" ? calculateCoordinatesRect(d) : calculateCoordinatesCircle(d); const r = Math.hypot(d.target.x - d.source.x, d.target.y - d.source.y) * arcBendFactor; return ` M${c.source.x},${c.source.y} A${r},${r} 0 0,1 ${(c.target.x)},${(c.target.y)} `; } // interaction function dragstart(event, d) { d3.select(this).classed("fixed", true); d3.select(this).select(".elem") .attr("stroke", d => d3.color(color(d.type)).brighter(1)); d3.select(this).select("text") .attr("font-weight", "bold"); } const dragged = (event, d) => { //const clamp = (x, lo, hi) => x < lo ? lo : x > hi ? hi : x; const noclamp = (x, lo, hi) => x; d.fx = noclamp(event.x, 0, width); d.fy = noclamp(event.y, 0, height); simulation.alpha(1).restart(); } const drag = d3 .drag() .on("start", dragstart) .on("drag", dragged); const zoomed = (event) => { svg.selectAll("g.zoom-container").attr("transform", event.transform); } const zoom = d3.zoom() .on("zoom", zoomed); const mouseover = (event, d) => { let currentNode = d3.select(event.target.parentNode); // bring to front: currentNode.node().parentNode.appendChild(currentNode.node()); currentNode .selectAll(".elem") .attr("fill", d => d3.color(color(d.type)).darker(1)); currentNode .selectAll("text") .attr("fill", d => d3.color(color(d.type)).darker(8)); d3.selectAll("path."+ d.id) .attr("stroke-width", 3); } const mouseout = (event, d) => { let currentNode = d3.select(event.target.parentNode); currentNode .selectAll(".elem") .attr("fill", d => color(d.type)); currentNode .selectAll("text") .attr("fill", d => d3.color(color(d.type)).darker(5)); d3.selectAll("path."+ d.id) .attr("stroke-width", d => d.number? 1 + d.number/10 : 1); } function doubleclick(event, d){ delete d.fx; delete d.fy; d3.select(this).classed("fixed", false); d3.select(this).select(".elem") .attr("stroke", "white"); d3.select(this).select("text") .attr("font-weight", "normal"); simulation.alpha(1).restart(); } const click = (event, d) => { console.log(d3.select(event.target).data()[0].desc); } // svgs const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]) .style("font", fontStyle) .call(zoom, d3.zoomIdentity) .on("dblclick.zoom", null); // Per-type markers, as they don't inherit styles. svg.append("defs").selectAll("marker") .data(types) .join("marker") .attr("id", d => `arrow-${d}`) .attr("viewBox", "0 -5 10 10") .attr("refX", 10) .attr("refY", 0) .attr("markerWidth", 6) .attr("markerHeight", 6) .attr("orient", "auto") .append("path") .attr("fill", "none") .attr("stroke", color) .attr("stroke-width", 1.5) .attr("d", "M0,-5L10,0L0,5"); const drawNode = (root, data, isZoomable) => { const node = svg.append("g") .attr("fill", "currentColor") .attr("stroke-linecap", "round") .attr("stroke-linejoin", "round") .style("cursor", "pointer") .classed("zoom-container", isZoomable) .selectAll("g") .data(data) .classed("node", true) .classed("fixed", d => d.fx !== undefined) .join("g") .call(drag) .call(elem => elem.on("click", click)) .call(elem => elem.on("dblclick", doubleclick)) .call(elem => elem.on("mouseover", mouseover)) .call(elem => elem.on("mouseout", mouseout)); node.append(nodeForm) .classed("elem", true) .attr("fill", d => d3.color(color(d.type))) .attr("stroke", "white") .attr("stroke-width", 1.5) .attr("height", d => d.radius*2) .attr("width", d => d.radius*2) .attr("transform", d => nodeForm == "rect" ? `translate(${-d.radius},${-d.radius})` : ``) .attr("r", d => d.radius); node.append("text") .attr("x", d => d.radius+3) .attr("y", "5") .attr("fill", d => d3.color(color(d.type)).darker(5)) .text(d => d.id); return node; } const node = drawNode(svg, nodes, true); const unmapped = drawNode(svg, unmappedNodes, false); let unmappedOffset = 0; unmapped.attr("transform", d => { unmappedOffset += d.radius + 10; return `translate(${d.radius + 1}, ${unmappedOffset})` }); const link = svg.append("g") .attr("fill", "none") .attr("stroke-width", 1) .classed("zoom-container", true) .selectAll("path") .data(links) .join("path") .attr("class", d => d.source.id + " " + d.target.id) .attr("stroke", d => color(d.type)) .attr("opacity", 0.7) .attr("stroke-width", d => d.number? 1 + d.number/10 : 1) .attr("marker-end", d => `url(${new URL(`#arrow-${d.type}`, location)})`); simulation.on("tick", () => { link.attr("d", linkDrawing); node.attr("transform", d => `translate(${d.x},${d.y})`); }); invalidation.then(() => simulation.stop()); console.log(link); return svg.node(); }34:[{"id":"91208634814472623b3126257abcf257da4f4e342be9465d80a6e586bd962d684e39cab50a315314d51ca24ca3308e8745ad0616d522a94535953a3721f69af8","href":"https://static.observableusercontent.com/files/91208634814472623b3126257abcf257da4f4e342be9465d80a6e586bd962d684e39cab50a315314d51ca24ca3308e8745ad0616d522a94535953a3721f69af8","name":"data-services-starstruck@6.json","type":"application/json","lastModified":1621618751265.326,"size":21752}] 30:{"id":"a5306476fbd708ad","slug":"service-inventory-and-dependency-graph","title":"Service inventory and dependency graph","thumbnail":"865bce7ef113212288658a5e3ed76ff9bb9221e525402349ae1bb338988d0a80","access_level":"public","create_time":"$D2021-05-21T16:45:14.329Z","update_time":"$D2021-05-25T13:15:47.028Z","view_time":null,"first_public_time":"$D2021-05-21T17:21:19.551Z","has_unpublished_edits":null,"fork":false,"stars":9,"starred":false,"owner":{"type":"team","id":"18aeb6daee87a192","login":"llb4ll","name":"bea","avatar_url":"https://avatars-next.observableusercontent.com/1817a622719b68c15fd89c864643a2513d5e715681d61186936e60b95a0bcc0e","tier":"starter_2024","bio":""},"version":102,"publish_version":102,"role":null,"authored":false,"authors":[{"type":"individual","id":"2e1df79eb11834a9","login":"llb4ll","name":"bea","avatar_url":"https://avatars-next.observableusercontent.com/1817a622719b68c15fd89c864643a2513d5e715681d61186936e60b95a0bcc0e","tier":null,"bio":""}],"members":[{"type":"individual","id":"2e1df79eb11834a9","login":"llb4ll","name":"bea","avatar_url":"https://avatars-next.observableusercontent.com/1817a622719b68c15fd89c864643a2513d5e715681d61186936e60b95a0bcc0e","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":7,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Service inventory and dependency graph","cells":[{"id":0,"value":"md`\n\n# Service inventory and dependency graph\nThis notebook explores interactive visualisations for service inventories in order to discover inter-service dependencies. As those dependencies often correlate to some extent with organisational structures around the software development (Conway's Law), we will use this as an example of categorical grouping of services.\n\nNote that the data displayed in this notebook is completely random and only serves as an example.\nYou can fork this notebook and replace the attached file with your own data to explore a real dataset.\n\nThis is the first experiment of a series to explore what works best for the service inventory use-case. A nice overview of what could be done with similar datasets can be found in this [notebook about graph visualisations](https://observablehq.com/@bstaats/graph-visualization-introduction).\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"md`\n## Interactive dependency graph\n\n### Inspired by: \n- https://observablehq.com/@d3/disjoint-force-directed-graph\n- https://observablehq.com/@d3/sticky-force-layout?collection=@d3/d3-drag\n- https://observablehq.com/@roblallier/clustered-bubbles\n\n### Interaction\n- Zoom: Use your mouse wheel or touch to zoom in and out\n- Drag: Point and drag on white space to navigate the map\n- Hover: Hover over a node to highlight dependencies\n- Select: Tap on a node to lock it to the current position\n- Select and reposition: Tap on a node and drag it to a different position\n- Controls: Use the controls below to reconfigure the visualisation as described\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"settings","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":43,"value":"data = FileAttachment(\"data-services-starstruck@6.json\").json();","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"import {form} from \"@mbostock/form-input\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1"}} 31:"$30:body"