element provides an accessible, short-text description of any SVG container element or graphics element. //Text in a <title> element is not rendered as part of the graphic, but browsers usually display it as a tooltip. link.append("title") .text(d => d.type); const edgepaths = svg.selectAll(".edgepath") //make path go along with the link provide position for link labels .data(dataset.links) .enter() .append('path') .attr('class', 'edgepath') .attr('fill-opacity', 0) .attr('stroke-opacity', 0) .attr('id', function (d, i) {return 'edgepath' + i}) .style("pointer-events", "none"); const edgelabels = svg.selectAll(".edgelabel") .data(dataset.links) .enter() .append('text') .style("pointer-events", "none") .attr('class', 'edgelabel') .attr('id', function (d, i) {return 'edgelabel' + i}) .attr('font-size', 10) .attr('fill', '#aaa'); edgelabels.append('textPath') //To render text along the shape of a <path>, enclose the text in a <textPath> element that has an href attribute with a reference to the <path> element. .attr('xlink:href', function (d, i) {return '#edgepath' + i}) .style("text-anchor", "middle") .style("pointer-events", "none") .attr("startOffset", "50%") .text(d => d.type); // Initialize the nodes const node = svg.selectAll(".nodes") .data(dataset.nodes) .enter() .append("g") .attr("class", "nodes") node.call(d3.drag() //sets the event listener for the specified typenames and returns the drag behavior. .on("start", dragstarted) //start - after a new pointer becomes active (on mousedown or touchstart). .on("drag", dragged) //drag - after an active pointer moves (on mousemove or touchmove). ); node.append("circle") .attr("r", d=> 17)//+ d.runtime/20 ) .attr("id",d=> "circle"+d.id) .style("stroke", "grey") .style("stroke-opacity",0.3) .style("stroke-width", d => d.runtime/10) .style("fill", d => colorScale(d.group)) node.append("title") .text(d => d.id + ": " + d.label + " - " + d.group +", runtime:"+ d.runtime+ "min"); node.append("text") .attr("dy", 4) .attr("dx", -15) .text(d => d.name); node.append("text") .attr("dy",12) .attr("dx", -8) .text(d=> d.runtime); //set up dictionary of neighbors var neighborTarget= {}; for (var i=0; i < dataset.nodes.length; i++ ){ var id = dataset.nodes[i].id; neighborTarget[id] = dataset.links.filter(function(d){ return d.source == id; }).map(function(d){ return d.target; }) } var neighborSource = {}; for (var i=0; i < dataset.nodes.length; i++ ){ var id = dataset.nodes[i].id; neighborSource[id] = dataset.links.filter(function(d){ return d.target == id; }).map(function(d){ return d.source; }) } console.log("neighborSource is ",neighborSource); console.log("neighborTarget is ",neighborTarget); node.selectAll("circle").on("click",function(d){ var active = d.active? false : true // toggle whether node is active , newStroke = active ? "yellow":"grey" , newStrokeIn = active ? "green":"grey" , newStrokeOut = active? "red": "grey" , newOpacity = active? 0.6: 0.3 , subgraphOpacity = active? 0.9:0; subgraph.selectAll("text") .text("Selected: " +d.label) .attr("dy",14) .attr("dx",14) //extract node's id and ids of its neighbors var id =d.id , neighborS = neighborSource[id] , neighborT = neighborTarget[id]; console.log("neighbors is from ",neighborS," to ", neighborT); d3.selectAll("#circle"+id).style("stroke-opacity", newOpacity); d3.selectAll("#circle"+id).style("stroke", newStroke); d3.selectAll("#subgraph").style("opacity",subgraphOpacity) //highlight the current node and its neighbors for (var i =0; i < neighborS.length; i++){ d3.selectAll("#line"+neighborS[i]+id).style("stroke", newStrokeIn); d3.selectAll("#circle"+neighborS[i]).style("stroke-opacity", newOpacity).style("stroke", newStrokeIn); } for (var i =0; i < neighborT.length; i++){ d3.selectAll("#line"+id+neighborT[i]).style("stroke", newStrokeOut); d3.selectAll("#circle"+neighborT[i]).style("stroke-opacity", newOpacity).style("stroke", newStrokeOut); } //update whether or not the node is active d.active =active; }) //Listen for tick events to render the nodes as they update in your Canvas or SVG. simulation .nodes(dataset.nodes) .on("tick", ticked); simulation.force("link") .links(dataset.links); // This function is run at each iteration of the force algorithm, updating the nodes position (the nodes data array is directly manipulated). 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("transform", d => `translate(${d.x},${d.y})`); edgepaths.attr('d', d => 'M ' + d.source.x + ' ' + d.source.y + ' L ' + d.target.x + ' ' + d.target.y); } //When the drag gesture starts, the targeted node is fixed to the pointer //The simulation is temporarily “heated” during interaction by setting the target alpha to a non-zero value. function dragstarted(d) { if (!d3.event.active) simulation.alphaTarget(0.3).restart();//sets the current target alpha to the specified number in the range [0,1]. d.fy = d.y; //fx - the node’s fixed x-position. Original is null. d.fx = d.x; //fy - the node’s fixed y-position. Original is null. } //When the drag gesture starts, the targeted node is fixed to the pointer function dragged(d) { d.fx = d3.event.x; d.fy = d3.event.y; } return div } 46:[{"id":"6b8c41d3bed39ea93d8f2c1d098b613a716f532ab66987028a06be392dcb55089d133989c04fd1efd9751e43e946d48e88f893a232c219c696fc72447a3b3072","href":"https://static.observableusercontent.com/files/6b8c41d3bed39ea93d8f2c1d098b613a716f532ab66987028a06be392dcb55089d133989c04fd1efd9751e43e946d48e88f893a232c219c696fc72447a3b3072","name":"superstore.json","type":"application/json","lastModified":1675863414023.183,"size":24632}] 43:{"id":"0652da0884e0dfcd","slug":null,"title":"Network graph (Tooltip and modal)","thumbnail":"71e4b925f51e6785317529ee4ecdea2c643e368de906b0319c9fcdee9133458d","access_level":"public","create_time":"$D2023-02-08T13:35:40.606Z","update_time":"$D2023-02-13T18:28:36.854Z","view_time":null,"first_public_time":"$D2023-02-08T14:04:15.642Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"fb6252118fb3eeae","login":"dunsinagb","name":"Oluwadunsin Agbolabori","avatar_url":"https://avatars-next.observableusercontent.com/e8e872ba7261842280a371d132a5b8377a0b276674dfcd5683b41632849ddc82","tier":"starter_2024","bio":"","following":false},"version":56,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"bec5d5075fb33f10","login":"dunsinagb","name":"Oluwadunsin Agbolabori","avatar_url":"https://avatars-next.observableusercontent.com/d8b29895f54d9ff0206d113485dab883331c22549b66a1ea300d273ea3a779dd","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"bec5d5075fb33f10","login":"dunsinagb","name":"Oluwadunsin Agbolabori","avatar_url":"https://avatars-next.observableusercontent.com/d8b29895f54d9ff0206d113485dab883331c22549b66a1ea300d273ea3a779dd","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Network graph (Tooltip and modal)","cells":[{"id":0,"value":"# Network graph (Tooltip and modal)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":8,"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":10,"value":"margin = ({top: 30, right: 80, bottom: 5, left: 5}); ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"height = 1000","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"colorScale = d3.scaleOrdinal(d3.schemeCategory10)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"import {Swatches} from \"@d3/color-legend\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":44,"value":"import {howto} from \"@d3/example-components\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"simulation = d3.forceSimulation()\n .force(\"link\", d3.forceLink() // This force provides links between nodes\n .id(d => d.id) // This sets the node id accessor to the specified function. If not specified, will default to the index of a node.\n .distance(120)\n ) \n .force(\"charge\", d3.forceManyBody().strength(-700)) // This adds repulsion (if it's negative) between nodes. \n .force(\"center\", d3.forceCenter(width / 2, height / 2)); // This force attracts nodes to the center of the svg area","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"dataset = FileAttachment(\"superstore.json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"$45","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W46","stdlib":"1"}} 44:"$43:body" </article></body></html>

