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.name); // Initialize the nodes const node = svg.selectAll(".nodes") .data(dataset.nodes) .enter() .append("g") .attr("class", "nodes") .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). //.on("end", dragended) //end - after an active pointer becomes inactive (on mouseup, touchend or touchcancel). ); node.append("circle") .attr("r", d=> 17)//+ d.runtime/20 ) .style("stroke", "grey") .style("stroke-opacity",0.3) .style("stroke-width", d => d.runtime/10) .style("fill", d => d.color) node.append("title") .text(d => d.tag + ": " + d.name ); 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); //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; } //the targeted node is released when the gesture ends // function dragended(d) { // if (!d3.event.active) simulation.alphaTarget(0); // d.fx = null; // d.fy = null; // console.log("dataset after dragged is ...",dataset); // } // //drawing the legend // const legend_g = svg.selectAll(".legend") // .data(colorScale.domain()) // .enter().append("g") // .attr("transform", (d, i) => `translate(${width},${i * 20})`); // legend_g.append("circle") // .attr("cx", 0) // .attr("cy", 0) // .attr("r", 5) // .attr("fill", colorScale); // legend_g.append("text") // .attr("x", 10) // .attr("y", 5) // .text(d => d); //drawing the second legend const legend_g2 = svg.append("g") //.attr("transform", (d, i) => `translate(${width},${i * 20})`); .attr("transform", `translate(${width}, 120)`); // legend_g2.append("circle") // .attr("r", 5) // .attr("cx", 0) // .attr("cy", 0) // .style("stroke", "grey") // .style("stroke-opacity",0.3) // .style("stroke-width", 15) // .style("fill", "black") // legend_g2.append("text") // .attr("x",15) // .attr("y",0) // .text("long runtime"); // legend_g2.append("circle") // .attr("r", 5) // .attr("cx", 0) // .attr("cy", 20) // .style("stroke", "grey") // .style("stroke-opacity",0.3) // .style("stroke-width", 2) // .style("fill", "black") // legend_g2.append("text") // .attr("x",15) // .attr("y",20) // .text("short runtime"); return div }4a:[] 29:{"id":"76df512e569c7bc8","slug":null,"title":"Force-Directed Graph(Network graph) with arrowheads and labels","thumbnail":"e9a67feb6d611fbbb8bae17cd3dc0017b8bd9a68e624bf735cffb77084f9a575","access_level":"public","create_time":"$D2023-03-22T09:14:25.667Z","update_time":"$D2023-03-22T11:59:16.266Z","view_time":null,"first_public_time":"$D2023-03-22T09:14:25.667Z","has_unpublished_edits":null,"fork":{"id":"3be2b020673c6c71","slug":"force-directed-graph-network-graph-with-arrowheads-and-lab","title":"Force-Directed Graph(Network graph) with arrowheads and labels","owner":{"id":"07eb89e13a02f14c","login":"xianwu","name":""}},"stars":0,"starred":false,"owner":{"type":"team","id":"8c627ab967d2adb8","login":"toliosi","name":"Ioannis Tolios","avatar_url":"https://avatars-next.observableusercontent.com/2fbc3f870e82e5679871dd2ff9dba4fe9c8ca45a31bdade2681a9d81f94d8862","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":130,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"504084d101194a9d","login":"toliosi","name":"Ioannis Tolios","avatar_url":"https://avatars-next.observableusercontent.com/2fbc3f870e82e5679871dd2ff9dba4fe9c8ca45a31bdade2681a9d81f94d8862","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"504084d101194a9d","login":"toliosi","name":"Ioannis Tolios","avatar_url":"https://avatars-next.observableusercontent.com/2fbc3f870e82e5679871dd2ff9dba4fe9c8ca45a31bdade2681a9d81f94d8862","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Force-Directed Graph(Network graph) with arrowheads and labels","cells":[{"id":0,"value":"md`# Force-Directed Graph(Network graph) with arrowheads and labels`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"md`-- SET UP --`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"d3 = require('d3@5')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"margin = ({top: 30, right: 80, bottom: 5, left: 5}); ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"width = 890 - margin.left - margin.right","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"height = 800 - margin.top - margin.bottom","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"html`\n<style> \n\n .links { \n stroke: #999; \n stroke-opacity: 0.6; \n stroke-width: 1px; \n }\n\n text {\n pointer-events: none;\n fill: #000;\n font: 10px sans-serif;\n }\n\n svg{\n border:1px solid #000;\n }\n\n</style>`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"md`-- DATA --`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":54,"value":"colorScale = d3.scaleOrdinal() //=d3.scaleOrdinal(d3.schemeSet2)\n .domain([\"Team A\", \"Team B\", \"Team C\", \"Team D\", \"Team E\"])\n .range(['#ff9e6d', '#86cbff', '#c2e5a0','#fff686','#9e79db'])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"//create a simulation for an array of nodes, and compose the desired forces.\nsimulation = 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(-20)) // 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":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"$49","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4a","stdlib":"1"}} 24:null </article></body></html>

