2f:null 30:["$","title",null,{"children":"CAP5837 - Visualization Techniques for Data - Visualizing Networks | bruce1809 | Observable"}] 35:Td41,md`

Researchgate.net Photo: [1 The Königsberg bridge problem]

# Background Network science has its roots in the image above which represents the bridges at Konigsberg, in eastern Prussia in 1735. The problem statement was: can one walk across all seven bridges and never cross the same one twice? Leonard Euler provided a mathematical proof in 1735 that showed that such a path does not exist. The image on the right above shows a schematic image of the bridge problem in a network configuration. In 1875, a new bridge was built between B and C, thus increasing the number of links of these two nodes to four. Currently plotly for javascript does not include a force field style network visualization capability. This capability is on a backlog of functionality that plotly is working on. For this project, we have used the D3 code by Mike Bostock, and built in a few enhancements (such as direction). In addition, we have loaded five types of networks into the display: random, small world, scale-free, the orginal Les Miserables character network and a twitter network. ## Definitions Networks consist of **nodes** and **links** (in graph theory, these are referred to as **vertices** and **edges**). The **degree** of a network is the number of links it has. The **degree distribution** is the distribution of links over nodes which can be random, or follow various statistical distributions. Later in the notebook, we render examples of degree distribution plots. The data for a network is usually set up as two data files: one consisting of the node ID and any features associated with each node; the other file specifies the connections including the two nodes making up the connection, the direction, and features of the connection such as the strength. Using the interactive section below, you will be able to select and see differences between the networks listing below. **Random Network** - nodes are generated randomly and evenly distributed. Seen sometimes in nature and crystalization (chemistry) **Scalefree network** - some nodes are highly connected, and others not so much. The internet and power grid are examples of this type of network **Small world network** - highly connected clusters connected loosely with other clusters. **Les Miserables data set** - This is a good example scale-free network connecting various smaller clusters. This data set came from the original code from Mike Bostick. **Twitter** - most social media and networks are examples of scale free networks - that is, a few nodes with many connections and many nodes with only a few connections. The purpose of this was to demonstrate the visualization of a real-world example and see how larger networks are more challenging to display. The twitter data set was subsequently modified using a set of reduction techniques where the size of the node reflects the number of connections. The "Twitter Processing Section" below explains the steps we took to bring in this data set and use reduction techniques in order to display it in a simple fashion by condensing clusters to nodes based on either inbound or outbound connections. `36:T5cd,viewof degreeComparison = { const div1 = DOM.element('div'); const div2 = DOM.element('div'); const onlyInDegree = (mainInputs.dataTypePicker == 'RandomSmallWorld'); { let thisNetwork = data; let trace1 = { x: thisNetwork.nodes.map(x => x.inDegree), type: 'histogram', name: 'in-degree' } let trace2 = { x: thisNetwork.nodes.map(x => x.outDegree), type: 'histogram', name: 'out-degree' } let layout = { width: width/2, legend: { x: 1, xanchor: 'right', y: 1 }, margin: { l: 50, r: 50, b: 50, t: 50, pad: 4 } } Plotly.newPlot(div1, onlyInDegree? [trace1] : [trace1, trace2], layout) } { let thisNetwork = sampleData; let trace1 = { x: thisNetwork.nodes.map(x => x.inDegree), type: 'histogram', name: 'in-degree' } let trace2 = { x: thisNetwork.nodes.map(x => x.outDegree), type: 'histogram', name: 'out-degree' } let layout = { width: width/2, legend: { x: 1, xanchor: 'right', y: 1 }, margin: { l: 50, r: 50, b: 50, t: 50, pad: 4 } } Plotly.newPlot(div2, onlyInDegree? [trace1] : [trace1, trace2], layout) } return columns({div1,div2}) }37:Te72,chart = (data,concern) =>{ const links = data.links.map(d => Object.create(d)); const nodes = data.nodes.map(d => Object.create(d)); const simulation = d3.forceSimulation(nodes) .force("link", d3.forceLink(links).id(d => d.id)) .force("charge", d3.forceManyBody().strength(-40)) .force("center", d3.forceCenter(widthm / 2, heightm / 2)) /*.force('collision', d3.forceCollide().radius(function(d) { return d.radius }))*/; console.log(width) let border=1; let bordercolor='black'; const svg = d3.create("svg") .attr("viewBox", [0, 0, widthm, heightm]) .attr("border",border); let borderPath = svg.append("rect") .attr("x", 0) .attr("y", 0) .attr("height", heightm) .attr("width", widthm) .style("stroke", bordercolor) .style("fill", "none") .style("stroke-width", border); //ARROWS ADDITION START svg.append("defs").selectAll("marker") .data(["suit", "licensing", "resolved"]) .enter().append("marker") .attr("id", function(d) { return d; }) .attr("viewBox", "0 -5 10 10") .attr("refX", 25) .attr("refY", 0) .attr("markerWidth", 6) .attr("markerHeight", 6) .attr("orient", "auto") .append("path") .attr("d", "M0,-5L10,0L0,5 L10,0 L0, -5") .style("stroke", "#4679BD") .style("opacity", "0.6"); //ARROWS ADDITION END const link = svg.append("g") .attr("stroke", "#999") .attr("stroke-opacity", "0.6") .selectAll("line") .data(links) .join("line") .attr("stroke-width", d => Math.sqrt(d.value)); linkStyle(link); //apply selected styles to links const node = svg.append("g") .attr("stroke", "#fff") .attr("stroke-width", 1.5) .selectAll("circle") .data(nodes) .join("circle") //.attr("r", 5) .attr("r", function(d) {return getRadius(d,mainInputs.dataTypePicker)}) .attr("fill", color2) /*.attr("fill", function(d) { //this block cause redraw when concern graphs are changed if(concern == true && d.id==values.concernNode) return values.concernColor; else return color2(d); })*/ .call(drag(simulation)); node.append("title") .attr("data-html", "true") .text(d => { if(mainInputs.dataTypePicker != "Twitter") return "Node ID: " + d.id + " | Num. of Incoming Connections: " + getNumConnections(d.id,"in",data) + " | Num. of Outgoing Connections: " + getNumConnections(d.id,"out",data) else return "Node ID: " + d.id + " | Num. of Incoming Connections: " + d.attributes[0] + " | Num. of Outgoing Connections: " + d.attributes[1] }); simulation.on("tick", () => { link .attr("x1", d => d.source.x) .attr("y1", d => d.source.y-margin.top+margin.bottom) .attr("x2", d => d.target.x) .attr("y2", d => d.target.y-margin.top+margin.bottom); node .attr("cx", function(d) { return d.x = Math.max(radius, Math.min(widthm - radius, d.x)); }) //prevent nodes from flying off .attr("cy", function(d) { return d.y = Math.max(radius, Math.min(heightm - radius, d.y))+margin.top-+margin.bottom; }) //prevent nodes from flying off //.attr("cx", d => d.x) //.attr("cy", d => d.y) //.each(collide(0.5)); //Added }); invalidation.then(() => simulation.stop()); /*svg.append("text") .attr("x", (width / 2)) .attr("y", 0 + (margin.top / 2)) .attr("text-anchor", "middle") .style("font-size", "16px") .style("text-decoration", "underline") .text("Viewing Network: " + dataTypePicker);*/ return svg.node(); }38:T944,function calcDecomposition(networkData, kmin, getRelationshipAttributeFunc, combineNodeFunc){ const output = ({ nodeAttributesNames: networkData.nodeAttributesNames, linkAttributesNames: networkData.linkAttributesNames, nodes: [], links: [], }); const nodeSet = new Set(); const neighbors = new Map(); // Filter Nodes: for(let i=0; i < networkData.nodes.length; i++){ let degSum = networkData.nodes[i].inDegree + networkData.nodes[i].outDegree; if(degSum >= kmin){ const deepCopyNode = _.cloneDeep(networkData.nodes[i]); output.nodes.push(deepCopyNode); nodeSet.add(deepCopyNode.id); }else{ neighbors.set(networkData.nodes[i].id, new Set()); } } // Filter links: for(let i=0; i < networkData.links.length; i++){ if( nodeSet.has(networkData.links[i].source) && nodeSet.has(networkData.links[i].target) ){ const deepCopyLink = _.cloneDeep(networkData.links[i]); output.links.push(deepCopyLink); }else{ // add neighbor details of small nodes to map: if( ! nodeSet.has(networkData.links[i].source) ){ // source is not a big node neighbors.get(networkData.links[i].source).add( ({ node: networkData.nodes.find(x => x.id == networkData.links[i].target), link: networkData.links[i] }) ); } if( ! nodeSet.has(networkData.links[i].target) ){ // target is not a big node neighbors.get(networkData.links[i].target).add( ({ node: networkData.nodes.find(x => x.id == networkData.links[i].source), link: networkData.links[i] }) ); } } } // Combine attributes: for (const nodeid of neighbors.keys()) { const thisNeighbors = neighbors.get(nodeid); let maxRelationship = Number.NEGATIVE_INFINITY; let maxRelObj = -1; // find the max relationship with a bigNode: for(const neighbor of thisNeighbors.values()){ if(nodeSet.has(neighbor.node.id) && maxRelationship <= getRelationshipAttributeFunc(neighbor)){ maxRelationship = getRelationshipAttributeFunc(neighbor); maxRelObj = neighbor.node.id; } } if (maxRelObj != -1){ combineNodeFunc(output.nodes.find(x => x.id == maxRelObj), networkData.nodes.find(x => x.id == nodeid)); } } return output; }39:Tde9,chart2 = (data,concern) => { const links = data.links.map(d => Object.create(d)); const nodes = data.nodes.map(d => Object.create(d)); const simulation = d3.forceSimulation(nodes) .force("link", d3.forceLink(links).id(d => d.id)) .force("charge", d3.forceManyBody().strength(-40)) .force("center", d3.forceCenter(widthm / 2, heightm / 2)) /*.force('collision', d3.forceCollide().radius(function(d) { return d.radius }))*/; let border=1; let bordercolor='black'; const svg = d3.create("svg") .attr("viewBox", [0, 0, widthm, heightm]); let borderPath = svg.append("rect") .attr("x", 0) .attr("y", 0) .attr("height", heightm) .attr("width", widthm) .style("stroke", bordercolor) .style("fill", "none") .style("stroke-width", border); //ARROWS ADDITION START svg.append("defs").selectAll("marker") .data(["suit", "licensing", "resolved"]) .enter().append("marker") .attr("id", function(d) { return d; }) .attr("viewBox", "0 -5 10 10") .attr("refX", 25) .attr("refY", 0) .attr("markerWidth", 6) .attr("markerHeight", 6) .attr("orient", "auto") .append("path") .attr("d", "M0,-5L10,0L0,5 L10,0 L0, -5") .style("stroke", "#4679BD") .style("opacity", "0.6"); //ARROWS ADDITION END const link = svg.append("g") .attr("stroke", "#999") .attr("stroke-opacity", 0.6) .selectAll("line") .data(links) .join("line") .attr("stroke-width", d => Math.sqrt(d.value)); linkStyle(link); //apply selected styles to links const node = svg.append("g") .attr("stroke", "#fff") .attr("stroke-width", 1.5) .selectAll("circle") .data(nodes) .join("circle") //.attr("r", 5) .attr("r", function(d) {return getRadius(d, mainInputs.dataSamplePicker)}) .attr("fill", function(d) { if(concern == true && d.id==values.concernNode) return values.concernColor; else return color2(d); }) .call(drag(simulation)); node.append("title") .attr("data-html", "true") .text(d => { if(mainInputs.dataTypePicker != "Twitter") return "Node ID: " + d.id + " | Num. of Incoming Connections: " + getNumConnections(d.id,"in",data) + " | Num. of Outgoing Connections: " + getNumConnections(d.id,"out",data) else return "Node ID: " + d.id + " | Num. of Incoming Connections: " + d.attributes[0] + " | Num. of Outgoing Connections: " + d.attributes[1] }); simulation.on("tick", () => { link .attr("x1", d => d.source.x) .attr("y1", d => d.source.y-margin.top+margin.bottom) .attr("x2", d => d.target.x) .attr("y2", d => d.target.y-margin.top+margin.bottom); node .attr("cx", function(d) { return d.x = Math.max(radius, Math.min(widthm - radius, d.x)); }) //prevent nodes from flying off .attr("cy", function(d) { return d.y = Math.max(radius, Math.min(heightm - radius, d.y))+margin.top-+margin.bottom; }) //prevent nodes from flying off //.attr("cx", d => d.x) //.attr("cy", d => d.y) //.each(collide(0.5)); //Added }); invalidation.then(() => simulation.stop()); /*svg.append("text") .attr("x", (width / 2)) .attr("y", 0 + (margin.top / 2)) .attr("text-anchor", "middle") .style("font-size", "16px") .style("text-decoration", "underline") .text("Viewing Network: " + dataTypePicker);*/ return svg.node(); }3a:T4f4,generateConcernGraphBFS = (data,nodeIDOfConcern,degree) => { //let data = originalNetwork; let arr = []; arr.push(nodeIDOfConcern); let index = 0; for(let i = 0; i < degree; i++) { let others = []; for(let p = index; p < arr.length; p++) { //console.log(data.links.filter(d=>d.source==arr[p]).map(d=>d.target)) let inner = data.links.filter(d=>d.source==arr[p] && !arr.includes(d.target)).map(d=>d.target); others = others.concat(inner); } arr = arr.concat(others); index++; } let distinctSet = [...new Set(arr)].map(String); console.log("Distinct nodes List: " + distinctSet); //console.log("Old nodes List: " + data.nodes.map(d=>d.id)); let newNodes = data.nodes.filter(d=>distinctSet.includes(d.id.toString())) console.log("New nodes List: " + newNodes.map(d=>d.id)); let newLinks = data.links.filter(d=>(distinctSet.includes(d.source.toString()) && distinctSet.includes(d.target.toString()))) let newObject = Object.create(data); delete newObject.nodes; delete newObject.links; newObject.nodes = newNodes; newObject.links = newLinks; //return arr.concat(links.filter(d=>d.source==node)); //return data.links.filter(d=>d.source==arr[0]).map(d=>d.target) return newObject; } 3b:T40f,generateConcernGraphDFS = (data,nodeIDOfConcern,degree) => { //let dfsData = Object.create(data); let dfsData = data; dfsData.nodes.forEach(d=> { d.completed = false; d.visited = false; }); let stack = [dfsData.nodes.filter(d=>d.id == nodeIDOfConcern)[0]] //return stack; while(stack.length > 0) { const node = stack.pop(); node.visited = true; //get the children of node. i.e outgoing links let children = dfsData.links.filter(d=>d.source==node.id).map(d=>d.target); dfsData.nodes.filter(d=>children.includes(d.id) && d.visited == false).map(d=>stack.push(d)); } let newNodes = dfsData.nodes.filter(d=>d.visited == true); let distinctSet = newNodes.map(d=>d.id); let newLinks = data.links.filter(d=>(distinctSet.includes(d.source.toString()) && distinctSet.includes(d.target.toString()))); let newObject = Object.create(dfsData); delete newObject.nodes; delete newObject.links; newObject.nodes = newNodes; newObject.links = newLinks; return newObject; }3c:T4e3,generateConcernGraphLimitedDFS = (data,nodeIDOfConcern,depthLimit) => { //let dfsData = Object.create(data); let dfsData = data; dfsData.nodes.forEach(d=> { d.completed = false; d.visited = false; d.numHops = 0; }); let stack = [dfsData.nodes.filter(d=>d.id == nodeIDOfConcern)[0]] dfsData.nodes.filter(d=>d.id == nodeIDOfConcern)[0].numHops = 0; //return stack; while(stack.length > 0) { const node = stack.pop(); node.visited = true; //if(node.numHops <= depthLimit){ if(node.numHops < depthLimit){ //get the children of node. i.e outgoing links let children = dfsData.links.filter(d=>d.source==node.id).map(d=>d.target); dfsData.nodes.filter(d=>children.includes(d.id) && d.visited == false).map(d=> (d.numHops = 1 + node.numHops) && stack.push(d)); } } let newNodes = dfsData.nodes.filter(d=>d.visited == true); let distinctSet = newNodes.map(d=>d.id); let newLinks = data.links.filter(d=>(distinctSet.includes(d.source.toString()) && distinctSet.includes(d.target.toString()))); let newObject = Object.create(dfsData); delete newObject.nodes; delete newObject.links; newObject.nodes = newNodes; newObject.links = newLinks; return newObject; }3d:T53d,function generateSmallWorldNetwork(numNodes, meanDegree, beta){ let theNodes = Array(numNodes).fill(0).map( (x,i) => ({ "id":i, "inDegree":0, "outDegree":0, "attributes":genRandomAttributes()}) ) let theArcs = Array(numNodes * meanDegree).fill(0).map( x => ({ "source":-1, "target":-1, "attributes":genRandomAttributes() }) ) let forward = Math.round(meanDegree / 2); let backward = meanDegree - forward; let currentArc = 0; for(let i=0; i < theNodes.length; i++){ for(let k=1; k <= backward; k++){ let ik = (numNodes + i - k) % numNodes; theArcs[currentArc].source = theNodes[i].id; theArcs[currentArc].target = theNodes[ik].id; theNodes[i].outDegree += 1; theNodes[ik].inDegree += 1; currentArc += 1; } for(let k=1; k <= forward; k++){ let ik = (i + k) % numNodes; if(Math.random() < beta){ ik = pickRandomNode(numNodes); } theArcs[currentArc].source = theNodes[i].id; theArcs[currentArc].target = theNodes[ik].id; theNodes[i].outDegree += 1; theNodes[ik].inDegree += 1; currentArc += 1; } } return ({ "nodeAttributesNames":["random","random100","binary","cat5","cat10","cat100"], "linkAttributesNames":["random","random100","binary","cat5","cat10","cat100"], "nodes":theNodes, "links":theArcs}) }3e:T5b2,function generateScaleFreeNetwork(numNodes, beta){ let theNodes = Array(numNodes).fill(0).map( (x,i) => ({ "id":i, "inDegree":0, "outDegree":0, "attributes":genRandomAttributes()}) ) let theArcs = Array(); let outDegree = Array(numNodes).fill(0); let inDegree = Array(numNodes).fill(0); let alpha = (1 - beta) / 2; let nextNode = 0; let delta = 0.1; while(nextNode < numNodes){ let r = Math.random(); let a = 0; let b = 1; let currentOutDegreeSlice = outDegree.slice(0,nextNode); let currentInDegreeSlice = inDegree.slice(0,nextNode); if(r < beta){ a = pickPreferencialNode(currentOutDegreeSlice, delta) b = pickPreferencialNode(currentInDegreeSlice, delta) }else if(r < (beta + alpha)) { a = pickPreferencialNode(currentOutDegreeSlice, delta) b = nextNode nextNode += 1 }else{ a = nextNode b = pickPreferencialNode(currentInDegreeSlice, delta) nextNode += 1 } if(a != b){ outDegree[a] += 1 theNodes[a].outDegree = outDegree[a] inDegree[b] += 1 theNodes[b].inDegree = inDegree[b] theArcs.splice(nextNode,0,({ "source":a, "target":b, "attributes":genRandomAttributes() }) ) } } // end while return ({ "nodeAttributesNames":["random","random100","binary","cat5","cat10","cat100"], "linkAttributesNames":["random","random100","binary","cat5","cat10","cat100"], "nodes":theNodes, "links":theArcs }); }3f:T510,md`## References

Enhancements to Mike Bostock's network D3 Code http://coppelia.io/2014/07/an-a-to-z-of-extra-features-for-the-d3-force-layout/
Network graphs using plotly for Python (Random graph) https://plotly.com/python/network-graphs/
Mike Bostock's original D3 Graph for javascript https://observablehq.com/@d3/force-directed-graph
D3 Force Code in Github https://github.com/d3/d3-force
Bounding the nodes so they don't go off screen https://bl.ocks.org/mbostock/1129492
Column Support https://observablehq.com/@bcardiff/observable-columns
Barabasi, A. (2014) *Linked: How everything is connected to everything else and what it means for business, science, and everyday life.* New York: Basic Books
Bollobás, B. (2013). *Modern graph theory* (Vol. 184). Springer Science & Business Media.
Watts, D. J., & Strogatz, S. H. (1998). Collective dynamics of ‘small-world’networks. nature, 393(6684), 440-442.
Generatots: https://observablehq.com/@observablehq/introduction-to-generators
Pause a Generator: https://observablehq.com/@mbostock/pause-a-generator
DFS and BFS explanations: https://www.geeksforgeeks.org/difference-between-bfs-and-dfs/

`40:[{"id":"05e5a3b1678fc4614fc73cd42e75d7c16b17433835144afb8a44710b4d4d4ab4147525616a4c980835c73c4ef1302e02633ca7a66cf3758a3374374e75c236b7","href":"https://static.observableusercontent.com/files/05e5a3b1678fc4614fc73cd42e75d7c16b17433835144afb8a44710b4d4d4ab4147525616a4c980835c73c4ef1302e02633ca7a66cf3758a3374374e75c236b7","name":"Bridges.png","type":"image/png","lastModified":1610033316815.874,"size":5458},{"id":"a54fa5363b4035634b31bda01f902f2620a54a6366986631347558458e2484388de6575e5015e38bccc7db6637d87f80ad4ed7bdcab81ec3f31b75908a22a42d","href":"https://static.observableusercontent.com/files/a54fa5363b4035634b31bda01f902f2620a54a6366986631347558458e2484388de6575e5015e38bccc7db6637d87f80ad4ed7bdcab81ec3f31b75908a22a42d","name":"miserables.json","type":"application/json","lastModified":1604674947433.199,"size":18844}] 33:{"id":"74e722df8c7f4f57","slug":"cap5837-visualization-techniques-for-data-visualizing-ne","title":"CAP5837 - Visualization Techniques for Data - Visualizing Networks","thumbnail":"98734a59aa8d1d34470749b861881004792fc8fa8d7d630dc5262d82f74b804f","access_level":"public","create_time":"$D2020-11-06T14:37:51.739Z","update_time":"$D2022-01-04T16:34:45.289Z","view_time":null,"first_public_time":"$D2021-01-13T00:14:12.459Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"34d995850d3235ec","login":"bruce1809","name":"","avatar_url":"https://avatars-next.observableusercontent.com/0de9154ee1567b822e4989a30cd0c0c3d925a451fa7b469b6e7bc3afe3c3dcfd","tier":"starter_2024"},"version":220,"publish_version":220,"role":null,"authored":false,"authors":[{"type":"individual","id":"90e66330888eaf5f","login":"bruce1809","name":"","avatar_url":"https://avatars-next.observableusercontent.com/0de9154ee1567b822e4989a30cd0c0c3d925a451fa7b469b6e7bc3afe3c3dcfd","tier":null}],"members":[{"type":"individual","id":"90e66330888eaf5f","login":"bruce1809","name":"","avatar_url":"https://avatars-next.observableusercontent.com/0de9154ee1567b822e4989a30cd0c0c3d925a451fa7b469b6e7bc3afe3c3dcfd","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"CAP5837 - Visualization Techniques for Data - Visualizing Networks","cells":[{"id":0,"value":"md`# CAP5837 - Visualization Techniques for Data - Visualizing Networks\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"md`# FINAL PROJECT - Visualizing Networks: a primer and suggestions for large networks \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"md`## Chathura Jayaleth, Xavier Caddle and Bruce Miller\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":207,"value":"{\n let thisNetwork = basic;\n let trace1 = {\n x: thisNetwork.nodes.map(x => x.inDegree),\n type: 'histogram',\n name: 'in-degree'\n }\n let trace2 = {\n x: thisNetwork.nodes.map(x => x.outDegree),\n type: 'histogram',\n name: 'out-degree'\n }\n \n let layout = {\n title:'Degree distribution for Random Network',\n }\n const div = DOM.element('div')\n Plotly.newPlot(div, [trace1, trace2], layout)\n return div\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":206,"value":"{\n let thisNetwork = scaleFree;\n let trace1 = {\n x: thisNetwork.nodes.map(x => x.inDegree),\n type: 'histogram',\n name: 'in-degree'\n }\n let trace2 = {\n x: thisNetwork.nodes.map(x => x.outDegree),\n type: 'histogram',\n name: 'out-degree'\n }\n \n \n let layout = {\n title:'Degree distribution for Scale-free Network',\n }\n const div = DOM.element('div')\n Plotly.newPlot(div, [trace1, trace2], layout)\n return div\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":205,"value":"{\n let thisNetwork = smallWorld;\n let trace1 = {\n x: thisNetwork.nodes.map(x => x.inDegree),\n type: 'histogram',\n name: 'in-degree'\n }\n let trace2 = {\n x: thisNetwork.nodes.map(x => x.outDegree),\n type: 'histogram',\n name: 'out-degree'\n }\n let layout = {\n title:'Degree distribution for Small-world Network',\n }\n const div = DOM.element('div')\n Plotly.newPlot(div, [trace1], layout)\n return div\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"md`# Visualizing Networks\nSelect a network type below along with parameters for each\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":203,"value":"md`### Data Selection:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":55,"value":"md`\nBelow is the base graph using data from Les Miserable word associations. It uses a D3 function for forces (https://github.com/d3/d3-force)\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":202,"value":"md`\nUse the selector below to select a random network, a small world network or a scale free network example. Two other options are: Les Miserables character connection network (scale-free network example) and a Twitter data set from Stanford (Scale free network example). The selector below allows you to compare the generic three types with the two \"real-world\" networks of Les Miserables and Twitter. \n\nThe first section below identifies some parameters for how you want to display the network:\n\n*Arrows* show the direction of the edges into or out of a node.\n\n*Select Twitter to Scale and Color* - provides the option of incoming or outgoing links.\n\n*Node Scaling Factor* - provides the scaling factor as it relates to the radius around a node.\n\n*Color option* - provides options for colors if audience has color-blind members.\n\nThe options below enable you to match one of the three types to Les Miserables or Twitter to see which most closely resembles the real world data.\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":201,"value":"md`---\n#### Colors and Shape:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":200,"value":"viewof ourOptions = columns({\n selectedLinkStyles: checkbox({\n title: \"Link Styles\",\n description: \"Please select link stylings\",\n options: [\n { value: \"arrows\", label: \"Arrows\" }\n ],\n submit: false\n}),\n twitterFeature: select({\n title: \"Select Twitter to Scale and Color\",\n options: [\n { label: \"Number of Incoming Links\", value: \"0\" },\n { label: \"Number of Outgoing Links\", value: \"1\" },\n ],\n value: \"0\"\n }),\n scalingFactor: slider({\n min: scale[0],\n max: scale[1],\n precision: 0,\n title: 'Node Scaling Factor',\n description: \"Select the scaling factor for circle radius\",\n value: 7\n})\n /*, allowCollision : checkbox({\n title: \"Detect Collision\",\n description: \"Check to allow overlap\",\n options: [\n { value: \"true\", label: \"Overlap\" }\n ],\n value: \"true\",\n submit: false\n})*/\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":199,"value":"viewof colorOption = radio({\n title: 'Color Option',\n description: 'Please select your preferred color scheme',\n options: [\n { label: 'Original', value: colorScales[0] },\n { label: 'Default', value: colorScales[1] },\n { label: 'Color Blind Safe Color', value: colorScales[2] },\n { label: 'Plotly', value: colorScales[3] },\n { label: 'Plotly 20', value: colorScales[4] },\n { label: 'Plotly 20b', value: colorScales[5] },\n { label: 'Plotly 20c', value: colorScales[6] }\n ],\n value: colorScales[0]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":198,"value":"md`---\n#### Network Decomposition:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":197,"value":"viewof decompose = columns({\n enable : checkbox({\n title: \"Enable Decomposition\",\n description: \"Check to allow decomposition of the network\",\n options: [\n { value: \"true\", label: \"Decompose\" }\n ],\n value: \"false\",\n submit: false\n }),\n kmin : slider({\n min: 0,\n max: 100,\n precision: 0,\n title: 'Minimum node degree (k-min)',\n description: \"Select the minimum degree of a node\",\n value: 3\n }),\n relationFunc : select({\n title: \"Select Clustering Attribute\",\n options: (mainInputs.dataTypePicker==\"Twitter\")? [{ label: \"Degree of neighbor\", value: \"0\" }] : [\n { label: \"Degree of neighbor\", value: \"0\" },\n { label: \"First Link Attribute\", value: \"1\" },\n ],\n value: \"0\"\n }),\n combMethod : select({\n title: \"Attribute combining method\",\n options: [\n { label: \"Averaging\", value: \"0\" },\n { label: \"Addition\", value: \"1\" },\n ],\n value: \"0\"\n })\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":196,"value":"md`---\n#### Data Selection and Network Parameters:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":195,"value":"viewof randomSliders = columns({\n SWkdegree : slider({\n min: 0, \n max: 50, \n step: 1, \n value: 3,\n title: \"Small-world : Average Degree\",\n description: \"Average degree of a node in Small-world network.\"\n }),\n SWbeta : slider({\n min: 0, \n max: 1, \n step: 0.01, \n value: 0.2,\n title: \"Small-world : beta\",\n description: \"beta parameters of Small-world network generation algorithm. Defines the probability that a link is altered from being in the regular lattice.\"\n }),\n SFNbeta : slider({\n min: 0, \n max: 1, \n step: 0.01, \n value: 0.73,\n title: \"Scale-free : beta\",\n description: \"beta parameter of Scale-free Network generator algorithm. Affects the density of links.\"\n })\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":194,"value":"viewof mainInputs = columns({\n dataTypePicker : select({\n title: 'Input Data:',\n options:[\"RandomBasic\",\"RandomSmallWorld\",\"RandomScaleFree\"]\n }),\n dataSamplePicker : select({\n title: 'Sample Data:',\n options:[\"lesMiserables\",\"Twitter\"]\n }),\n numOfNodes : slider({\n min: 1, \n max: 500, \n step: 1, \n value: 77,\n title: \"Node Count\",\n description: \"Number of Nodes\"\n }),\n numOfLinks : slider({\n min: 0, \n max: 3000, \n step: 1, \n value: 254,\n title: \"Random-basic : Link Count\",\n description: \"Number of Links in Basic Random Network\"\n })\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":193,"value":"viewof chartTitle = columns({\n title1: md`####

${mainInputs.dataTypePicker} Generated Network
#Nodes: ${data.nodes.length}
#Links: ${data.links.length}

`,\n title2: md`####

${mainInputs.dataSamplePicker} Outgoing Network
#Nodes: ${sampleData.nodes.length}
#Links: ${sampleData.links.length}

`,\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":192,"value":"viewof charts = {\n let c1 = chart(data,false);\n let c2 = chart(sampleData,false);\n return columns({\n c1,\n c2,\n})\n}\n/*viewof charts = columns({\n chart,\n chart2,\n})*/","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":191,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":190,"value":"md `## Investigating Network Around a Node of Concern`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":189,"value":"md `Even though the network can be viewed as a whole, it is possible that a different type of network might evolve when viewed from a particular node and how far we go away from that node with respects to links to other nodes.\n\nIn this section we can investigate this by selected a particular node and the degrees away from the node we travel.\n\nIn the graphs below, we show Breadth First Search (BFS), which is a vertex based technique for finding a shortest path in graph. We also show Depth First Search (DFS). Depth First Search (DFS) is a edge based technique. It uses the Stack data structure, performs two stages, first visited vertices are pushed into stack and second if there is no vertices then visited vertices are popped.\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":188,"value":"viewof values = columns({\n concernColor: color({\n value: \"#11dd00\",\n title: \"Select the Fill Color of the Node of Concern\",\n description: \"Node Color\"\n}),\n concernNode: select({\n title: \"Node Selection\",\n description: \"Please select the node of concern\",\n options: distinctDataNodesSorted,\n value: distinctDataNodesSorted[0]\n}),\n concernDegreeCount: slider({\n min: 1, \n max: 20,\n step: 1, \n value: 10,\n title: \"Number of hops to investigate\",\n description: \"How deep to go from selected node.\"\n}),\n secondsMultiplier: slider({\n min: 1, \n max: 20,\n step: 1, \n value: 5,\n title: \"Seconds to wait\",\n description: \"Amount of delay between hops.\"\n})\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":187,"value":"viewof chartTitle2 = columns({\n title1: md`####

BFS ${mainInputs.dataSamplePicker} Outgoing Network for node ${values.concernNode} (Hop#: ${currentHop})

`,\n title2: md`####

DFS Limited ${mainInputs.dataSamplePicker} Outgoing Network for node ${values.concernNode} (Hop#: ${currentHop})

`,\n title3: md`####

Complete DFS ${mainInputs.dataSamplePicker} Outgoing Network for node ${values.concernNode}

`,\n})\n\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":186,"value":"viewof charts2 = {\n let c1 = chart2(concernDataBFS,true);\n let c2 = chart2(concernDataDFSLimited,true);\n let c3 = chart2(concernDataDFS,true);\n return columns({\n c1,\n c2,\n c3\n})\n}\n/*viewof charts = columns({\n chart,\n chart2,\n})*/\n\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":185,"value":"viewof paused = checkbox({\n description: \"Pause Hopping\",\n options: [{ value: \"true\", label: \"Check to Pause\" }],\n value: \"false\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":184,"value":"md `### Processing`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":183,"value":"currentHop = {\n let i = this || 0;\n if (paused) return yield i;\n while (true) { \n yield Promises.delay(1000*values.secondsMultiplier, i++); //once every second\n if(i >= values.concernDegreeCount) //reset the count if the degree count is met\n i=0;\n }\n}\n/*Adapted from: \nhttps://observablehq.com/@observablehq/introduction-to-generators\nhttps://observablehq.com/@mbostock/pause-a-generator */","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":35,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":43,"value":"drag = simulation => {\n \n function dragstarted(event) {\n if (!event.active) simulation.alphaTarget(0.3).restart();\n event.subject.fx = event.subject.x;\n event.subject.fy = event.subject.y;\n }\n \n function dragged(event) {\n event.subject.fx = event.x;\n event.subject.fy = event.y;\n }\n \n function dragended(event) {\n if (!event.active) simulation.alphaTarget(0);\n event.subject.fx = null;\n event.subject.fy = null;\n }\n \n return d3.drag()\n .on(\"start\", dragstarted)\n .on(\"drag\", dragged)\n .on(\"end\", dragended);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":181,"value":"function getData(dataType){\n if(dataType == \"RandomBasic\"){\n return basic;\n }else if (dataType == \"RandomSmallWorld\"){\n return smallWorld;\n }else if (dataType == \"RandomScaleFree\"){\n return scaleFree\n }else if (dataType == \"lesMiserables\"){\n return lesMiserables\n }\n else if (dataType == \"Twitter\"){\n //return getTwitterData();\n return coalesceTwitterData;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":180,"value":"data = { if (decompose.enable) return decompNetwork(originalNetwork,mainInputs.dataTypePicker); else return originalNetwork; }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":179,"value":"sampleData = { if (decompose.enable) return decompNetwork(sampleNetwork,mainInputs.dataSamplePicker); else return sampleNetwork; }","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":178,"value":"originalNetwork = getData(mainInputs.dataTypePicker);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":177,"value":"sampleNetwork = getData(mainInputs.dataSamplePicker);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":176,"value":"decompNetwork = (data,picker) => {\n if(picker == \"Twitter\"){\n return calcDecomposition(data, decompose.kmin, getNeighborDegreeAttribute, averageCombine);\n }else{\n let relationFunc = (decompose.relationFunc == 1) ? getFirstNeighborLinkAttribute : getNeighborDegreeAttribute;\n let combineMethod = (decompose.combMethod == 1) ? addCombine : averageCombine;\n return calcDecomposition(data, decompose.kmin, relationFunc, combineMethod);\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":175,"value":"getNumConnections = (e,inout,dataObject) => { \n if(inout == \"out\")\n return dataObject.links.filter(d=> d.source == e).length \n else if(inout == \"in\")\n return dataObject.links.filter(d=> d.target == e).length \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":174,"value":"getRadius = (d,dataType) => {\n if(dataType == \"Twitter\")\n return getScaledValue(d.attributes[ourOptions.twitterFeature],minTwitterFeature,maxTwitterFeature);\n else if ([\"RandomBasic\",\"RandomSmallWorld\",\"RandomScaleFree\"].includes(mainInputs.dataTypePicker)){\n return getScaledValue(d.attributes[0],0,1);\n }else {\n return 5;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":173,"value":"getScaledValue = (unscaled,minDataValue,maxDataValue) => { return unscaled / ((maxDataValue - minDataValue) / (ourOptions.scalingFactor - scale[0])) + scale[0]}\n// (unscaled / (old range / new range)) + min(new range)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":172,"value":"scale = [6,30]\n//[min,max]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":171,"value":"md`### Network Decomposition`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":170,"value":"function averageCombine(bigNode, smallNode){\n for(let i=0; i < bigNode.attributes.length; i++){\n bigNode.attributes[i] = (bigNode.attributes[i] + smallNode.attributes[i]) / 2;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":169,"value":"function addCombine(bigNode, smallNode){\n for(let i=0; i < bigNode.attributes.length; i++){\n bigNode.attributes[i] = bigNode.attributes[i] + smallNode.attributes[i];\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":168,"value":"function getFirstNeighborLinkAttribute(neighbor){ return neighbor.link.attributes[0]; }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":167,"value":"function getNeighborDegreeAttribute(neighbor){ return (neighbor.node.inDegree + neighbor.node.outDegree); }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":166,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":165,"value":"md`### Graph Constants`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":164,"value":"padding = 3","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":163,"value":"radius = 8","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"height = 600 - margin.top - margin.bottom","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":159,"value":"heightm = height - margin.top - margin.bottom;","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":158,"value":"width = 1000 - margin.left - margin.right","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":157,"value":"widthm = width - margin.left - margin.right;","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":156,"value":"margin = {\n return {top:30, right:20, bottom:30, left:50}\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":155,"value":"md`## Data from Mike Bostock's original D3 network visualization using Les Miserables data\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":154,"value":"lesMiserables = {\n const nodes = rawdata.nodes.map(x => ({\"id\":x.id, \"inDegree\":0, \"outDegree\":0, \"attributes\":[x.group, x.index, x.weight]}));\n const links = rawdata.links.map(x => ({\"source\":x.source, \"target\":x.target, \"attributes\":[x.value]}));\n \n const nodeMap = new Map(nodes.map(x => [x.id, x]));\n for(let i=0; i < links.length; i++){\n let src = nodeMap.get(links[i].source);\n let trgt = nodeMap.get(links[i].target);\n src.outDegree += 1;\n trgt.inDegree += 1;\n }\n \n const retval = ({ \n \"nodeAttributesNames\":[\"group\",\"index\",\"weight\"], \n \"linkAttributesNames\":[\"value\"], \n \"nodes\":nodes, \n \"links\":links,\n })\n return retval;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"rawdata = FileAttachment(\"miserables.json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":150,"value":"md`## Link Styles`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":149,"value":"linkStyle = (d) => {\n if(ourOptions.selectedLinkStyles) {\n if(ourOptions.selectedLinkStyles.includes(\"arrow\"))\n d.style('marker-end', 'url(#suit)') //Added For Arrows\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":148,"value":"md `## Color Section`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":147,"value":"colorScales = [\"original\",\"cDefault\",\"cSafe\",\"cPlotly\",\"cPlotly20\",\"cPlotly20b\",\"cPlotly20c\"]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":146,"value":"deuTranColorWay = ['#000000','#2271B2','#3DB7E9','#F748A5','#359B73','#d55e00','#e69f00','#f0e442'] //ALTS removed","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":145,"value":"normalColorWay = [\t'#6e40aa','#bf3caf','#fe4b83','#ff7847','#e2b72f','#aff05b','#52f667','#1ddfa3','#23abd8','#4c6edb']","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"color2 = {\n /*let index = 0;\n if(mainInputs.dataTypePicker == \"Twitter\")\n index = ourOptions.twitterFeature;*/\n \n if(colorOption == colorScales[0]) {\n const scale = d3.scaleOrdinal(d3.schemeCategory10);\n return d => scale(d.attributes[0]);\n }\n else {\n let d3Colors = Plotly.d3.scale.category10();\n if(colorOption == colorScales[4])\n d3Colors = Plotly.d3.scale.category20();\n else if(colorOption == colorScales[5])\n d3Colors = Plotly.d3.scale.category20b();\n if(colorOption == colorScales[6])\n d3Colors = Plotly.d3.scale.category20c();\n \n if(colorOption == colorScales[1])\n return d => ourScale(d.attributes[0],normalColorWay); //our default\n else if(colorOption == colorScales[2])\n return d => ourScale(d.attributes[0],deuTranColorWay); //color safe\n else //Plotly\n return d => d3Colors(d.attributes[0]);\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":141,"value":"ourScale = (val,colorArray) => {\n let length = colorArray.length;\n let vals = Math.abs(val).toString(); //handles negative numbers the same way as positive. cause scale to be centered at scale position 0\n let i = +vals.toString().charAt(vals.length-1)\n if(i > length)\n i = i - length;\n else if(i == length)\n i = length-1;\n return colorArray[i];\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":140,"value":"ourScale(-1,normalColorWay)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":139,"value":"ourScale(1,normalColorWay)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":138,"value":"md`## Twitter Processing Section`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":137,"value":"md ` We used the twitter data from: https://snap.stanford.edu/data/ego-Twitter.html \n\nUsing the twitter_combined file, we load and show a network. It contains all the edges in the network. The twitter combined file is quite large so we have to use some data loading techniques to load the file. \n\nWe used a technique from https://observablehq.com/@mbostock/streaming-fetch to stream the file. We modified the technique to get the text encoding instead of the byte array. To do this, we created a github repository containing the the twitter data so we get the raw file via a URL.\n\nUltimately, for presentation purposes we took a subset of the of 500 rows from the full file so everything would run smoothly.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":136,"value":"URLTW = 'https://raw.githubusercontent.com/xavieritto/twittersocialcircles/main/subsets/500.txt'\n//URLTW = 'https://raw.githubusercontent.com/xavieritto/twittersocialcircles/main/orginal/twitter_combined/twitter_combined.txt'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":135,"value":"md `#### Method 1`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":134,"value":"/*async function myFetch() {\n if(mainInputs.dataTypePicker == \"Twitter\")\n return await d3.text(URLTW);\n else\n return \" \";\n}*/","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":133,"value":"/*result3 = myFetch()\n.catch(e => {\n console.log('There has been a problem with your fetch operation: ' + e.message);\n});*/","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":132,"value":"md `#### Method 2`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":131,"value":"mutable progress = 0","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":130,"value":"/*result1 = {\n if(mainInputs.dataTypePicker == \"Twitter2\") {\n const response = await fetch(URLTW);\n\n // Check if streaming is supported.\n const reader = response.body && response.body.getReader();\n if (!reader) {\n const value = new Uint8Array(await response.arrayBuffer());\n mutable progress = value.length;\n return value;\n }\n\n // Read chunks, updating as we go.\n const values = [];\n mutable progress = 0;\n while (true) {\n const {done, value} = await reader.read();\n if (done) break;\n mutable progress += value.length;\n values.push(value);\n }\n\n // Concatenate chunks into an array.\n let uint8arrayfull = concat(Uint8Array, values);\n let dataString = new TextDecoder(\"utf-8\").decode(uint8arrayfull);\n\n return dataString;\n }\n else\n return \"\";\n}*/","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":129,"value":"function concat(type, arrays) {\n let i = 0;\n let n = 0;\n for (const a of arrays) n += a.length;\n const concat = new type(n);\n for (let a of arrays) concat.set(a, i), i += a.length;\n return concat;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":128,"value":"result = { \n return d3.text(URLTW)\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":127,"value":"md `#### Now we start to process the twitter data to get the desired format`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":126,"value":"twitterCombinedArray = result.split(/\\r?\\n/).map(d=>d.split(\" \"))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":125,"value":"getColumnAsArray = (arr,e) => {\n let t = new Array();\n arr.forEach((d)=> { t.push(d[e]) })\n return t;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":124,"value":"distinctNodes = {\n let col1 = getColumnAsArray(twitterCombinedArray,0);\n let col2 = getColumnAsArray(twitterCombinedArray,1);\n \n let set1 = [...new Set(col1)];\n let set2 = [...new Set(col2)];\n set1.concat(set2)\n let set3 = [...new Set(set1)];\n return set3.slice(0,mainInputs.numOfNodes);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":123,"value":"nodesPre = {\n let interim = distinctNodes.map(d=> { \n var returnObj = new Object();\n returnObj.id = d;\n return returnObj;\n});\n return interim;\n}\n ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":122,"value":"md `### Now we restrict the links to only those nodes which are included based on the node count`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":121,"value":"links = twitterCombinedArray.filter(d=>distinctNodes.includes(d[0]) && distinctNodes.includes(d[1])).slice(0,mainInputs.numOfLinks)\n.map(d=> { \n var returnObj = new Object();\n returnObj.source = d[0];\n returnObj.target = d[1];\n returnObj.attributes = new Array();\n //returnObj.attributes.push(1);\n return returnObj;\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":120,"value":"links.filter(d=>d.source == \"151338729\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":119,"value":"nodes.filter(d=>d.id == \"151338729\");","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":118,"value":"md `#### Now that we have the nodes and the links, we compute for each node how influential they are. Here we base this purely on how many incoming connections the node has (i.e. How many people follow that particular node). We store the value as an attribute of the node. We also store how many people that node in turn follows.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":117,"value":"getNumTwitterConnections = (e,inout) => { \n if(inout == \"out\")\n return links.filter(d=> d.source == e).length \n else if(inout == \"in\")\n return links.filter(d=> d.target == e).length \n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":116,"value":"nodes = {\n let interim = nodesPre.map(d=> { \n d.attributes = new Array();\n let inDegree = getNumTwitterConnections(d.id,\"in\");\n let outDegree = getNumTwitterConnections(d.id,\"out\")\n d.inDegree = inDegree;\n d.outDegree = outDegree;\n d.attributes.push(inDegree);\n d.attributes.push(outDegree);\n //returnObj.attributes.push(0);\n //return returnObj;\n return d;\n}); \n return interim;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":115,"value":"maxTwitterFeatureCalc = (index) => { return d3.max(nodes.map(d=>d.attributes[index])) }","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":114,"value":"minTwitterFeatureCalc = (index) => { return d3.min(nodes.map(d=>d.attributes[index])) }","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":113,"value":"maxTwitterFeature = maxTwitterFeatureCalc(ourOptions.twitterFeature)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":112,"value":"minTwitterFeature = minTwitterFeatureCalc(ourOptions.twitterFeature)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":111,"value":"md `#### Now we merge the data to get the desired format`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":110,"value":"coalesceTwitterData = {\n return ({\n \"nodeAttributesNames\":[\"numOfIncomingConnections\",\"numofOutGoing\"], \n \"linkAttributesNames\":[],\n \"nodes\": nodes,\n \"links\": links});\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":109,"value":"md `### Concern Node Processing`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":108,"value":"$39","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":107,"value":"//concernDataBFS = generateConcernGraphBFS(sampleNetwork,values.concernNode,values.concernDegreeCount);\nconcernDataBFS = generateConcernGraphBFS(sampleNetwork,values.concernNode,currentHop);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":106,"value":"md `The following performs a Breadth First search (BFS) starting at the node of concern and expands out from that node degree number of times. This gives us the vertices and edges that can be reached from the node of concern in degree number of \"steps\".`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":105,"value":"$3a","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":104,"value":"distinctDataNodes = sampleData.nodes.map(d=>d.id)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":103,"value":"distinctDataNodesSorted = {\n if(mainInputs.dataSamplePicker == \"Twitter\")\n return distinctDataNodes.map(d=>d).sort();\n else\n return d3.sort(distinctDataNodes) //distinctDataNodes.map(d=>+d).sort();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":102,"value":"md `The following is a DFS search`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":101,"value":"concernDataDFS = generateConcernGraphDFS(sampleNetwork,values.concernNode,values.concernDegreeCount);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":100,"value":"$3b","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":99,"value":"concernDataDFSLimited = generateConcernGraphLimitedDFS(sampleNetwork,values.concernNode,currentHop);\n//concernDataDFSLimited = generateConcernGraphLimitedDFS(sampleNetwork,values.concernNode,values.concernDegreeCount);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":98,"value":"$3c","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":97,"value":"md`## Network Generation`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":96,"value":"md`### Basic Directed Random Networks`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":95,"value":"basic = generateGraphBase(mainInputs.numOfNodes, mainInputs.numOfLinks)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":94,"value":"{\n let thisNetwork = basic;\n let trace1 = {\n x: thisNetwork.nodes.map(x => x.inDegree),\n type: 'histogram',\n name: 'in-degree'\n }\n let trace2 = {\n x: thisNetwork.nodes.map(x => x.outDegree),\n type: 'histogram',\n name: 'out-degree'\n }\n \n let layout = {\n title:'Degree distribution for Random Network',\n }\n const div = DOM.element('div')\n Plotly.newPlot(div, [trace1, trace2], layout)\n return div\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":93,"value":"function pickRandomNode(numNodes){\n return Math.floor(numNodes * Math.random());\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":92,"value":"function genRandomAttributes(){\n return [\n Math.random(), // how to show number between 0..1\n 100 * Math.random(), // 0 100\n Math.floor(2 * Math.random()), \n Math.floor(5 * Math.random()), // qualitative attributes with 5 levels\n Math.floor(10 * Math.random()), // 10 levels\n Math.floor(100 * Math.random()) // 100 \n ];\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":91,"value":"function generateGraphBase(numNodes, numArcs){\n let theNodes = Array(numNodes).fill(0).map( (x,i) => ({ \"id\":i, \"inDegree\":0, \"outDegree\":0, \"attributes\":genRandomAttributes()}) )\n let theArcs = Array(numArcs).fill(0).map(x => ({ \"source\":pickRandomNode(numNodes), \"target\":pickRandomNode(numNodes), \"attributes\":genRandomAttributes() }) )\n for(let i=0; i x.inDegree),\n type: 'histogram',\n name: 'in-degree'\n }\n let trace2 = {\n x: thisNetwork.nodes.map(x => x.outDegree),\n type: 'histogram',\n name: 'out-degree'\n }\n let layout = {\n title:'Degree distribution for Small-world Network',\n }\n const div = DOM.element('div')\n Plotly.newPlot(div, [trace1], layout)\n return div\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":87,"value":"$3d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":86,"value":"md`### Directed Scale-free Networks\nAlgorithm: Bollobas et.al.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":85,"value":"scaleFree = generateScaleFreeNetwork(mainInputs.numOfNodes,randomSliders.SFNbeta)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":84,"value":"{\n let thisNetwork = scaleFree;\n let trace1 = {\n x: thisNetwork.nodes.map(x => x.inDegree),\n type: 'histogram',\n name: 'in-degree'\n }\n let trace2 = {\n x: thisNetwork.nodes.map(x => x.outDegree),\n type: 'histogram',\n name: 'out-degree'\n }\n \n \n let layout = {\n title:'Degree distribution for Scale-free Network',\n }\n const div = DOM.element('div')\n Plotly.newPlot(div, [trace1, trace2], layout)\n return div\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":83,"value":"function pickPreferencialNode(nodeDegree, delta){\n let r = Math.random();\n let sumDegree = d3.sum(nodeDegree) + delta * nodeDegree.length;\n let i = 0;\n let cumuDegreeProb = (nodeDegree[0] + delta) / sumDegree; \n while(cumuDegreeProb < r){\n i += 1\n cumuDegreeProb += ( (nodeDegree[i] + delta) / sumDegree );\n }\n return i;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":82,"value":"$3e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"$3f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"md`## Included Libraries and data\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":79,"value":"import {slider,button,select,text,radio,checkbox,number,color} from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":78,"value":"import {generateKernalDensity, kernalEpanechnikovFactory} from \"@deamonpog/cap-5738-assignment-2-chathura-jayalath-ucfid-3948890\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"d3 = require(\"d3@6\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":77,"value":"Plotly = require(\"https://cdn.plot.ly/plotly-latest.min.js\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":76,"value":"columns = (args) => {\n const form = html``\n form.value = {}\n\n let cols = 0\n for (const key in args) {\n form.appendChild(args[key])\n cols++\n }\n \n form.style = `display: grid; grid-gap: 10px 15px; grid-template-columns: repeat(${cols}, auto); grid-auto-flow: row;`\n \n form.oninput = () => {\n form.value = Object.keys(args).reduce((result, key) => {\n result[key] = args[key].value\n return result\n }, Array.isArray(args) ? [] : {})\n }\n form.oninput()\n \n return form\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":75,"value":"_ = {\n const [_, fp] = await Promise.all([\n require(\"lodash@4\"),\n require(\"https://cdn.jsdelivr.net/gh/lodash/lodash@4/dist/lodash.fp.min.js\")\n ]);\n return fp(_);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W40","stdlib":"1","titling":"auto"}} 34:"$33:body"