34:["$","title",null,{"children":"Force Directed Tree with Coloring and Blinking effect | Sethuram Ramalinga Reddy | Observable"}] 3c:T2157,function forceDirectedTree(){ let margin = {top: 20, right: 10, bottom: 20, left: 10}; let width = 600; let height = 600; function chart(selection){ let data = selection.datum(); let chartWidth = width - margin.left - margin.right; let chartHeight = height - margin.top - margin.bottom; let root = d3.hierarchy(data); let links = root.links(); let nodes = root.descendants(); let simulation = d3.forceSimulation(nodes) .force("link", d3.forceLink(links).id(d => d.id).distance(10).strength(0.8)) .force("charge", d3.forceManyBody().strength(-50)) .force("center", d3.forceCenter()); let previousColour =null; let access = ["Read","Write","Delete"]; let isDragging = false; // adding tool tip let Tooltip = selection .append("div") .attr("class", "tooltip") .style("pointer-events","none") .style("border","2px solid #666") .style("border-radius","8px") .style("color","white"); let duration = 300; let pulse = () => { var circle = d3.selectAll(".blink"); (function repeat() { circle = circle.transition() .duration(duration) .attr("r", 6) .transition() .duration(duration*3) .attr("r", 12) .ease(d3.easeElasticIn) .delay((d, i) => i * 20) // .style("fill", d3.interpolateTurbo(Math.random())) .on("end", repeat); })(); }; let drag = function (simulation) { function dragstarted(d) { isDragging = true; if (!d3.event.active) simulation.alphaTarget(0.3).restart(); d.fx = d.x; d.fy = d.y; } function dragged(d) { d.fx = d3.event.x; d.fy = d3.event.y; } function dragended(d) { if (!d3.event.active) simulation.alphaTarget(0); d.fx = null; d.fy = null; isDragging = false; } return d3.drag() .on("start", dragstarted) .on("drag", dragged) .on("end", dragended); }; let mouseover = (d)=>{ Tooltip.transition() .duration(duration) .style("opacity", (d) =>(!isDragging)?0.97: 0); Tooltip.html(()=>{ let innerColumns = "

Object:

"+ "

"+d.data.name+"

"; if(!d.children && access.indexOf(d.data.name) in["Read","Write","Delete"]){ innerColumns = "

Access:

"+ "

"+d.data.name+"

"; } if(d.children && d.depth===0){ innerColumns = "

Bucket:

"+ "

"+d.data.name+"

"; } return "

"+"

"+ "

"+ innerColumns + "

"+ "

"; }) .style("left", (d3.event.pageX + 15) + "px") .style("top", (d3.event.pageY - 200) + "px"); }; let mouseout = () => { Tooltip.transition() .duration(duration) .style("opacity", 0); }; // Building svg let svg = selection .selectAll('svg') .data([data]) .enter() .append('svg') .attr("width", chartWidth) .attr("height", chartHeight) .style("cursor","move"); svg = svg.merge(svg); let g = svg.append("g") .attr("transform", `translate(${width / 2}, ${height / 2})`); let link = g.append("g") .attr("fill", "none") .attr("stroke", "#666") .attr("stroke-width", "1.5px") .selectAll("path") .data(links) .join("path"); let defs = g.append('svg:defs'); defs.append("svg:pattern") .attr("id", "image") .attr("width", 34) .attr("height", 34) .attr("x", -16) .attr("y", -16) .attr("patternUnits", "userSpaceOnUse") .attr("patternUnits", "userSpaceOnUse") .append("svg:image") .attr("xlink:href", "https://user-images.githubusercontent.com/18228016/68896905-56851200-0724-11ea-8a31-b5723aea30fa.png") .attr("width", 34) .attr("height",34) .attr("x", 0) .attr("y", 0); let node = g.append("g") .attr("class", "node") .style("cursor", "pointer") .selectAll("circle") .data(nodes) .join("circle") .attr("fill", d => { if(d.depth === 0) return "url(#image)"; if(d.children){ if(1 === d.depth){ previousColour = "#000000".replace(/0/g,function(){return (~~(Math.random()*16)).toString(16);}); d.data.color = previousColour; return previousColour; }else if(d.depth>1){ d.data.color = d.parent.data.color; return d.parent.data.color; } }else{ switch(d.data.name){ case "Read":return "#48d146"; case "Write":return "#33bbff"; case "Delete":return "#ff3332"; // default: return } } }) .attr("class",(d)=> (!d.children && access.indexOf(d.data.name) === -1)? "blink": null) .attr("stroke", d => (d.depth===0)?null:(!d.children)?"grey":"white") .attr("stroke-width", 2) .attr("r", d => (d.depth===0)?18:(!d.children)?6:12) .on("mouseover", mouseover) .on("mouseout", mouseout) .each(pulse) .call(drag(simulation)); simulation.on("tick", () => { link.attr("d", function(d) { let dx = d.target.x - d.source.x, dy = d.target.y - d.source.y, dr = Math.sqrt(dx * dx + dy * dy); return "M" + d.source.x + "," + d.source.y + "A" + dr + "," + dr + " 1 0,1 " + d.target.x + "," + d.target.y; }); node .attr("cx", d => d.x) .attr("cy", d => d.y); }); //add zoom capabilities let zoomHandler = d3.zoom() .on("zoom",zoomAction); //Zoom functions function zoomAction(){ g.attr("transform", `translate(${width / 2+ d3.event.transform.x}, ${height / 2+ d3.event.transform.y })`+ "scale(" + d3.event.transform.k + ")"); } zoomHandler(svg); } chart.width = function (_) { return arguments.length ? ((width = _) , chart) : width; }; chart.height = function (_) { return arguments.length ? ((height = _) , chart) : height; }; chart.margin = function (_) { return arguments.length ? ((margin = _) , chart) : margin; }; return chart; } 3d:T121b,data=({"name": "root", "children": [ { "name": "folder/", "children": [ { "name": "subfolder1/saplie1.txt", "children": [ {"name": "Read"}, {"name": "Write"}, {"name": "Delete"} ] }, { "name": "subfolder1/saplie3.txt", "children": [ {"name": "Read"}, {"name": "Write"}, {"name": "Delete"} ] }, { "name": "subfolder12/saplie_without_access.txt" }, { "name": "subfolder1/saplie2.txt", "children": [ {"name": "Read"}, {"name": "Delete"} ] }, { "name": "subfolder1/", "children": [ { "name": "subfolder11/saplie1.txt", "children": [ {"name": "Delete"}, {"name": "Write"} ] }, { "name": "subfolder12/saplie2.txt", "children": [ {"name": "Delete"}, {"name": "Write"} ] }, { "name": "subfolder12/saplie_without_access.txt" } ] } ] }, { "name": "folder2/", "children": [ { "name": "subfolder2/saplie1.txt", "children": [ {"name": "Read"}, {"name": "Write"} ] }, { "name": "subfolder23/saplie_without_access.txt" }, { "name": "subfolder2/saplie2.txt", "children": [ {"name": "Read"}, {"name": "Delete"} ] }, { "name": "subfolder2/", "children": [ { "name": "subfolder21/saplie1.txt", "children": [ {"name": "Delete"}, {"name": "Write"} ] } ] } ] }, { "name": "folder3/", "children": [ { "name": "subfolder3/saplie1.txt", "children": [ {"name": "Read"}, {"name": "Write"} ] }, { "name": "subfolder3/saplie2.txt", "children": [ {"name": "Read"}, {"name": "Delete"} ] }, { "name": "subfolder3/", "children": [ { "name": "subfolder31/saplie1.txt", "children": [ {"name": "Delete"}, {"name": "Write"} ] }, { "name": "subfolder32/saplie_without_access.txt" } ] } ] }, { "name": "folder4/", "children": [ { "name": "subfolder4/saplie1.txt", "children": [ {"name": "Read"}, {"name": "Write"} ] }, { "name": "subfolder4/saplie2.txt", "children": [ {"name": "Read"}, {"name": "Delete"} ] }, { "name": "subfolder4/", "children": [ { "name": "subfolder41/saplie1.txt", "children": [ {"name": "Delete"}, {"name": "Write"} ] }, { "name": "subfolder42/saplie_without_access.txt" } ] }, { "name": "subfolder42/", "children": [ { "name": "subfolder421/saplie1.txt", "children": [ {"name": "Delete"}, {"name": "Write"} ] }, { "name": "subfolder422/saplie_without_access.txt" } ] } ] }, { "name": "folder5/", "children": [ { "name": "subfolder5/saplie1.txt", "children": [ {"name": "Read"}, {"name": "Write"} ] }, { "name": "subfolder5/saplie2.txt", "children": [ {"name": "Read"}, {"name": "Delete"} ] }, { "name": "subfolder5/", "children": [ { "name": "subfolder51/saplie1.txt", "children": [ {"name": "Delete"}, {"name": "Write"} ] }, { "name": "subfolder52/saplie_without_access.txt" } ] }, { "name": "subfolder52/", "children": [ { "name": "subfolder521/saplie1.txt", "children": [ {"name": "Delete"}, {"name": "Write"} ] }, { "name": "subfolder522/saplie_without_access.txt" } ] } ] } ] } )3e:[] 38:{"id":"61817e095c1beb92","slug":"force-directed-tree-with-coloring-and-blinking-effect","title":"Force Directed Tree with Coloring and Blinking effect","thumbnail":"9160f41c410e84e4458906d3b2fea2db6e4b9be45fc9fcef3a7c6e0f06c93331","access_level":"public","create_time":"$D2019-11-14T20:49:42.098Z","update_time":"$D2019-11-14T21:35:40.050Z","view_time":null,"first_public_time":"$D2019-11-14T21:36:05.704Z","has_unpublished_edits":null,"fork":false,"stars":13,"starred":false,"owner":{"type":"team","id":"462661a7233ab361","login":"sethuram975351","name":"Sethuram Ramalinga Reddy","avatar_url":"https://avatars-next.observableusercontent.com/a3d81c9b46b184592db1bc3c261ca2e35187d8db1317c67ac19f9af9f8f1024a","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":33,"publish_version":33,"role":null,"authored":false,"authors":[{"type":"individual","id":"dbc78643c3b7b5c0","login":"sethuram975351","name":"Sethuram Ramalinga Reddy","avatar_url":"https://avatars-next.observableusercontent.com/a3d81c9b46b184592db1bc3c261ca2e35187d8db1317c67ac19f9af9f8f1024a","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"dbc78643c3b7b5c0","login":"sethuram975351","name":"Sethuram Ramalinga Reddy","avatar_url":"https://avatars-next.observableusercontent.com/a3d81c9b46b184592db1bc3c261ca2e35187d8db1317c67ac19f9af9f8f1024a","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":13,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Force Directed Tree with Coloring and Blinking effect","cells":[{"id":0,"value":"md`# Force Directed Tree with Coloring and Blinking effect`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"html `

`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":" d3.select('.chart')\n .datum(data)\n .call(customForceDirectedTree);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"stylesheet = html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"d3 = require(\"d3@5\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"$3c","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"customForceDirectedTree = forceDirectedTree();","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":" customForceDirectedTree.width(700).height(700);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"$3d","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W3e","stdlib":"1"}} 33:null