23:null 24:["$","title",null,{"children":"Constrained Graph | Kun-Ting Chen | Observable"}] 29:[] 27:{"id":"063f3b37a3591da2","slug":"constrained-graph/2","title":"Constrained Graph","thumbnail":"fdc6696c278eda25af95800b859662e1f9e31eedb0898916c9e00f091adbd3f7","access_level":"public","create_time":"$D2019-07-03T15:02:38.327Z","update_time":"$D2022-11-23T11:52:03.852Z","view_time":null,"first_public_time":"$D2019-07-03T15:03:21.415Z","has_unpublished_edits":null,"fork":true,"stars":3,"starred":false,"owner":{"type":"team","id":"be54816255dcd07b","login":"kun-ting","name":"Kun-Ting Chen","avatar_url":"https://avatars-next.observableusercontent.com/a10ea236a5655729b1e9ef3d57ad0e1d5f87e4086d7359d894dd2c907031fc6a","tier":"starter_2024","bio":"I am interested in Information visualisation, graph drawing and layout algorithms. I am also interested in full-stack software development & agile software development process."},"version":866,"publish_version":866,"role":null,"authored":false,"authors":[{"type":"individual","id":"2986ef7c11c54a76","login":"kun-ting","name":"Kun-Ting Chen","avatar_url":"https://avatars-next.observableusercontent.com/a10ea236a5655729b1e9ef3d57ad0e1d5f87e4086d7359d894dd2c907031fc6a","tier":null,"bio":"I am interested in Information visualisation, graph drawing and layout algorithms. I am also interested in full-stack software development & agile software development process."}],"members":[{"type":"individual","id":"2986ef7c11c54a76","login":"kun-ting","name":"Kun-Ting Chen","avatar_url":"https://avatars-next.observableusercontent.com/a10ea236a5655729b1e9ef3d57ad0e1d5f87e4086d7359d894dd2c907031fc6a","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Constrained Graph","cells":[{"id":0,"value":"md`# Constrained Graph`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":791,"value":"md`This is a constrained graph based on [D3](https://d3js.org/) and [WebCola](https://ialab.it.monash.edu/webcola/) in an Observable notebook.\n\nAnother example of adding constraint to a layout can be found in [CoLa](https://observablehq.com/@tgdwyer/hello-cola-with-a-constraint). \n\nYou can change number of vertices or pan the graph. Graph cell reacts when number of vertices changes, while nodeGroup and link reacts on change of graph instance.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":480,"value":"viewof numberOfNodes = {\n let form = html`\n `;\n form.oninput = () => {\n let inputNumberOfNodes = form.textIputNumberOfNodes.value;\n let numberOfNodes = 0; \n numberOfNodes = inputNumberOfNodes; \n form.value = numberOfNodes; \n };\n form.oninput();\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":209,"value":"visual = {\n let svg = d3.select(DOM.svg(configuration.svgWidth, configuration.svgHeight));\n svg.style(\"border\", \"2px solid black\");\n svg.attr(\"id\", \"mainSvg\");\n\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":790,"value":"md`Here is a software relationship diagram of this notebook. It is interesting to explore the dependency flow and improve it by avoiding to introduce unnecessary dependencies.\n\n

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":797,"value":"md`The dependency graph is generated from [Notebook Visualizer](https://observablehq.com/@severo/notebook-visualizer-with-from).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":530,"value":"graph = {\n let graph = {\n nodes: [],\n links: []\n };\n\n for (let i = 0; i < numberOfNodes; i++) {\n graph.nodes.push({\n id: i,\n name: i + 1 + \"\",\n width: 60,\n height: 40,\n visible: true,\n relativeX: 0,\n relativeY: 5\n });\n\n for (let j = i + 1; j < numberOfNodes; j++) {\n graph.links.push({ source: i, target: j, visible: true });\n }\n }\n svgs.selectAll(\".cleanOnInit\").remove();\n return graph;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":592,"value":"svgs = d3.select(visual)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":600,"value":"color = 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":583,"value":"nodeGroup = { \n let nodeGroup = svgs.selectAll(\".draggableNodeGroup\")\n .data(graph.nodes)\n .enter().append(\"g\")\n .attr(\"class\", \"draggableNodeGroup cleanOnInit\")\n .style(\"visibility\", function (d) {\n return d.visible == true ? \"visible\" : \"hidden\";\n })\n .attr(\"draggable\", true)\n .call(d3cola.drag()\n .on(\"start\", (d) => {\n d.fx = d.x;\n d.fy = d.y;\n })\n .on(\"drag\", (d) => {\n d.fx = d3.event.x;\n d.fy = d3.event.y;\n })\n .on(\"end\", (d) => {\n d.fx = null;\n d.fy = null;\n })\n );\n return nodeGroup;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":585,"value":"node = {\n let node = nodeGroup\n .append(\"circle\")\n .attr(\"class\", \"node cleanOnInit\")\n .attr(\"r\", 20)\n .attr(\"cx\", 0)\n .attr(\"cy\", 0)\n .attr(\"stroke-width\", \"4px\")\n .attr(\"stroke\", \"black\") \n .style(\"fill\", function (d) { return color(d.id); }); \n\n node.append(\"title\")\n .text(function (d) { return d.name; });\n\n nodeGroup.append(\"text\")\n .attr(\"class\", \"label cleanOnInit\")\n .text(function (d) { return d.name; }) \n .attr(\"x\", function (d) {\n return d.relativeX;\n })\n .attr(\"y\", function (d) {\n var that = this;\n return d.relativeY;\n });\nreturn node;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":587,"value":"link = {\n let link = svgs.selectAll(\".link\")\n .data(graph.links)\n .enter().append(\"line\")\n .attr(\"class\", \"link cleanOnInit\")\n .style(\"visibility\", function (d) {\n return \"visible\";\n }); \n return link;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":104,"value":"configuration = new Object(\n {\n \"originX\": 0, \n \"originY\": 0, \n \"dragStartX\":0, \n \"dragStartY\": 0,\n \"width\": 30000,//Number.MAX_SAFE_INTEGER,\n \"height\": 30000,//Number.MAX_SAFE_INTEGER\n \"svgWidth\": 600,\n \"svgHeight\": 600 \n });","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":76,"value":"d3cola = cola\n .d3adaptor(d3)\n .linkDistance(240)\n .avoidOverlaps(true)\n .size([configuration.svgWidth, configuration.svgHeight])\n .nodes(graph.nodes)\n .links(graph.links)\n .on(\"tick\", () => {\n updateRender();\n })\n .start()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":738,"value":"svgGroup = {\n let svgGroup = svgs.selectAll(\".draggableGroup\")\n .data([{\"x\": 0, \"y\": 0}])\n .enter()\n .append(\"g\")\n .attr(\"class\", \"draggableGroup\" + \" cleanOnInit\")\n // .attr(\"class\", \"draggableGroup\")\n .attr(\"id\", \"parentGroup\")\n .attr(\"draggable\", true)\n .lower()\n .call(d3.drag()\n .on('start', () => {\n configuration.dragStartX = d3.event.x;\n configuration.dragStartY = d3.event.y; \n })\n .on(\"drag\", () => {\n //apply transforma to graph\n transformGroup(d3.event.x - configuration.dragStartX, d3.event.y - configuration.dragStartY);\n updateRender();\n configuration.dragStartX = d3.event.x;\n configuration.dragStartY = d3.event.y;\n })\n .on(\"end\", () => {\n //apply transforma to graph\n transformGroup(d3.event.x - configuration.dragStartX, d3.event.y - configuration.dragStartY);\n updateRender();\n configuration.dragStartX = d3.event.x;\n configuration.dragStartY = d3.event.y;\n })\n );\n return svgGroup;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":745,"value":"rectangle = {\n let rectangle = svgGroup\n .selectAll(\".background\")\n .data([{\"x\": 0, \"y\": 0}])\n .enter()\n .append(\"rect\")\n .attr(\"x\", configuration.originX)\n .attr(\"y\", configuration.originY)\n .attr(\"rx\", 0)\n .attr(\"ry\", 0)\n .attr(\"width\", configuration.width)\n .attr(\"height\", configuration.height)\n .attr(\"class\", \"background\" + \" cleanOnInit\")\n .style(\"stroke\", \"black\")\n .style(\"fill\", \"white\")\n .lower();\n return rectangle;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":756,"value":"transformGroup = (offsetX, offsetY) => {\n console.log(\"graph.length: \"+graph.nodes.length);\n for (let node of graph.nodes){\n node.x += offsetX;\n node.y += offsetY;\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":80,"value":"function updateRender(){\n let svg = d3.select(\"#mainSvg\");\n\n let nodeGroup = svg.selectAll(\".draggableNodeGroup\");\n let link = svg.selectAll(\".link\");\n let label = svg.selectAll(\".label\");\n\n //update\n nodeGroup.attr(\"transform\", function (d) { \n return \"translate(\"+ (d.x) +\",\"+ (d.y)+\")\"; \n });\n\n link.attr(\"x1\", function (d) { return (d.source.x); })\n .attr(\"y1\", function (d) { return (d.source.y); })\n .attr(\"x2\", function (d) { return (d.target.x); })\n .attr(\"y2\", function (d) { return (d.target.y); })\n .style(\"visibility\", function (d) {\n return d.visible == true ? \"visible\" : \"hidden\";\n });\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"html`\n`\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"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":57,"value":"cola = require(\"webcola@3/WebCola/cola.min.js\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W29","stdlib":"1"}} 28:"$27:body"