2e:null 2f:["$","title",null,{"children":"Untitled | Neil Turley | Observable"}] 34:T192f,{ var nodes = [ { input:0, output:1, name:'A', rank:0, }, { input:1, output:2, name:'B', rank:1 }, { input:2, output:0, name:'C', rank:2 }, ]; var wires = [ { driver:2, rider:0 }, { driver:0, rider:1 }, { driver:1, rider:2 } ]; var viewer = DOM.svg(600, 300); viewer.appendChild(html` `); var nodeViews = d3.select(viewer).selectAll('.node') .data(nodes) .enter().append('g') .attr('class','node') .attr('transform',function(d){return 'translate('+(160+d.rank*160)+','+140+')';}) nodeViews.append('rect') .attr('class','nodeBody') .attr('x',-40) .attr('y',-40) .attr('width',80) .attr('height',80); nodeViews.append('text') .attr('class','label') .text(function(d){return d.name}) .attr('y',14); var wireViews = d3.select(viewer).selectAll('.net') .data(wires) .enter().append('g') .attr('class','net'); wireViews .style('stroke',function(d){if (nodes[d.driver].rank .nodeBody2 { stroke:#000; stroke-width:2; } `); var viewer = d3.select(v); var nodeViews = viewer.selectAll('.nodeBody2') .data(nodeList) .enter().append('rect') .attr('class','nodeBody2') .attr('width',80) .attr('height',function(node){return maxPorts(node)*40+40;}) .attr('x',100) .attr('y',function(node){return node.row*200+100;}) .style('fill','white'); var nodeLabels = viewer.selectAll('.label') .data(nodeList) .enter().append('text') .attr('class','label') .text(function(d){return d.label}) .attr('x',140) .attr('y',function(node){return node.row*200+150;}) var wireViews = viewer.selectAll('.wire') .data(wires) .enter().append('line') .attr('class','wire') .attr('x1',180) .attr('x2',180) .attr('y1',function(wire){return nodeList[wire.inNode].row*200+140+wire.inPort*40}) .attr('y2',function(wire){return nodeList[wire.outNode].row*200+140+wire.outPort*40}) function startReverseDfsAnimation() { setTimeout(reverseDfsAnimation,1000); } function reverseDfsAnimation(){ // t0 set n3 red nodeViews.transition() .duration(500) .style('fill',function(node,index){if (index==3) return 'red'; return 'white';}) // t1 move n5 to 250 .transition() .attr('x',function(node, index){ if (index==1) return 300; if (index==2) return 500; if (index==4) return 300; if (index==3) return 700; if (index==5) return 500; return 100; }) //t2 move n4 to 250 .transition() .attr('x',function(node, index){ if (index==1) return 300; if (index==2) return 500; if (index==4) return 500; if (index==3) return 700; if (index==5) return 500; return 100; }) // t3 color n4 red .transition() .style('fill',function(node,index){if (index==3||index==4) return 'red'; return 'white';}) // t4 move n0 to 150 .transition() .attr('x',function(node, index){ if (index==1) return 300; if (index==2) return 500; if (index==4) return 500; if (index==3) return 700; if (index==5) return 500; return 300; }) //t5 color n4 white .transition() .style('fill', function(node, index) { if (index==3) return 'red'; return 'white'; }) //t6 color n2 red .transition() .style('fill',function(node,index){if (index==3||index==2) return 'red'; return 'white';}) //t7 color n1 red .transition() .style('fill',function(node,index){if (index==3||index==2||index==1) return 'red'; return 'white';}) //t8 move n0 50 .transition() .attr('x',function(node, index){ if (index==1) return 300; if (index==2) return 500; if (index==4) return 500; if (index==3) return 700; if (index==5) return 500; return 100; }) // reset color .transition() .style('fill','white') .on('end',startAnimation); // t0 set n3 red nodeLabels.transition() .duration(500) .style('fill',function(node,index){if (index==3) return 'white'; return 'black';}) // t1 move n5 to 250 .transition() .attr('x',function(node, index){ if (index==1) return 340; if (index==2) return 540; if (index==4) return 340; if (index==3) return 740; if (index==5) return 540; return 140; }) //t2 move n4 to 250 .transition() .attr('x',function(node, index){ if (index==1) return 340; if (index==2) return 540; if (index==4) return 540; if (index==3) return 740; if (index==5) return 540; return 140; }) // t3 color n4 red .transition() .style('fill',function(node,index){if (index==3||index==4) return 'white'; return 'black';}) // t4 move n0 to 150 .transition() .attr('x',function(node, index){ if (index==1) return 340; if (index==2) return 540; if (index==4) return 540; if (index==3) return 740; if (index==5) return 540; return 340; }) //t5 color n4 white .transition() .style('fill',function(node,index){if (index==3) return 'white'; return 'black';}) //t6 color n2 red .transition() .style('fill',function(node,index){if (index==3||index==2) return 'white'; return 'black';}) //t7 color n1 red .transition() .style('fill',function(node,index){if (index==3||index==2||index==1) return 'white'; return 'black';}) //t8 move n0 50 .transition() .attr('x',function(node, index){ if (index==1) return 340; if (index==2) return 540; if (index==4) return 540; if (index==3) return 740; if (index==5) return 540; return 140; }) // reset color .transition() .style('fill','black') .on('end', startAnimation); // t0 set n3 red wireViews.transition() .duration(500) .style('stroke',function(wire,index){if (index==5) return 'red'; return 'black';}) // t1 move n5 to 250 .transition() .attr('x1',function(wire, index){ if (index==3||index==5) return 580; if (index==4||index==2) return 380; return 180;}) //t2 move n4 to 250 .transition() .style('stroke',function(wire,index){if (index==4) return 'red'; return 'black';}) .attr('x1',function(wire, index){ if (index==3||index==4||index==5) return 580; if (index==2) return 380; return 180;}) .attr('x2',function(wire, index){ if (index==1||index==2) return 500; if (index==3||index==4||index==5) return 700; if (index==0) return 300; return 180; }) // t3 color n4 red .transition() .style('stroke',function(wire,index){if (index==1) return 'red'; return 'black';}) // t4 move n0 to 150 .transition() .attr('x1',function(wire, index){ if (index==3||index==4||index==5) return 580; if (index==2) return 380; return 380;}) .attr('x2',function(wire, index){ if (index==1||index==2) return 500; if (index==3||index==4||index==5) return 700; if (index==0) return 300; return 180; }) //t5 color n4 white .transition() .style('stroke','black') //t6 color n2 red .transition() .style('stroke',function(wire,index){if (index==2) return 'red'; return 'black';}) //t7 color n1 red .transition() .style('stroke',function(wire,index){if (index==0) return 'red'; return 'black';}) //t8 move n0 50 .transition() .attr('x1',function(wire, index){ if (index==3||index==4||index==5) return 580; if (index==2) return 380; return 180;}) .attr('x2',function(wire, index){ if (index==1||index==2) return 500; if (index==3||index==4||index==5) return 700; if (index==0) return 300; return 180; }) // reset color .transition() .style('stroke','black') } function dfsAnimation() { // t0 setup nodeViews.transition() .duration(500) .attr('x',100) //turn 5 blue, t1 .transition() .style('fill',function(node,index){if (index==5) return 'blue'; return 'white';}) //move 3, t2 .transition() .attr('x',function(node, index){if (index==3) return 300; return 100;}) // turn 5 white, t3 .transition() .style('fill','white') // turn 0 blue, t4 .transition() .style('fill',function(node,index){if (index==0) return 'blue'; return 'white';}) //move 4, t5 .transition() .attr('x',function(node, index){if (index==4 || index==3) return 300; return 100;}) //turn 4 blue, t6 .transition() .style('fill',function(node,index){if (index==0 || index==4) return 'blue'; return 'white';}) // move 3 further, t7 .transition() .attr('x',function(node, index){ if (index==4) return 300; if (index==3) return 500; return 100; }) // turn 4 white, t8 .transition() .style('fill',function(node,index){if (index==0) return 'blue'; return 'white';}) //move 1, t9 .transition() .attr('x',function(node, index){ if (index==1) return 300; if (index==4) return 300; if (index==3) return 500; return 100; }) // turn 1 blue, t10 .transition() .style('fill',function(node,index){if (index==0||index==1) return 'blue'; return 'white';}) // move 2, t11 .transition() .attr('x',function(node, index){ if (index==1) return 300; if (index==2) return 500; if (index==4) return 300; if (index==3) return 500; return 100; }) // turn 2 blue, t12 .transition() .style('fill',function(node,index){if (index==0||index==1||index==2) return 'blue'; return 'white';}) // move 3 further, t13 .transition() .attr('x',function(node, index){ if (index==1) return 300; if (index==2) return 500; if (index==4) return 300; if (index==3) return 700; return 100; }) .transition() .style('fill', 'white') .on('end', function() {startReverseDfsAnimation()}); // t0 setup nodeLabels.transition() .duration(500) .attr('x',140) //turn 5 blue, t1 .transition() .style('fill',function(node,index){if (index==5) return 'white'; return 'black';}) //move 3, t2 .transition() .attr('x',function(node, index){if (index==3) return 340; return 140;}) // turn 5 white, t3 .transition() .style('fill','black') // turn 0 blue, t4 .transition() .style('fill',function(node,index){if (index==0) return 'white'; return 'black';}) //move 4, t5 .transition() .attr('x',function(node, index){if (index==4 || index==3) return 340; return 140;}) //turn 4 blue, t6 .transition() .style('fill',function(node,index){if (index==0 || index==4) return 'white'; return 'black';}) // move 3 further, t7 .transition() .attr('x',function(node, index){ if (index==4) return 340; if (index==3) return 540; return 140; }) // turn 4 white, t8 .transition() .style('fill',function(node,index){if (index==0) return 'white'; return 'black';}) //move 1, t9 .transition() .attr('x',function(node, index){ if (index==1) return 340; if (index==4) return 340; if (index==3) return 540; return 140; }) // turn 1 blue, t10 .transition() .style('fill',function(node,index){if (index==0||index==1) return 'white'; return 'black';}) // move 2, t11 .transition() .attr('x',function(node, index){ if (index==1) return 340; if (index==2) return 540; if (index==4) return 340; if (index==3) return 540; return 140; }) // turn 2 blue, t12 .transition() .style('fill',function(node,index){if (index==0||index==1||index==2) return 'white'; return 'black';}) // move 3 further, t13 .transition() .attr('x',function(node, index){ if (index==1) return 340; if (index==2) return 540; if (index==4) return 340; if (index==3) return 740; return 140; }) .transition() .style('fill','black') //t0 setup wireViews.transition() .duration(500) .attr('x1',180) .attr('x2',180) //turn 5 blue, t1 .transition() .style('stroke',function(wire,index){if (index==5) return 'blue'; return 'black';}) //move 3,4,5, t2 .transition() .attr('x2',function(wire, index){if (index==3||index==4||index==5) return 300; return 180;}) // turn 5 black, t3 .transition() .style('stroke','black') // turn 1 blue, t4 .transition() .style('stroke',function(wire,index){if (index==1) return 'blue'; return 'black';}) //move 1,4, t5 .transition() .attr('x2',function(wire, index){if (index==1||index==3||index==4||index==5) return 300; return 180;}) .attr('x1',function(wire, index){if (index==4) return 380; return 180;}) //turn 4 blue, t6 .transition() .style('stroke',function(wire,index){if (index==4) return 'blue'; return 'black';}) //move 3,4,5, t7 .transition() .attr('x2',function(wire, index){ if (index==3||index==4||index==5) return 500; if (index==1) return 300; return 180; }) // turn 0 blue, t8 .transition() .style('stroke',function(wire,index){if (index==0) return 'blue'; return 'black';}) //move 0,2 t9 .transition() .attr('x2',function(wire, index){ if (index==3||index==4||index==5) return 500; if (index==1||index==0) return 300; return 180; }) .attr('x1',function(wire, index){ if (index==4||index==2) return 380; return 180; }) // turn 1 blue, t10 .transition() .style('stroke',function(wire,index){if (index==1) return 'blue'; return 'black';}) // move 2,3, t11 .transition() .attr('x2',function(wire, index){ if (index==2||index==3||index==4||index==5) return 500; if (index==1||index==0) return 300; return 180; }) .attr('x1',function(wire, index){ if (index==3) return 580; if (index==4||index==2) return 380; return 180;}) // turn 3 blue, t12 .transition() .style('stroke',function(wire,index){if (index==3) return 'blue'; return 'black';}) // move 2 further, t13 .transition() .attr('x2',function(wire, index){ if (index==2) return 500; if (index==3||index==4||index==5) return 700; if (index==1||index==0) return 300; return 180; }) .attr('x1',function(wire, index){ if (index==3) return 580; if (index==4||index==2) return 380; return 180;}) // reset color, t14 .transition() .style('stroke','black') } function startAnimation(){ setTimeout(dfsAnimation,3000); } dfsAnimation() return v; } 36:Tbfd,{ let nodes = [['A','B'], ['C','D','E'], ['F','G']]; let edges = {'A':'E', 'B':'C', 'C':'F', 'D':'G'}; let nodeList = []; nodes.forEach((nodesInCol, col) => { nodesInCol.forEach((name, row) => { nodeList.push({name:name}); }); }); function resetNodes() { nodes.forEach((nodesInCol, col) => { nodesInCol.forEach((name, row) => { let n = nodeList.find( (node) => node.name == name); n.row = row; n.col = col; }); }); } resetNodes(); let edgeList = []; Object.keys(edges).forEach(k => { let v = edges[k]; let source = nodeList.find(n => n.name == k); let dest = nodeList.find(n => n.name == v); edgeList.push({source:source, dest:dest}); }); let v2 = DOM.svg(800,500); let viewer = d3.select(v2); let nodeViews = viewer.selectAll('.nodeBody2') .data(nodeList) .enter().append('rect') .attr('class','nodeBody2') .attr('width',80) .attr('height','80') .attr('x', function(node) { return node.col * 150 + 100; }) .attr('y', function(node) { return node.row * 120 + 100; }) .style('fill','white'); let nodeLabels = viewer.selectAll('.label') .data(nodeList) .enter().append('text') .attr('class','label') .text( function(node) { return node.name }) .attr('x', function(node) { return node.col * 150 + 140; }) .attr('y', function(node) {return node.row * 120 + 150; }); let edgeViews = viewer.selectAll('.wire') .data(edgeList) .enter().append('line') .attr('class','wire') .attr('x1', edge => edge.source.col * 150 + 180) .attr('x2', edge => edge.dest.col * 150 + 100) .attr('y1', edge => edge.source.row * 120 + 140) .attr('y2', edge => edge.dest.row * 120 + 140) .style('stroke','black') function update(onComplete=null) { viewer.selectAll('.nodeBody2') .transition() .duration(1000) .attr('x', function(node) { return node.col * 150 + 100; }) .attr('y', function(node) { return node.row * 120 + 100; }) .on('end', () => { if (onComplete != null) onComplete(); }); viewer.selectAll('.wire') .transition() .duration(1000) .attr('x1', edge => edge.source.col * 150 + 180) .attr('x2', edge => edge.dest.col * 150 + 100) .attr('y1', edge => edge.source.row * 120 + 140) .attr('y2', edge => edge.dest.row * 120 + 140); viewer.selectAll('.label') .transition() .duration(1000) .attr('x', function(node) { return node.col * 150 + 140; }) .attr('y', function(node) {return node.row * 120 + 150; }); } function startMoves() { nodeList[4].row = 0; nodeList[2].row = 2; update( () => { nodeList[5].row = 1; nodeList[6].row = 0; update( () => { nodeList[3].row = 0; nodeList[4].row = 1; update( () => { setTimeout(() => { resetNodes(); update(() => {setTimeout(startMoves, 2000)}); }, 2000); }); }); }); } update(startMoves); return v2; }37:T10ad,{ let nodes = [['A','B', 'C','D'], ['E', 'F', 'G', 'H']]; let edges = {'G':'A', 'H':'A', 'B':'C', 'F':'D'}; let nodeList = []; nodes.forEach((nodesInCol, col) => { nodesInCol.forEach((name, row) => { nodeList.push({name:name, row:row, col:col}); }); }); let edgeList = []; Object.keys(edges).forEach(k => { let v = edges[k]; let source = nodeList.find(n => n.name == v); let dest = nodeList.find(n => n.name == k); edgeList.push({source:source, dest:dest, channel:0}); }); let junctionList = [edgeList[0]]; let v2 = DOM.svg(500, 500); let viewer = d3.select(v2); let nodeViews = viewer.selectAll('.nodeBody2') .data(nodeList) .enter().append('rect') .attr('class','nodeBody2') .attr('width',80) .attr('height','80') .attr('x', function(node) { return node.col * 150 + 150; }) .attr('y', function(node) { return node.row * 120 + 50; }) .style('fill','white'); let nodeLabels = viewer.selectAll('.label') .data(nodeList) .enter().append('text') .attr('class','label') .text( function(node) { return node.name }) .attr('x', function(node) { return node.col * 150 + 190; }) .attr('y', function(node) {return node.row * 120 + 100; }); let sourceWires = viewer.selectAll('.sourcewire') .data(edgeList) .enter().append('line') .attr('class','sourcewire') .style('stroke','black') let channelWires = viewer.selectAll('.channelwire') .data(edgeList) .enter().append('line') .attr('class','channelwire') .style('stroke','black') let destWires = viewer.selectAll('.destwire') .data(edgeList) .enter().append('line') .attr('class','destwire') .style('stroke','black') let junctionViews = viewer.selectAll('.junction') .data(junctionList) .enter().append('circle') .attr('class', 'junct') .attr('r','5') .style('fill', 'black') function updateViews(sourceWires, channelWires, destWires, junctionViews, callback) { sourceWires .attr('x1', edge => edge.source.col * 150 + 230) .attr('x2', edge => edge.channel * 15 + 250) .attr('y1', edge => edge.source.row * 120 + 90) .attr('y2', edge => edge.source.row * 120 + 90) .on('end', () => { console.log('1'); if (callback) callback(); console.log('2'); }); channelWires .attr('x1', edge => edge.channel * 15 + 250) .attr('x2', edge => edge.channel * 15 + 250) .attr('y1', edge => edge.source.row * 120 + 90) .attr('y2', edge => edge.dest.row * 120 + 90) destWires .attr('x1', edge => edge.channel * 15 + 250) .attr('x2', edge => edge.dest.col * 150 + (edge.dest.col == edge.source.col ? + 230: 150)) .attr('y1', edge => edge.dest.row * 120 + 90) .attr('y2', edge => edge.dest.row * 120 + 90) junctionViews .attr('cx', d => d.channel * 15 + 250) .attr('cy', d => d.dest.row * 120 + 90) } updateViews(sourceWires, channelWires, destWires, junctionViews); console.log(edgeList); function startAnimation() { edgeList[3].channel = 1; updateViews( sourceWires.transition().duration(1000), channelWires.transition().duration(1000), destWires.transition().duration(1000), junctionViews.transition().duration(1000), () => { edgeList[0].channel = 2; edgeList[1].channel = 2; updateViews( sourceWires.transition().duration(1000), channelWires.transition().duration(1000), destWires.transition().duration(1000), junctionViews.transition().duration(1000), () => { setTimeout(() => { edgeList[0].channel = 0; edgeList[1].channel = 0; edgeList[3].channel = 0; updateViews( sourceWires.transition().duration(1000), channelWires.transition().duration(1000), destWires.transition().duration(1000), junctionViews.transition().duration(1000), () => { setTimeout(startAnimation, 2000); } ); }, 2000); } ) } ) }; startAnimation(); return v2; }38:[] 32:{"id":"9747063ffe33e20c","slug":"netlistsvg-how-to-draw-a-better-schematic-than-graphviz-par","title":"","thumbnail":"91fe9f95611b8ea7c6b7df0043cb1c5c802a1034cd895fbc00fb7c5fec33c1bc","access_level":"public","create_time":"$D2019-04-28T01:52:29.535Z","update_time":"$D2019-04-28T21:53:50.185Z","view_time":null,"first_public_time":"$D2019-04-28T03:06:24.659Z","has_unpublished_edits":null,"fork":{"id":"80eafb80c2c5d595","slug":"netlistsvg-how-to-draw-a-better-schematic-than-graphviz","title":"Netlistsvg","owner":{"id":"d3a5c7e199005588","login":"nturley","name":"Neil Turley"}},"stars":3,"starred":false,"owner":{"type":"team","id":"d3a5c7e199005588","login":"nturley","name":"Neil Turley","avatar_url":"https://avatars-next.observableusercontent.com/1144dcde8da195bed152315b9c34a7cd1cc33f52ca513a9b8582d9a077aff812","tier":"starter_2024"},"version":399,"publish_version":399,"role":null,"authored":false,"authors":[{"type":"individual","id":"08c0e1b672bab3d7","login":"nturley","name":"Neil Turley","avatar_url":"https://avatars-next.observableusercontent.com/1144dcde8da195bed152315b9c34a7cd1cc33f52ca513a9b8582d9a077aff812","tier":null}],"members":[{"type":"individual","id":"08c0e1b672bab3d7","login":"nturley","name":"Neil Turley","avatar_url":"https://avatars-next.observableusercontent.com/1144dcde8da195bed152315b9c34a7cd1cc33f52ca513a9b8582d9a077aff812","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":4,"collection":null,"type":"notebook","body":{"title":"","cells":[{"id":0,"value":"md`\n### Netlistsvg (Part 2)\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":143,"value":"md` ## Layered Graph Layout Techniques\n\n* Popularized by academics like Sugiyama and Gansner\n* Steps\n * Break Cycles\n * Rank Assignment\n * Insert Dummy Nodes\n * Reorder Columns\n * Assign Edge Channels\n\n## Break Cycles\nTraverse schematic and tag any edges that reach previously visited nodes as \"reversed\". Tagging different nodes will affect column (\"rank\") assignment.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":152,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":171,"value":"md`## Rank Assignment\nAssign a rank for each node such that all edges go to the right (except for edges tagged as \"reversed\") and that is the most compact.\n\n### Longest Path\nStarting from root nodes, traverse the graph assigning ascending ranks to downstream nodes, and then starting from leaf nodes, traverse the graph backward assigning descending ranks to upstream nodes.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":176,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":211,"value":"md`\n## Dummy Node Insertion\n\nAll edges that span a rank have dummy nodes (sometimes called virtual nodes) inserted until all edges only connect adjacent ranks. Reversed edges require an additional two dummy nodes.\n\n![example](https://nturley.github.io/nitech/bitmap.png)\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":222,"value":"md`\n\n## Node Ordering\n\nTo reduce the number of wire crossings, sort each rank by the vertical positions of it's neighbors. We do it from left to right, then from right to left. It's not clear exactly how many times going back and forth is optimal.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":229,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":318,"value":"md`\n## Edge Channel Assignment\n\nVertical segments of wires must be given a horizontal position to reduce wire crossings.\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":320,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":310,"value":"md`\n[Previous Page](https://observablehq.com/@nturley/netlistsvg-how-to-draw-a-better-schematic-than-graphviz)\n[Next Page](https://observablehq.com/@nturley/netlistsvg-how-to-draw-a-better-schematic-than-graphviz-par/2)\n# Appendix\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":55,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":188,"value":"nodeList = [\n {\n 'in' :[],\n 'out':[0,1],\n 'row':0.5,\n 'label':'A'\n },\n {\n 'in' :[0],\n 'out':[2],\n 'row':0,\n 'label':'B'\n },\n {\n 'in' :[2],\n 'out':[3],\n 'row':0.1,\n 'label':'C'\n },\n {\n 'in' :[3,4,5],\n 'out':[],\n 'row':0.75,\n 'label':'D'\n },\n {\n 'in' :[1],\n 'out':[4],\n 'row':1,\n 'label':'E'\n },\n {\n 'in' :[],\n 'out':[5],\n 'row':2,\n 'label':'F'\n },\n];","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W38","stdlib":"1","titling":"auto"}} 33:"$32:body"