3e:null 3f:["$","title",null,{"children":"Network graph (Tooltip and modal) | Oluwadunsin Agbolabori | Observable"}] 45:T2087,myChart={ const div = html`

`; const svg = d3.select(div) .append("svg") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom) .append("g") .attr("transform", `translate(${margin.left},${margin.top})`); const subgraphWidth = width*2/8; const subgraphHeight = height*1/5; const subgraph = svg.append("g") .attr("id", "subgraph") .attr("transform", `translate(${width - subgraphWidth - 0.5}, 0)`); subgraph.append("text") .style("font-size","16px") //appending little triangles, path object, as arrowhead //The element is used to store graphical objects that will be used at a later time //The element defines the graphic that is to be used for drawing arrowheads or polymarkers on a given , , or element. svg.append('defs').append('marker') .attr("id",'arrowhead') .attr('viewBox','-0 -5 10 10') //the bound of the SVG viewport for the current SVG fragment. defines a coordinate system 10 wide and 10 high starting on (0,-5) .attr('refX',24) // x coordinate for the reference point of the marker. If circle is bigger, this need to be bigger. .attr('refY',0) .attr('orient','auto') .attr('markerWidth',6) .attr('markerHeight',6) .attr('xoverflow','visible') .append('svg:path') .attr('d', 'M 0,-5 L 10 ,0 L 0,5') .attr('fill', '#999') .style('stroke','none'); svg.append("text") .text("Superstore Network Graph") .attr("text-anchor","middle") .attr("x",width/2) .style("font-size","20px") // Initialize the links const link = svg.selectAll(".links") .data(dataset.links) .enter() .append("line") .attr("class", "links") .attr("stroke","#999") .attr("stroke-width","2px") .style("opacity", 0.8) .attr("id",d=> "line"+d.source+d.target) .attr("class", "links") .attr('marker-end','url(#arrowhead)') //The marker-end attribute defines the arrowhead or polymarker that will be drawn at the final vertex of the given shape. //The element provides an accessible, short-text description of any SVG container element or graphics element. //Text in a <title> element is not rendered as part of the graphic, but browsers usually display it as a tooltip. link.append("title") .text(d => d.type); const edgepaths = svg.selectAll(".edgepath") //make path go along with the link provide position for link labels .data(dataset.links) .enter() .append('path') .attr('class', 'edgepath') .attr('fill-opacity', 0) .attr('stroke-opacity', 0) .attr('id', function (d, i) {return 'edgepath' + i}) .style("pointer-events", "none"); const edgelabels = svg.selectAll(".edgelabel") .data(dataset.links) .enter() .append('text') .style("pointer-events", "none") .attr('class', 'edgelabel') .attr('id', function (d, i) {return 'edgelabel' + i}) .attr('font-size', 10) .attr('fill', '#aaa'); edgelabels.append('textPath') //To render text along the shape of a <path>, enclose the text in a <textPath> element that has an href attribute with a reference to the <path> element. .attr('xlink:href', function (d, i) {return '#edgepath' + i}) .style("text-anchor", "middle") .style("pointer-events", "none") .attr("startOffset", "50%") .text(d => d.type); // Initialize the nodes const node = svg.selectAll(".nodes") .data(dataset.nodes) .enter() .append("g") .attr("class", "nodes") node.call(d3.drag() //sets the event listener for the specified typenames and returns the drag behavior. .on("start", dragstarted) //start - after a new pointer becomes active (on mousedown or touchstart). .on("drag", dragged) //drag - after an active pointer moves (on mousemove or touchmove). ); node.append("circle") .attr("r", d=> 17)//+ d.runtime/20 ) .attr("id",d=> "circle"+d.id) .style("stroke", "grey") .style("stroke-opacity",0.3) .style("stroke-width", d => d.runtime/10) .style("fill", d => colorScale(d.group)) node.append("title") .text(d => d.id + ": " + d.label + " - " + d.group +", runtime:"+ d.runtime+ "min"); node.append("text") .attr("dy", 4) .attr("dx", -15) .text(d => d.name); node.append("text") .attr("dy",12) .attr("dx", -8) .text(d=> d.runtime); //set up dictionary of neighbors var neighborTarget= {}; for (var i=0; i < dataset.nodes.length; i++ ){ var id = dataset.nodes[i].id; neighborTarget[id] = dataset.links.filter(function(d){ return d.source == id; }).map(function(d){ return d.target; }) } var neighborSource = {}; for (var i=0; i < dataset.nodes.length; i++ ){ var id = dataset.nodes[i].id; neighborSource[id] = dataset.links.filter(function(d){ return d.target == id; }).map(function(d){ return d.source; }) } console.log("neighborSource is ",neighborSource); console.log("neighborTarget is ",neighborTarget); node.selectAll("circle").on("click",function(d){ var active = d.active? false : true // toggle whether node is active , newStroke = active ? "yellow":"grey" , newStrokeIn = active ? "green":"grey" , newStrokeOut = active? "red": "grey" , newOpacity = active? 0.6: 0.3 , subgraphOpacity = active? 0.9:0; subgraph.selectAll("text") .text("Selected: " +d.label) .attr("dy",14) .attr("dx",14) //extract node's id and ids of its neighbors var id =d.id , neighborS = neighborSource[id] , neighborT = neighborTarget[id]; console.log("neighbors is from ",neighborS," to ", neighborT); d3.selectAll("#circle"+id).style("stroke-opacity", newOpacity); d3.selectAll("#circle"+id).style("stroke", newStroke); d3.selectAll("#subgraph").style("opacity",subgraphOpacity) //highlight the current node and its neighbors for (var i =0; i < neighborS.length; i++){ d3.selectAll("#line"+neighborS[i]+id).style("stroke", newStrokeIn); d3.selectAll("#circle"+neighborS[i]).style("stroke-opacity", newOpacity).style("stroke", newStrokeIn); } for (var i =0; i < neighborT.length; i++){ d3.selectAll("#line"+id+neighborT[i]).style("stroke", newStrokeOut); d3.selectAll("#circle"+neighborT[i]).style("stroke-opacity", newOpacity).style("stroke", newStrokeOut); } //update whether or not the node is active d.active =active; }) //Listen for tick events to render the nodes as they update in your Canvas or SVG. simulation .nodes(dataset.nodes) .on("tick", ticked); simulation.force("link") .links(dataset.links); // This function is run at each iteration of the force algorithm, updating the nodes position (the nodes data array is directly manipulated). 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("transform", d => `translate(${d.x},${d.y})`); edgepaths.attr('d', d => 'M ' + d.source.x + ' ' + d.source.y + ' L ' + d.target.x + ' ' + d.target.y); } //When the drag gesture starts, the targeted node is fixed to the pointer //The simulation is temporarily “heated” during interaction by setting the target alpha to a non-zero value. function dragstarted(d) { if (!d3.event.active) simulation.alphaTarget(0.3).restart();//sets the current target alpha to the specified number in the range [0,1]. d.fy = d.y; //fx - the node’s fixed x-position. Original is null. d.fx = d.x; //fy - the node’s fixed y-position. Original is null. } //When the drag gesture starts, the targeted node is fixed to the pointer function dragged(d) { d.fx = d3.event.x; d.fy = d3.event.y; } return div } 46:[{"id":"6b8c41d3bed39ea93d8f2c1d098b613a716f532ab66987028a06be392dcb55089d133989c04fd1efd9751e43e946d48e88f893a232c219c696fc72447a3b3072","href":"https://static.observableusercontent.com/files/6b8c41d3bed39ea93d8f2c1d098b613a716f532ab66987028a06be392dcb55089d133989c04fd1efd9751e43e946d48e88f893a232c219c696fc72447a3b3072","name":"superstore.json","type":"application/json","lastModified":1675863414023.183,"size":24632}] 43:{"id":"0652da0884e0dfcd","slug":null,"title":"Network graph (Tooltip and modal)","thumbnail":"71e4b925f51e6785317529ee4ecdea2c643e368de906b0319c9fcdee9133458d","access_level":"public","create_time":"$D2023-02-08T13:35:40.606Z","update_time":"$D2023-02-13T18:28:36.854Z","view_time":null,"first_public_time":"$D2023-02-08T14:04:15.642Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"fb6252118fb3eeae","login":"dunsinagb","name":"Oluwadunsin Agbolabori","avatar_url":"https://avatars-next.observableusercontent.com/e8e872ba7261842280a371d132a5b8377a0b276674dfcd5683b41632849ddc82","tier":"starter_2024","bio":"","following":false},"version":56,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"bec5d5075fb33f10","login":"dunsinagb","name":"Oluwadunsin Agbolabori","avatar_url":"https://avatars-next.observableusercontent.com/d8b29895f54d9ff0206d113485dab883331c22549b66a1ea300d273ea3a779dd","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"bec5d5075fb33f10","login":"dunsinagb","name":"Oluwadunsin Agbolabori","avatar_url":"https://avatars-next.observableusercontent.com/d8b29895f54d9ff0206d113485dab883331c22549b66a1ea300d273ea3a779dd","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Network graph (Tooltip and modal)","cells":[{"id":0,"value":"# Network graph (Tooltip and modal)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":8,"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":10,"value":"margin = ({top: 30, right: 80, bottom: 5, left: 5}); ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"height = 1000","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"colorScale = d3.scaleOrdinal(d3.schemeCategory10)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"import {Swatches} from \"@d3/color-legend\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":44,"value":"import {howto} from \"@d3/example-components\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"simulation = d3.forceSimulation()\n .force(\"link\", d3.forceLink() // This force provides links between nodes\n .id(d => d.id) // This sets the node id accessor to the specified function. If not specified, will default to the index of a node.\n .distance(120)\n ) \n .force(\"charge\", d3.forceManyBody().strength(-700)) // This adds repulsion (if it's negative) between nodes. \n .force(\"center\", d3.forceCenter(width / 2, height / 2)); // This force attracts nodes to the center of the svg area","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"dataset = FileAttachment(\"superstore.json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"$45","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W46","stdlib":"1"}} 44:"$43:body" </article></body></html>