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") .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", nodeRadius) .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("title").text((d) => d.id + ": " + d.label + " - " + d.group); node .append("text") .attr("dy", 4) .attr("dx", -33) .text((d) => d.name); node .append("text") .attr("dy", 16) .attr("dx", -17) .text((d) => d.teilbereich); //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); return div; }48:[] 44:{"id":"601a526ca05c7693","slug":"force-directed-graph","title":"Force-Directed Graph(Network graph) with arrowheads and labels","thumbnail":"b4543103bc01950503a197d39695a24b66d6bc82ee4c7f1efdf87187d8aae292","access_level":"public","create_time":"$D2023-03-01T08:40:40.689Z","update_time":"$D2023-03-01T22:39:55.015Z","view_time":null,"first_public_time":"$D2023-03-01T08:40:40.689Z","has_unpublished_edits":null,"fork":{"id":"3aad44b481bf3d50","slug":"force-directed-graph-network-graph-with-arrowheads-and-lab","title":"Force-Directed Graph(Network graph) with arrowheads and labels","owner":{"id":"8d90643d3480e88e","login":"timi","name":"Tim Riedel"}},"stars":0,"starred":false,"owner":{"type":"team","id":"8a07b1959b7e4d01","login":"whiteand","name":"whiteand","avatar_url":"https://avatars-next.observableusercontent.com/321abde3bcff6c4d510747c6a6e68f506f908e09fc1f2de934738b8aa349e52b","tier":"starter_2024","bio":"Frontend developer","following":false},"version":308,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"55a52a343b60a53d","login":"whiteand","name":"whiteand","avatar_url":"https://avatars-next.observableusercontent.com/321abde3bcff6c4d510747c6a6e68f506f908e09fc1f2de934738b8aa349e52b","tier":null,"bio":"Frontend developer","following":false}],"members":[{"type":"individual","id":"55a52a343b60a53d","login":"whiteand","name":"whiteand","avatar_url":"https://avatars-next.observableusercontent.com/321abde3bcff6c4d510747c6a6e68f506f908e09fc1f2de934738b8aa349e52b","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"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 \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":185,"value":"colorDomain = r.pipe(r.dissoc(\"colors\"), r.values)(colorSchema)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":196,"value":"colorRange = colorSchema.colors","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":205,"value":"colorScale.domain()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":54,"value":"colorScale = d3\n .scaleOrdinal() //=d3.scaleOrdinal(d3.schemeSet2)\n .domain(colorDomain)\n .range(colorRange)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":212,"value":"simulationDistance = 100","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":216,"value":"simulationStrength = -300","pinned":true,"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\n .forceSimulation()\n .force(\n \"link\",\n d3\n .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(simulationDistance)\n )\n .force(\"charge\", d3.forceManyBody().strength(simulationStrength)) // 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":177,"value":"$46","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":209,"value":"nodeRadius = (d) => 20","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"$47","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":183,"value":"colorSchema = ({\n colors: [\"#ff9e6d\", \"#86cbff\", \"#c2e5a0\"],\n Stuttgart: 0,\n Schweiz: 1,\n Oesterreich: 2\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":187,"value":"r = import(\"https://cdn.skypack.dev/ramda@0.28\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W48","stdlib":"1"}} 45:"$44:body" </article></body></html>