25:["$","title",null,{"children":"Force-Directed Graph(Network graph) with arrowheads and labels | Ioannis Tolios | Observable"}] 49:T2c79,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})`); //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',23) // 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',13) .attr('markerHeight',13) .attr('xoverflow','visible') .append('svg:path') .attr('d', 'M 0,-5 L 10 ,0 L 0,5') .attr('fill', '#999') .style('stroke','none'); //create some data const dataset = { "nodes": [ { "id": "19ff0988-5d6d-4362-9222-9206f4eabd02", "type": "fact", "tag": "agent", "annotatedText": "houdende", "name": "houdende", "color": "#f2c037" }, { "id": "95d8ee17-4d4a-47f0-bbc9-a9c6eb4211a1", "type": "fact", "annotatedText": "bestuursrecht", "name": "bestuursrecht", "tag": "action", "color": "#26a69a" }, { "id": "e4490580-5df1-4ba8-a3b8-b0ba6691639a", "type": "fact", "annotatedText": "Prinses van Oranje-Nassau", "name": "Prinses van Oranje-Nassau", "tag": "object", "color": "#9c27b0" }, { "id": "20636b6e-649b-43b8-ae1d-236831d525ee", "type": "fact", "annotatedText": "genomen", "name": "genomen", "tag": "other", "color": "#31cc3c" }, { "id": "13583420-db08-4ac0-b503-728038485ba5", "type": "fact", "annotatedText": "goedgevonden", "name": "goedgevonden", "tag": "agent", "color": "#f2c037" }, { "id": "0b994d94-dfe5-4913-8e71-1f15a4a3dc5d", "type": "fact", "annotatedText": "goedvinden", "name": "goedvinden", "tag": "action", "color": "#26a69a" }, { "id": "1579bef9-0ae0-4c90-a3d7-81af5e8a4109", "type": "fact", "annotatedText": "verstaan", "name": "verstaan", "tag": "object", "color": "#9c27b0" }, { "id": "a8af99cf-6d65-40bb-b4aa-69b92ef984cf", "type": "fact", "annotatedText": "epalingen", "name": "epalingen", "tag": "other", "color": "#31cc3c" }, { "id": "5944106b-228e-4217-aad9-c006e53d754d", "type": "complexFact", "name": "Complex fact 1", "color": "blue", "operator": "and", "factList": [ "95d8ee17-4d4a-47f0-bbc9-a9c6eb4211a1", "e4490580-5df1-4ba8-a3b8-b0ba6691639a" ] }, { "id": "d91dc2a5-87a6-46a0-920e-f07120cf0965", "type": "act", "name": "example act 2", "color": "blue", "action": "95d8ee17-4d4a-47f0-bbc9-a9c6eb4211a1", "actor": "19ff0988-5d6d-4362-9222-9206f4eabd02", "object": "1579bef9-0ae0-4c90-a3d7-81af5e8a4109", "precondition": "20636b6e-649b-43b8-ae1d-236831d525ee", "recipient": "13583420-db08-4ac0-b503-728038485ba5", "creates": ["1579bef9-0ae0-4c90-a3d7-81af5e8a4109"], "terminates": ["a8af99cf-6d65-40bb-b4aa-69b92ef984cf"] } ], "links": [ { "source": "5944106b-228e-4217-aad9-c006e53d754d", "target": "95d8ee17-4d4a-47f0-bbc9-a9c6eb4211a1", "type": "complexFact", "name": "has conjuctive", "operator": "and" }, { "source": "5944106b-228e-4217-aad9-c006e53d754d", "target": "e4490580-5df1-4ba8-a3b8-b0ba6691639a", "type": "complexFact", "name": "has conjuctive", "operator": "and" }, { "source": "95d8ee17-4d4a-47f0-bbc9-a9c6eb4211a1", "target": "e4490580-5df1-4ba8-a3b8-b0ba6691639a", "type": "complexFact", "name": "and", "operator": "and" }, { "source": "d91dc2a5-87a6-46a0-920e-f07120cf0965", "target": "95d8ee17-4d4a-47f0-bbc9-a9c6eb4211a1", "type": "act", "name": "has action" }, { "source": "d91dc2a5-87a6-46a0-920e-f07120cf0965", "target": "19ff0988-5d6d-4362-9222-9206f4eabd02", "type": "act", "name": "has as an actor" }, { "source": "d91dc2a5-87a6-46a0-920e-f07120cf0965", "target": "1579bef9-0ae0-4c90-a3d7-81af5e8a4109", "type": "act", "name": "has object" }, { "source": "d91dc2a5-87a6-46a0-920e-f07120cf0965", "target": "20636b6e-649b-43b8-ae1d-236831d525ee", "type": "act", "name": "has precondition" }, { "source": "d91dc2a5-87a6-46a0-920e-f07120cf0965", "target": "13583420-db08-4ac0-b503-728038485ba5", "type": "act", "name": "has recipient" }, { "source": "d91dc2a5-87a6-46a0-920e-f07120cf0965", "target": "1579bef9-0ae0-4c90-a3d7-81af5e8a4109", "type": "act", "name": "creates" }, { "source": "d91dc2a5-87a6-46a0-920e-f07120cf0965", "target": "a8af99cf-6d65-40bb-b4aa-69b92ef984cf", "type": "act", "name": "terminates" } ] } console.log("dataset is ...",dataset); // Initialize the links const link = svg.selectAll(".links") .data(dataset.links) .enter() .append("line") .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.name); // Initialize the nodes const node = svg.selectAll(".nodes") .data(dataset.nodes) .enter() .append("g") .attr("class", "nodes") .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). //.on("end", dragended) //end - after an active pointer becomes inactive (on mouseup, touchend or touchcancel). ); node.append("circle") .attr("r", d=> 17)//+ d.runtime/20 ) .style("stroke", "grey") .style("stroke-opacity",0.3) .style("stroke-width", d => d.runtime/10) .style("fill", d => d.color) node.append("title") .text(d => d.tag + ": " + d.name ); 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); //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; } //the targeted node is released when the gesture ends // function dragended(d) { // if (!d3.event.active) simulation.alphaTarget(0); // d.fx = null; // d.fy = null; // console.log("dataset after dragged is ...",dataset); // } // //drawing the legend // const legend_g = svg.selectAll(".legend") // .data(colorScale.domain()) // .enter().append("g") // .attr("transform", (d, i) => `translate(${width},${i * 20})`); // legend_g.append("circle") // .attr("cx", 0) // .attr("cy", 0) // .attr("r", 5) // .attr("fill", colorScale); // legend_g.append("text") // .attr("x", 10) // .attr("y", 5) // .text(d => d); //drawing the second legend const legend_g2 = svg.append("g") //.attr("transform", (d, i) => `translate(${width},${i * 20})`); .attr("transform", `translate(${width}, 120)`); // legend_g2.append("circle") // .attr("r", 5) // .attr("cx", 0) // .attr("cy", 0) // .style("stroke", "grey") // .style("stroke-opacity",0.3) // .style("stroke-width", 15) // .style("fill", "black") // legend_g2.append("text") // .attr("x",15) // .attr("y",0) // .text("long runtime"); // legend_g2.append("circle") // .attr("r", 5) // .attr("cx", 0) // .attr("cy", 20) // .style("stroke", "grey") // .style("stroke-opacity",0.3) // .style("stroke-width", 2) // .style("fill", "black") // legend_g2.append("text") // .attr("x",15) // .attr("y",20) // .text("short runtime"); return div }4a:[] 29:{"id":"76df512e569c7bc8","slug":null,"title":"Force-Directed Graph(Network graph) with arrowheads and labels","thumbnail":"e9a67feb6d611fbbb8bae17cd3dc0017b8bd9a68e624bf735cffb77084f9a575","access_level":"public","create_time":"$D2023-03-22T09:14:25.667Z","update_time":"$D2023-03-22T11:59:16.266Z","view_time":null,"first_public_time":"$D2023-03-22T09:14:25.667Z","has_unpublished_edits":null,"fork":{"id":"3be2b020673c6c71","slug":"force-directed-graph-network-graph-with-arrowheads-and-lab","title":"Force-Directed Graph(Network graph) with arrowheads and labels","owner":{"id":"07eb89e13a02f14c","login":"xianwu","name":""}},"stars":0,"starred":false,"owner":{"type":"team","id":"8c627ab967d2adb8","login":"toliosi","name":"Ioannis Tolios","avatar_url":"https://avatars-next.observableusercontent.com/2fbc3f870e82e5679871dd2ff9dba4fe9c8ca45a31bdade2681a9d81f94d8862","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":130,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"504084d101194a9d","login":"toliosi","name":"Ioannis Tolios","avatar_url":"https://avatars-next.observableusercontent.com/2fbc3f870e82e5679871dd2ff9dba4fe9c8ca45a31bdade2681a9d81f94d8862","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"504084d101194a9d","login":"toliosi","name":"Ioannis Tolios","avatar_url":"https://avatars-next.observableusercontent.com/2fbc3f870e82e5679871dd2ff9dba4fe9c8ca45a31bdade2681a9d81f94d8862","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Force-Directed Graph(Network graph) with arrowheads and labels","cells":[{"id":0,"value":"md`# Force-Directed Graph(Network graph) with arrowheads and labels`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"md`-- SET UP --`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"d3 = require('d3@5')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"margin = ({top: 30, right: 80, bottom: 5, left: 5}); ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"width = 890 - margin.left - margin.right","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"height = 800 - margin.top - margin.bottom","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"html`\n<style> \n\n .links { \n stroke: #999; \n stroke-opacity: 0.6; \n stroke-width: 1px; \n }\n\n text {\n pointer-events: none;\n fill: #000;\n font: 10px sans-serif;\n }\n\n svg{\n border:1px solid #000;\n }\n\n</style>`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"md`-- DATA --`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":54,"value":"colorScale = d3.scaleOrdinal() //=d3.scaleOrdinal(d3.schemeSet2)\n .domain([\"Team A\", \"Team B\", \"Team C\", \"Team D\", \"Team E\"])\n .range(['#ff9e6d', '#86cbff', '#c2e5a0','#fff686','#9e79db'])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"//create a simulation for an array of nodes, and compose the desired forces.\nsimulation = 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(-20)) // 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":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"$49","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4a","stdlib":"1"}} 24:null </article></body></html>