31:T499,{ 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() .on("tick",() => { for(var i = 0;i < node.length; i++){ node[i].attr("cx",Math.random()*600) node[i].attr("cy",Math.random()*300) } }) return svg.node() }32:T540,/*{ 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() .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",?) link[i].attr("y1",?) link[i].attr("x2",?) link[i].attr("y2",?) } }) return svg.node() }*/33:T5b2,/*{ 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() .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) node[index].attr("cx") }) link[i].attr("y1",) link[i].attr("x2",) link[i].attr("y2",) } }) return svg.node() }*/34:T72c,{ 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() .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") }) } }) return svg.node() }35:[] 2f:{"title":"April 21 (Grad Data Viz)","cells":[{"id":0,"value":"html`

April 21 (Grad Data Viz)

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

Networks

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":206,"value":"html`We'll take a look at networks this week. We'll have to go slowly with this topic.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"html`

Example 1

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":255,"value":"html`\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":209,"value":"html`Here I am just creating a circle (and calling it \"node\") and also creating what's called a simulation, which does not appear to do anything yet.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":54,"value":"{\n var svgDims = [600,300]\n var svg = d3.select(DOM.svg(svgDims[0],svgDims[1])).attr(\"style\",`background:white;border:1px solid black`)\n \n var node = svg.append(\"circle\")\n .attr(\"r\",20)\n .attr(\"stroke\",\"black\")\n .attr(\"fill\",\"cornflowerblue\")\n\n var simulation = d3.forceSimulation() \n \n return svg.node() \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":71,"value":"html`

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

Example 2

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":257,"value":"html`\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":212,"value":"html`Here I use the simulation to move the circle.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":80,"value":"{\n var svgDims = [600,300]\n var svg = d3.select(DOM.svg(svgDims[0],svgDims[1])).attr(\"style\",`background:white;border:1px solid black`)\n \n var node = svg.append(\"circle\")\n .attr(\"r\",20)\n .attr(\"stroke\",\"black\")\n .attr(\"fill\",\"cornflowerblue\")\n\n var simulation = d3.forceSimulation()\n .on(\"tick\",() => {\n node.attr(\"cx\",300)\n node.attr(\"cy\",150)\n })\n \n return svg.node() \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":82,"value":"html`

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

Example 3

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":259,"value":"html`\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":215,"value":"html`Backtracking a bit, I temporarily remove the simulation, but I introduce an array called \"nodes\". Also, variable \"node\" becomes an array of circles.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":85,"value":"{\n var svgDims = [600,300]\n var svg = d3.select(DOM.svg(svgDims[0],svgDims[1])).attr(\"style\",`background:white;border:1px solid black`)\n \n var nodes = [{id:1,name:\"A\"},{id:2,name:\"B\"}]\n \n var node = []\n for(var i = 0;i < nodes.length; i++){\n var circle = svg.append(\"circle\")\n .attr(\"r\",20)\n .attr(\"stroke\",\"black\")\n .attr(\"fill\",\"cornflowerblue\")\n node.push(circle)\n } \n \n console.log(node) \n\n\n \n return svg.node() \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":97,"value":"html`

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

Example 4

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":261,"value":"html`\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":221,"value":"html` The simulation is back to plot the circles.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":100,"value":"{\n var svgDims = [600,300]\n var svg = d3.select(DOM.svg(svgDims[0],svgDims[1])).attr(\"style\",`background:white;border:1px solid black`)\n \n var nodes = [{id:1,name:\"A\"},{id:2,name:\"B\"}]\n \n var node = []\n for(var i = 0;i < nodes.length; i++){\n var circle = svg.append(\"circle\")\n .attr(\"r\",20)\n .attr(\"stroke\",\"black\")\n .attr(\"fill\",\"cornflowerblue\")\n node.push(circle)\n } \n \n var simulation = d3.forceSimulation()\n .on(\"tick\",() => {\n for(var i = 0;i < node.length; i++){\n node[i].attr(\"cx\",300)\n node[i].attr(\"cy\",150*i + 70)\n } \n })\n\n\n \n return svg.node() \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":110,"value":"html`

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

Example 5

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":263,"value":"html`\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":224,"value":"html`I increase the number of nodes, I add a color field to nodes, and I finally make the connection between nodes and node by coloring each circle. The array node is the visualization of the array nodes. Also, I have given each circle random coordinates. But look what happens when we run the code! We'll have to investigate that later.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":116,"value":"{\n var svgDims = [600,300]\n var svg = d3.select(DOM.svg(svgDims[0],svgDims[1])).attr(\"style\",`background:white;border:1px solid black`)\n \n var nodes = [\n {id:1,name:\"A\",color:\"cornflowerblue\"},\n {id:2,name:\"B\",color:\"tomato\"},\n {id:3,name:\"C\",color:\"goldenrod\"},\n {id:4,name:\"D\",color:\"green\"}\n ]\n \n var node = []\n for(var i = 0;i < nodes.length; i++){\n var circle = svg.append(\"circle\")\n .attr(\"r\",20)\n .attr(\"stroke\",\"black\")\n .attr(\"fill\",nodes[i].color)\n node.push(circle)\n } \n \n var simulation = d3.forceSimulation()\n .on(\"tick\",() => {\n for(var i = 0;i < node.length; i++){\n node[i].attr(\"cx\",Math.random()*600)\n node[i].attr(\"cy\",Math.random()*300)\n } \n })\n\n\n \n return svg.node() \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":139,"value":"html`

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

Example 6

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":265,"value":"html`\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":229,"value":"html`Here I have simply added an array called \"links\" and an array called link. (Ultimately, \"link\" will be the visualization of \"links\".) Nothing else is changed. However, it should be clear that I am attempting to connect the cornflowerblue to the tomato, the tomato to the goldenrod, and the goldenrod to the green, and the green back to the cornflowerblue.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":147,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":157,"value":"html`

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

Example 7

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":267,"value":"html`\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":233,"value":"html`The following code is unfinished, so I commented it out. I am attempting to have the simulation plot the lines as well. The question is how I should find the correct coordinates to use.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":163,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":165,"value":"html`

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

Example 8

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":269,"value":"html`\n\n\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":236,"value":"html`Once again, the code is unfinished. I tackle just the x1 coordinate of the lines.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":168,"value":"$33","pinned":true,"hidden":false,"mode":"ojs"},{"id":182,"value":"html`

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

Example 9

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":271,"value":"html`\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":240,"value":"html`The lines are now there.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":189,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"html`

Libraries

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":14,"value":"import {slider,button,select,text,radio,checkbox,number} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":18,"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":"$W35","stdlib":"1","titling":"auto"}