3f:null 40:["$","title",null,{"children":"Force-Directed Graph(Network graph) with arrowheads and labels | whiteand | Observable"}] 46:T5f1,data = ({ nodes: [ { id: 1, name: "001-12345-001", teilbereich: "PM/Stgt", label: "KiAN: 70", group: colorSchema.Stuttgart, runtime: 700 }, { id: 2, name: "070-77777-001", teilbereich: "BER/CH", label: "", group: colorSchema.Schweiz, runtime: 0 }, { id: 3, name: "070-77777-002", teilbereich: "BER/CH", label: "KiAN: 25", group: colorSchema.Schweiz, runtime: 250 }, { id: 4, name: "001-34567-001", teilbereich: "IDS/Stgt", label: "", group: colorSchema.Stuttgart, runtime: 0 }, { id: 5, name: "001-34567-001", teilbereich: "IDS/Stgt", label: "", group: colorSchema.Stuttgart, runtime: 0 }, { id: 6, name: "024-98765-001", teilbereich: "BER/A", label: "", group: colorSchema.Oesterreich, runtime: 0 }, { id: 7, name: "001-34567-003", teilbereich: "BER/Stgt", label: "", group: colorSchema.Stuttgart, runtime: 0 } ], links: [ { source: 1, target: 2, type: "30" }, { source: 2, target: 1, type: "70" }, { source: 1, target: 3, type: "60" }, { source: 1, target: 4, type: "50" }, { source: 1, target: 5, type: "40" }, { source: 3, target: 6, type: "25" }, { source: 6, target: 3, type: "25" }, { source: 4, target: 7, type: "30" }, { source: 1, target: 7, type: "20" } ] })47:T1935,chart = { const dataset = data; 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", 50) // 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", 10) .attr("markerHeight", 10) .attr("xoverflow", "visible") .append("svg:path") .attr("d", "M 0,-5 L 10 ,0 L 0,5") .attr("fill", "#999") .style("stroke", "none"); // Initialize the links const link = svg .selectAll(".links") .data(dataset.links) .enter() .append("line") .attr("class", "links") .attr("stroke", "#999") .attr("stroke-opacity", 0.6) .attr("stroke-width", 1) .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") .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", nodeRadius) .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("title").text((d) => d.id + ": " + d.label + " - " + d.group); node .append("text") .attr("dy", 4) .attr("dx", -33) .text((d) => d.name); node .append("text") .attr("dy", 16) .attr("dx", -17) .text((d) => d.teilbereich); //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); return div; }48:[] 44:{"id":"601a526ca05c7693","slug":"force-directed-graph","title":"Force-Directed Graph(Network graph) with arrowheads and labels","thumbnail":"b4543103bc01950503a197d39695a24b66d6bc82ee4c7f1efdf87187d8aae292","access_level":"public","create_time":"$D2023-03-01T08:40:40.689Z","update_time":"$D2023-03-01T22:39:55.015Z","view_time":null,"first_public_time":"$D2023-03-01T08:40:40.689Z","has_unpublished_edits":null,"fork":{"id":"3aad44b481bf3d50","slug":"force-directed-graph-network-graph-with-arrowheads-and-lab","title":"Force-Directed Graph(Network graph) with arrowheads and labels","owner":{"id":"8d90643d3480e88e","login":"timi","name":"Tim Riedel"}},"stars":0,"starred":false,"owner":{"type":"team","id":"8a07b1959b7e4d01","login":"whiteand","name":"whiteand","avatar_url":"https://avatars-next.observableusercontent.com/321abde3bcff6c4d510747c6a6e68f506f908e09fc1f2de934738b8aa349e52b","tier":"starter_2024","bio":"Frontend developer","following":false},"version":308,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"55a52a343b60a53d","login":"whiteand","name":"whiteand","avatar_url":"https://avatars-next.observableusercontent.com/321abde3bcff6c4d510747c6a6e68f506f908e09fc1f2de934738b8aa349e52b","tier":null,"bio":"Frontend developer","following":false}],"members":[{"type":"individual","id":"55a52a343b60a53d","login":"whiteand","name":"whiteand","avatar_url":"https://avatars-next.observableusercontent.com/321abde3bcff6c4d510747c6a6e68f506f908e09fc1f2de934738b8aa349e52b","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"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 \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":185,"value":"colorDomain = r.pipe(r.dissoc(\"colors\"), r.values)(colorSchema)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":196,"value":"colorRange = colorSchema.colors","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":205,"value":"colorScale.domain()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":54,"value":"colorScale = d3\n .scaleOrdinal() //=d3.scaleOrdinal(d3.schemeSet2)\n .domain(colorDomain)\n .range(colorRange)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":212,"value":"simulationDistance = 100","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":216,"value":"simulationStrength = -300","pinned":true,"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\n .forceSimulation()\n .force(\n \"link\",\n d3\n .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(simulationDistance)\n )\n .force(\"charge\", d3.forceManyBody().strength(simulationStrength)) // 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":177,"value":"$46","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":209,"value":"nodeRadius = (d) => 20","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"$47","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":183,"value":"colorSchema = ({\n colors: [\"#ff9e6d\", \"#86cbff\", \"#c2e5a0\"],\n Stuttgart: 0,\n Schweiz: 1,\n Oesterreich: 2\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":187,"value":"r = import(\"https://cdn.skypack.dev/ramda@0.28\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W48","stdlib":"1"}} 45:"$44:body" </article></body></html>