31:T746,{ var svgDims = [600,300] var svg = d3.select(DOM.svg(svgDims[0],svgDims[1])).attr("style",`background:white;border:1px solid black`) var links = [ {source:1,target:2}, {source:2,target:3}, {source:3,target:4}, {source:4,target:1} ] var nodes = [ {id:1,name:"A",color:"cornflowerblue"}, {id:2,name:"B",color:"tomato"}, {id:3,name:"C",color:"goldenrod"}, {id:4,name:"D",color:"green"} ] var link = [] for(var i = 0;i < links.length; i++){ var line = svg.append("line") .attr("stroke","black") link.push(line) } var node = [] for(var i = 0;i < nodes.length; i++){ var circle = svg.append("circle") .attr("r",20) .attr("stroke","black") .attr("fill",nodes[i].color) node.push(circle) } var simulation = d3.forceSimulation(nodes) .on("tick",() => { for(var i = 0;i < node.length; i++){ node[i].attr("cx",Math.random()*600) node[i].attr("cy",Math.random()*300) } for(var i = 0;i < link.length; i++){ link[i].attr("x1",() => { var index = nodes.findIndex(d => d.id == links[i].source) return node[index].attr("cx") }) link[i].attr("y1",() => { var index = nodes.findIndex(d => d.id == links[i].source) return node[index].attr("cy") }) link[i].attr("x2",() => { var index = nodes.findIndex(d => d.id == links[i].target) return node[index].attr("cx") }) link[i].attr("y2",() => { var index = nodes.findIndex(d => d.id == links[i].target) return node[index].attr("cy") }) } }) console.log(nodes[0]) return svg.node() }32:T721,{ var svgDims = [600,300] var svg = d3.select(DOM.svg(svgDims[0],svgDims[1])).attr("style",`background:white;border:1px solid black`) var links = [ {source:1,target:2}, {source:2,target:3}, {source:3,target:4}, {source:4,target:1} ] var nodes = [ {id:1,name:"A",color:"cornflowerblue"}, {id:2,name:"B",color:"tomato"}, {id:3,name:"C",color:"goldenrod"}, {id:4,name:"D",color:"green"} ] var link = [] for(var i = 0;i < links.length; i++){ var line = svg.append("line") .attr("stroke","black") link.push(line) } var node = [] for(var i = 0;i < nodes.length; i++){ var circle = svg.append("circle") .attr("r",20) .attr("stroke","black") .attr("fill",nodes[i].color) node.push(circle) } var simulation = d3.forceSimulation(nodes) .on("tick",() => { for(var i = 0;i < node.length; i++){ node[i].attr("cx",nodes[i].x) node[i].attr("cy",nodes[i].y) } for(var i = 0;i < link.length; i++){ link[i].attr("x1",() => { var index = nodes.findIndex(d => d.id == links[i].source) return node[index].attr("cx") }) link[i].attr("y1",() => { var index = nodes.findIndex(d => d.id == links[i].source) return node[index].attr("cy") }) link[i].attr("x2",() => { var index = nodes.findIndex(d => d.id == links[i].target) return node[index].attr("cx") }) link[i].attr("y2",() => { var index = nodes.findIndex(d => d.id == links[i].target) return node[index].attr("cy") }) } }) return svg.node() }33:T775,{ var svgDims = [600,300] var svg = d3.select(DOM.svg(svgDims[0],svgDims[1])).attr("style",`background:white;border:1px solid black`) var links = [ {source:1,target:2}, {source:2,target:3}, {source:3,target:4}, {source:4,target:1} ] var nodes = [ {id:1,name:"A",color:"cornflowerblue"}, {id:2,name:"B",color:"tomato"}, {id:3,name:"C",color:"goldenrod"}, {id:4,name:"D",color:"green"} ] var link = [] for(var i = 0;i < links.length; i++){ var line = svg.append("line") .attr("stroke","black") link.push(line) } var node = [] for(var i = 0;i < nodes.length; i++){ var circle = svg.append("circle") .attr("r",20) .attr("stroke","black") .attr("fill",nodes[i].color) node.push(circle) } var simulation = d3.forceSimulation(nodes) .force("link",d3.forceLink().id(d => d.id).links(links)) .on("tick",() => { for(var i = 0;i < node.length; i++){ node[i].attr("cx",nodes[i].x) node[i].attr("cy",nodes[i].y) } /*for(var i = 0;i < link.length; i++){ link[i].attr("x1",() => { var index = nodes.findIndex(d => d.id == links[i].source) return node[index].attr("cx") }) link[i].attr("y1",() => { var index = nodes.findIndex(d => d.id == links[i].source) return node[index].attr("cy") }) link[i].attr("x2",() => { var index = nodes.findIndex(d => d.id == links[i].target) return node[index].attr("cx") }) link[i].attr("y2",() => { var index = nodes.findIndex(d => d.id == links[i].target) return node[index].attr("cy") }) }*/ }) console.log(links[0]) return svg.node() }34:T5bf,{ var svgDims = [600,300] var svg = d3.select(DOM.svg(svgDims[0],svgDims[1])).attr("style",`background:white;border:1px solid black`) var links = [ {source:1,target:2}, {source:2,target:3}, {source:3,target:4}, {source:4,target:1} ] var nodes = [ {id:1,name:"A",color:"cornflowerblue"}, {id:2,name:"B",color:"tomato"}, {id:3,name:"C",color:"goldenrod"}, {id:4,name:"D",color:"green"} ] var link = [] for(var i = 0;i < links.length; i++){ var line = svg.append("line") .attr("stroke","black") link.push(line) } var node = [] for(var i = 0;i < nodes.length; i++){ var circle = svg.append("circle") .attr("r",20) .attr("stroke","black") .attr("fill",nodes[i].color) node.push(circle) } var simulation = d3.forceSimulation(nodes) .force("link",d3.forceLink().id(d => d.id).links(links)) .on("tick",() => { for(var i = 0;i < node.length; i++){ node[i].attr("cx",nodes[i].x) node[i].attr("cy",nodes[i].y) } for(var i = 0;i < link.length; i++){ link[i].attr("x1",links[i].source.x) link[i].attr("y1",links[i].source.y) link[i].attr("x2",links[i].target.x) link[i].attr("y2",links[i].target.y) } }) //console.log(links) return svg.node() }35:T5d8,{ var svgDims = [600,300] var svg = d3.select(DOM.svg(svgDims[0],svgDims[1])).attr("style",`background:white;border:1px solid black`) var links = [ {source:1,target:2}, {source:2,target:3}, {source:3,target:4}, {source:4,target:1} ] var nodes = [ {id:1,name:"A",color:"cornflowerblue"}, {id:2,name:"B",color:"tomato"}, {id:3,name:"C",color:"goldenrod"}, {id:4,name:"D",color:"green"} ] var link = [] for(var i = 0;i < links.length; i++){ var line = svg.append("line") .attr("stroke","black") link.push(line) } var node = [] for(var i = 0;i < nodes.length; i++){ var circle = svg.append("circle") .attr("r",20) .attr("stroke","black") .attr("fill",nodes[i].color) node.push(circle) } var simulation = d3.forceSimulation(nodes) .force("center", d3.forceCenter(300, 150)) .force("link",d3.forceLink().id(d => d.id).links(links)) .on("tick",() => { for(var i = 0;i < node.length; i++){ node[i].attr("cx",nodes[i].x) node[i].attr("cy",nodes[i].y) } for(var i = 0;i < link.length; i++){ link[i].attr("x1",links[i].source.x) link[i].attr("y1",links[i].source.y) link[i].attr("x2",links[i].target.x) link[i].attr("y2",links[i].target.y) } }) return svg.node() }36:T60d,{ var svgDims = [600,300] var svg = d3.select(DOM.svg(svgDims[0],svgDims[1])).attr("style",`background:white;border:1px solid black`) var links = [ {source:1,target:2}, {source:2,target:3}, {source:3,target:4}, {source:4,target:1} ] var nodes = [ {id:1,name:"A",color:"cornflowerblue"}, {id:2,name:"B",color:"tomato"}, {id:3,name:"C",color:"goldenrod"}, {id:4,name:"D",color:"green"} ] var link = [] for(var i = 0;i < links.length; i++){ var line = svg.append("line") .attr("stroke","black") link.push(line) } var node = [] for(var i = 0;i < nodes.length; i++){ var circle = svg.append("circle") .attr("r",20) .attr("stroke","black") .attr("fill",nodes[i].color) node.push(circle) } var simulation = d3.forceSimulation(nodes) .force("center", d3.forceCenter(300, 150)) .force("charge", d3.forceManyBody().strength(-500)) .force("link",d3.forceLink().id(d => d.id).links(links)) .on("tick",() => { for(var i = 0;i < node.length; i++){ node[i].attr("cx",nodes[i].x) node[i].attr("cy",nodes[i].y) } for(var i = 0;i < link.length; i++){ link[i].attr("x1",links[i].source.x) link[i].attr("y1",links[i].source.y) link[i].attr("x2",links[i].target.x) link[i].attr("y2",links[i].target.y) } }) return svg.node() }37:T64f,{ var svgDims = [600,300] var svg = d3.select(DOM.svg(svgDims[0],svgDims[1])).attr("style",`background:white;border:1px solid black`) var outer = svg.append("g").attr("transform","translate(300,150)") var links = [ {source:1,target:2}, {source:2,target:3}, {source:3,target:4}, {source:4,target:1} ] var nodes = [ {id:1,name:"A",color:"cornflowerblue"}, {id:2,name:"B",color:"tomato"}, {id:3,name:"C",color:"goldenrod"}, {id:4,name:"D",color:"green"} ] var link = [] for(var i = 0;i < links.length; i++){ var line = outer.append("line") .attr("stroke","black") link.push(line) } var node = [] for(var i = 0;i < nodes.length; i++){ var circle = outer.append("circle") .attr("r",20) .attr("stroke","black") .attr("fill",nodes[i].color) node.push(circle) } var simulation = d3.forceSimulation(nodes) .force("center", d3.forceCenter(0, 0)) .force("charge", d3.forceManyBody().strength(-500)) .force("link",d3.forceLink().id(d => d.id).links(links)) .on("tick",() => { for(var i = 0;i < node.length; i++){ node[i].attr("cx",nodes[i].x) node[i].attr("cy",nodes[i].y) } for(var i = 0;i < link.length; i++){ link[i].attr("x1",links[i].source.x) link[i].attr("y1",links[i].source.y) link[i].attr("x2",links[i].target.x) link[i].attr("y2",links[i].target.y) } }) return svg.node() }38:T666,{ var svgDims = [600,300] var svg = d3.select(DOM.svg(svgDims[0],svgDims[1])).attr("style",`background:white;border:1px solid black`) var outer = svg.append("g").attr("transform","translate(300,150)") var links = [ {source:1,target:2}, {source:2,target:3}, {source:3,target:4}, {source:4,target:1} ] var nodes = [ {id:1,name:"A",color:"cornflowerblue"}, {id:2,name:"B",color:"tomato"}, {id:3,name:"C",color:"goldenrod"}, {id:4,name:"D",color:"green"} ] var link = [] for(var i = 0;i < links.length; i++){ var line = outer.append("line") .attr("stroke","black") link.push(line) } var node = [] for(var i = 0;i < nodes.length; i++){ var circle = outer.append("circle") .attr("r",20) .attr("stroke","black") .attr("fill",nodes[i].color) node.push(circle) } var simulation = d3.forceSimulation(nodes).alphaDecay(.001) .force("center", d3.forceCenter(0, 0)) .force("charge", d3.forceManyBody().strength(s)) .force("link",d3.forceLink().id(d => d.id).links(links)) .on("tick",() => { for(var i = 0;i < node.length; i++){ node[i].attr("cx",nodes[i].x) node[i].attr("cy",nodes[i].y) } for(var i = 0;i < link.length; i++){ link[i].attr("x1",links[i].source.x) link[i].attr("y1",links[i].source.y) link[i].attr("x2",links[i].target.x) link[i].attr("y2",links[i].target.y) } }) return svg.node() }39:T509,{ var svgDims = [600,300] var svg = d3.select(DOM.svg(svgDims[0],svgDims[1])).attr("style",`background:white;border:1px solid black`) var outer = svg.append("g").attr("transform","translate(300,150)") var links = data.links var nodes = data.nodes var link = [] for(var i = 0;i < links.length; i++){ var line = outer.append("line") .attr("stroke","black") link.push(line) } var node = [] for(var i = 0;i < nodes.length; i++){ var circle = outer.append("circle") .attr("r",10) .attr("stroke","black") .attr("fill","cornflowerblue") node.push(circle) } var simulation = d3.forceSimulation(nodes).alphaDecay(.001) .force("center", d3.forceCenter(0, 0)) .force("charge", d3.forceManyBody().strength(-100)) .force("link",d3.forceLink().id(d => d.id).links(links)) .on("tick",() => { for(var i = 0;i < node.length; i++){ node[i].attr("cx",nodes[i].x) node[i].attr("cy",nodes[i].y) } for(var i = 0;i < link.length; i++){ link[i].attr("x1",links[i].source.x) link[i].attr("y1",links[i].source.y) link[i].attr("x2",links[i].target.x) link[i].attr("y2",links[i].target.y) } }) return svg.node() }3a:T503,{ var svgDims = [600,300] var svg = d3.select(DOM.svg(svgDims[0],svgDims[1])).attr("style",`background:white;border:1px solid black`) var outer = svg.append("g").attr("transform","translate(300,150)") var links = data2.links var nodes = data2.nodes var link = [] for(var i = 0;i < links.length; i++){ var line = outer.append("line") .attr("stroke","black") link.push(line) } var node = [] for(var i = 0;i < nodes.length; i++){ var circle = outer.append("circle") .attr("r",4) .attr("stroke","black") .attr("fill","cornflowerblue") node.push(circle) } var simulation = d3.forceSimulation(nodes).alphaDecay(.001) .force("center", d3.forceCenter(0, 0)) .force("charge", d3.forceManyBody().strength(-5)) .force("link",d3.forceLink().id(d => d.id).links(links)) .on("tick",() => { for(var i = 0;i < node.length; i++){ node[i].attr("cx",nodes[i].x) node[i].attr("cy",nodes[i].y) } for(var i = 0;i < link.length; i++){ link[i].attr("x1",links[i].source.x) link[i].attr("y1",links[i].source.y) link[i].attr("x2",links[i].target.x) link[i].attr("y2",links[i].target.y) } }) return svg.node() }3b:[] 2f:{"title":"April 23 (Grad Data Viz)","cells":[{"id":0,"value":"html`

April 23 (Grad Data Viz)

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"html`

More with Networks

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"html`

Example 1

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":248,"value":"html`\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":28,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":41,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":44,"value":"html`

Example 2

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":250,"value":"html`\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":48,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":52,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":57,"value":"html`

Example 3

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":252,"value":"html`\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":55,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":65,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":68,"value":"html`

Example 4

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":254,"value":"html`\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":71,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":73,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":77,"value":"html`

Example 5

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":256,"value":"html`\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":82,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":93,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":95,"value":"html`

Example 6

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":258,"value":"html`\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":99,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":105,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":108,"value":"html`

Example 7

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":260,"value":"html`\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":111,"value":"$37","pinned":false,"hidden":false,"mode":"ojs"},{"id":120,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":123,"value":"html`

Example 8

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":262,"value":"html`\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":126,"value":"$38","pinned":false,"hidden":false,"mode":"ojs"},{"id":113,"value":"viewof s = slider({min:-5000,max:0})","pinned":false,"hidden":false,"mode":"ojs"},{"id":131,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":134,"value":"html`

Example 9

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":264,"value":"html`\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":138,"value":"data = {\n var nodes = []\n for(var i = 0; i < 10; i++){\n nodes.push({id:i})\n }\n var links = []\n for(var i = 0; i < 9; i++){\n links.push({source:i,target:i+1})\n }\n links.push({source:9,target:0})\n return {nodes:nodes,links:links}\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":145,"value":"$39","pinned":false,"hidden":false,"mode":"ojs"},{"id":154,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":157,"value":"html`

Example 10

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":266,"value":"html`\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":162,"value":"data2 = {\n var nodes = []\n for(var i = 0; i < 10; i++){\n for(var j = 0; j < 6; j++){\n nodes.push({id:`${i}${j}`})\n }\n }\n var links = []\n for(var i = 0; i < 9; i++){\n links.push({source:`${i}0`,target:`${i+1}0`})\n for(var j = 1; j < 6; j++){\n links.push({source:`${i}${j}`,target:`${i}0`})\n }\n }\n links.push({source:\"90\",target:\"00\"})\n for(var j = 1; j < 6; j++){\n links.push({source:`9${j}`,target:`90`})\n }\n return {nodes:nodes,links:links}\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":160,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"html`

Libraries

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"import {slider,button,select,text,radio,checkbox,number} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":17,"value":"stdlib = require( \"https://unpkg.com/@stdlib/stdlib@0.0.32/dist/stdlib-flat.min.js\" )","pinned":false,"hidden":false,"mode":"ojs"},{"id":19,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W3b","stdlib":"1","titling":"auto"}