2d:null 2e:["$","title",null,{"children":"Network Visualisations | tyr1981 | Observable"}] 33:T2393,function NodeLinkViewer(w = 400, h = 400, interactive = false) { let data = null; //an array of graphs let r = new Renderer(w, h); let savedDiv = null; let nodeRadius = 6; this.name = "Node Link"; this.description = "A simple node-link visualisation of network data."; this.getData = () => { return data; }; //these will be changed in draw to something more appropriate let x = (n) => n.x*w; let y = (n) => n.y*h; let highlightedNodes = [[]]; let selectedNodes = []; let network = -1; //which network is 'current' or active this.loadData = (d) => { //d may be one graph or an array of graphs; //if it's one graph we wrap it up into an array data = Array.isArray(d) ? d : [d]; highlightedNodes = []; selectedNodes = []; network = 0; return this; }; this.setNetwork = (which) => { if (which >=0 && which < data.length){ network = which; this.draw(savedDiv); } } this.getNetwork = () => network; this.clearTask = () => { highlightedNodes = []; selectedNodes = []; this.draw(savedDiv); }; this.transform = d3.zoomIdentity; const zFn = d3 .zoom() .on("zoom", ({ transform }) => { this.transform = transform; this.draw(savedDiv); }) .filter((ev) => ev.detail == 2 || ev.shiftKey); if (interactive) r.selection().call(zFn); this.draw = (div) => { savedDiv = div; r.push(); r.clear(); r.translate(this.transform.x, this.transform.y).scale( this.transform.k, this.transform.k ); let avgLabelLength = d3.mean(data[network].nodes.map( n => n.label.length)); let textSize = Math.min(14, Math.max(w,h)/ 7. / Math.log(data[network].nodes.length)/ Math.sqrt(avgLabelLength)); r.textSize(textSize); r.textAlign("middle"); nodeRadius = textSize/2; //padding left let leftMost = d3.minIndex(data[network].nodes.map( n => n.x*w - r.textMetrics(n.label).width/2)); let padLeft = r.textMetrics(data[network].nodes[leftMost].label).width/2; let rightMost = d3.maxIndex(data[network].nodes.map( n => n.x*w + r.textMetrics(n.label).width/2)); let padRight = r.textMetrics(data[network].nodes[leftMost].label).width/2; // console.log(padLeft, padRight); x = (n) => n.x * (w - padLeft - padRight) + padLeft; y = (n) => n.y * (h - textSize - 2*nodeRadius) + textSize + nodeRadius/2; if (data == null || data.length == 0) { r.text("No data loaded", w / 2, h / 2); } // else { //put squares around highlighted nodes for (let j=0; j < highlightedNodes.length; j++){ r.fill(["rgba(150,150,255,0.7)","rgba(255,165,0,0.7)","rgb(148,0,168,0.7)"][j]); for (let i = 0; i < highlightedNodes[j].length; i++) { let n = data[network].nodes[highlightedNodes[j][i]]; r.stroke(); let squareSize = Math.max(7,nodeRadius*2); r.polygon([ [x(n) - squareSize, y(n) - squareSize], [x(n) + squareSize, y(n) - squareSize], [x(n) + squareSize, y(n) + squareSize], [x(n) - squareSize, y(n) + squareSize] ]); } } //draw edges //transparency depends on number of edges let alpha = Math.max(0.02,0.5 / Math.log(data[network].edges.length)); for (let i = 0; i < data[network].edges.length; i++) { //color them one colour if mouseovered... if ( data[network].edges[i].n1 == mouseOveredNodeIdx || data[network].edges[i].n2 == mouseOveredNodeIdx ) { r.fill("rgb(30,150,30)"); r.stroke("rgb(30,150,30)"); } else if ( selectedNodes.includes(data[network].edges[i].n1) || selectedNodes.includes(data[network].edges[i].n2) ) { r.stroke("rgba(0,150,0,0.9)"); } else { r.fill("rgba(0,0,0," + alpha + ")"); r.stroke("rgba(0,0,0," + alpha + ")"); } r.lines([ [ [ x(data[network].nodes[data[network].edges[i].n1]), y(data[network].nodes[data[network].edges[i].n1]) ], [ x(data[network].nodes[data[network].edges[i].n2]), y(data[network].nodes[data[network].edges[i].n2]) ] ] ]); } //draw nodes for (let i = 0; i < data[network].nodes.length; i++) { let n = data[network].nodes[i]; let nodeSelected = selectedNodes.findIndex((d) => d == i) >= 0; //draw node r.stroke("rgba(150,150,150,0.5)"); if (mouseOveredNodeIdx == i) r.fill("rgb(30,100,30,0.8)"); else if (nodeSelected) r.fill("rgba(0,150,0,0.8)"); else r.fill("rgb(0,0,0,0.3)"); r.ellipse(x(n), y(n), nodeRadius); //draw label r.stroke(); if (nodeSelected) r.fill("rgba(0,50,0,0.9)"); else r.fill("rgba(0,0,0,0.7)"); r.text(n.label, x(n), y(n)-nodeRadius/2); } } r.pop(); div.innerHTML = ""; div.appendChild(r.render()); }; const getNodeIdx = (p) => { for (let i = 0; i < data[network].nodes.length; i++) { let n = data[network].nodes[i]; let cx = x(n); let cy = y(n); let dist = (cx - p[0]) * (cx - p[0]) + (cy - p[1]) * (cy - p[1]); if (dist < 25) return i; } }; let nodeMousePressedIdx = undefined; let mouseDownP = undefined; if (interactive) r.addListener("mousedown", (ev) => { let p = this.transform.invert(d3.pointer(ev)); mouseDownP = p; nodeMousePressedIdx = getNodeIdx(p); }); r.addListener("mouseup", (ev) => { let p = this.transform.invert(d3.pointer(ev)); if (!mouseDownP || (p[0] == mouseDownP[0] && p[1] == mouseDownP[1])) { //do mouseclick stuff here, so we can check it's not the end of a drag let nIdx = getNodeIdx(p); if (nIdx>=0) this.toggleClickedNode(nIdx); this.draw(savedDiv); } mouseDownP = undefined; nodeMousePressedIdx = undefined; // console.log("mouseup"); }); let mouseOveredNodeIdx = undefined; if (interactive) r.addListener("mousemove", (ev) => { // console.log("mousemove"); if (data[network].nodes[nodeMousePressedIdx]) { let p = this.transform.invert(d3.pointer(ev)); data[network].nodes[nodeMousePressedIdx].x = p[0] / w; data[network].nodes[nodeMousePressedIdx].y = p[1] / h; this.draw(savedDiv); } else { let p = this.transform.invert(d3.pointer(ev)); if (mouseOveredNodeIdx != getNodeIdx(p)) { mouseOveredNodeIdx = getNodeIdx(p); this.draw(savedDiv); } } }); this.setSelectedNodes = (sns) => { selectedNodes = sns; this.draw(savedDiv); }; this.getSelectedNodes = () => [...selectedNodes]; this.setHighlightedNodes = (hns) => { highlightedNodes = hns; this.draw(savedDiv); }; this.getHighlightedNodes = () => [...highlightedNodes]; this.toggleClickedNode = (cn) => { let index = selectedNodes.findIndex((d) => d == cn); if (index >= 0) selectedNodes.splice(index, 1); else selectedNodes.push(cn); // mutable sele = selectedNodes; this.draw(savedDiv); }; this.setIntroduction = (step, context) => { if (step == 0) context.gui.question.innerHTML = "This is a Node Link diagram. It is used to show network data. " + "You can zoom the visualisation by pressing SHIFT while scrolling your mouse wheel; " + "you can pan it by pressing SHIFT while you drag the mouse. " + "We highly recommend this method if you can source a mouse with scroll. " + "Alternatively, double click to zoom in and press shift while double clicking to zoom out; " + "to pan, press shift and drag the mouse. Try it out!"; else if (step == 1) context.gui.question.innerHTML = "Nodes are shown as 2D points and connections as lines between them. " + "You can select and deselect nodes by clicking on them. " + "You can also pick and move a node around. Try it out."; else if (step == 2) context.gui.question.innerHTML = "You can use the diagram to answer questions about the network. " + "For example, to tell how many nodes are in the network you can count " + "or estimate the number of points. To tell how many connections, just count the lines."; else if (step == 3) context.gui.question.innerHTML = "To check how many connections a node has, count how many lines are coming out of it. " + "To determine if two nodes are connected, check if there is a line between them."; else if (step == 4) context.gui.question.innerHTML = "Two nodes have a common neighbor if there are lines connecting these nodes to another shared node. " + "Multiple connections can form longer paths between pairs of nodes not directly connected."; else context.gui.question.innerHTML = ""; }; }34:T2a88,function MatrixViewer(w = 400, h = 400, interactive = false) { let data = null; //array of networks let r = new Renderer(w, h); let grid = []; let savedDiv = null; let pad = 75; this.name = "Adjacency Matrix"; this.description = "A simple adjacency matrix visualisation of network data."; let highlightedNodes = []; let selectedNodes = []; let network = -1; let toOrder = null; let fromOrder = null; this.loadData = (d) => { data = Array.isArray(d) ? d : [d]; highlightedNodes = []; selectedNodes = []; if (data.length >= 1) this.setNetwork(0); return this; }; this.setNetwork = (which) => { if (which >= 0 && which < data.length) network = which; else return; toOrder = ("order" in data[network]) ? data[network].order :d3.range(data[network].nodes.length); fromOrder = d3.range(data[network].nodes.length); toOrder.map ( (i,j) => fromOrder[i] = j); grid = []; for (let i = 0; i < data[network].nodes.length; i++) { grid.push(new Array(data[network].nodes.length).fill(false)); } for (let i = 0; i < data[network].edges.length; i++) { let source = fromOrder[data[network].edges[i].n1]; let target = fromOrder[data[network].edges[i].n2]; grid[source][target] = true; } // throttleDraw(); this.draw(savedDiv); }; this.getNetwork = () => network; this.getData = () => { return data; }; this.clearTask = () => { highlightedNodes = []; selectedNodes = []; }; this.transform = d3.zoomIdentity; const zFn = d3 .zoom() .on("zoom", ({ transform }) => { this.transform = transform; this.draw(savedDiv); // throttleDraw(); }) .filter((ev) => ev.detail == 2 || ev.shiftKey); if (interactive) r.selection().call(zFn); let throttleDraw = _.throttle(() => this.draw(savedDiv), 50); this.draw = (div) => { if (div == null) return; savedDiv = div; r.push(); r.clear(); r.translate(this.transform.x, this.transform.y).scale( this.transform.k, this.transform.k ); if (data == null || data.length==0) r.text("No data loaded", w / 2, h / 2); else { //what's the longest label? let maxLabel = data[network].nodes[ d3.maxIndex(data[network].nodes, n => n.label.length)].label; const metrics = r.textMetrics(maxLabel); const aspectRatio = metrics.width/metrics.height; let maxLabelLength = d3.max(data[network].nodes.map( n => n.label.length)); let step = Math.min(15, w / (aspectRatio + data[network].nodes.length)); let textSize = Math.min(13,step*0.8); r.textSize(textSize); pad = aspectRatio*step; //r.textMetrics(maxLabel).width; let mh = pad+step*data[network].nodes.length; let mw = mh; //first, simulate empty cells by drawing a grayish //background and then drawing thin white lines r.fill("rgb(245,245,245)"); r.polygon([[pad,pad],[mw,pad],[mw,mh],[pad,mh]]); r.stroke("rgb(255,255,255)"); r.strokeWidth(step*0.1); for (let i = 0; i < data[network].nodes.length; i++) { r.line([[pad+i*step, 0],[pad+i*step,mh]]); r.line([[0,pad+i*step],[mw, pad+i*step]]); } r.stroke("rgba(0,0,0,0)"); //draw nodes (cols/rows) for (let i = 0; i < data[network].nodes.length; i++) { if ((mouseOveredNode1 && mouseOveredNode1) == i) { r.fill("rgb(200,250,200)"); r.stroke("rgba(0,0,0,0)"); r.polygon([ [pad + i * step, 0], [pad + i * step + step, 0], [pad + i * step + step, mh], [pad + i * step, mh] ]); } else if ((mouseOveredNode2 && mouseOveredNode2) == i) { r.fill("rgb(200,250,200)"); r.stroke("rgba(0,0,0,0)"); r.polygon([ [0, pad-0.5 + i * step], [mw, pad-0.5 + i * step], [mw, pad+0.5 + i * step + step], [0, pad+0.5 + i * step + step] ]); } else if (selectedNodes.includes(toOrder[i])) { r.fill("rgba(50,200,50,0.8)"); r.stroke("rgba(0,0,0,0)"); r.polygon([ [0, pad-0.5 + i * step], [mw, pad-0.5 + i * step], [mw, pad+0.5 + i * step + step], [0, pad+0.5 + i * step + step] ]); r.polygon([ [pad-0.5 + i * step, 0], [pad-0.5 + i * step + step, 0], [pad+0.5 + i * step + step, mh], [pad-0.5 + i * step, mh] ]); } else { for (let j = 0; j toOrder[a] === i) >= 0) r.fill("rgb(50,50,50)"); else r.fill("rgb(0,0,0)"); r.text(data[network].nodes[toOrder[i]].label, pad-5, pad + i * step + step); } //draw column labels for (let i = 0; i < data[network].nodes.length; i++) { r.stroke(); if (selectedNodes.findIndex( a => toOrder[a] === i) >= 0) r.fill("rgb(50,50,50)"); else r.fill("rgb(0,0,0)"); r.translate(pad + i * step, pad-5); r.rotate(90); r.text(data[network].nodes[toOrder[i]].label, 0, 0); r.rotate(-90); r.translate(-pad - i * step, -(pad-5)); } } r.pop(); div.innerHTML = ""; div.appendChild(r.render()); }; r.addListener("click", (ev) => { let p = this.transform.invert(d3.pointer(ev)); let step = Math.min(15,(w - pad) / data[network].nodes.length); let i = Math.trunc((p[0] - pad) / step); let j = Math.trunc((p[1] - pad) / step); //only select if there's an edge if (i<0 && j>=0) this.toggleClickedNode(j); else if (i>=0 && j<0) this.toggleClickedNode(i); this.draw(savedDiv); // throttleDraw(); }); let mouseOveredNode1 = undefined; let mouseOveredNode2 = undefined; if (interactive) r.addListener("mousemove", (ev) => { let p = this.transform.invert(d3.pointer(ev)); let step = Math.min(15,(w - pad) / data[network].nodes.length); let i = Math.trunc((p[0] - pad) / step); let j = Math.trunc((p[1] - pad) / step); if (i >= 0 && j >= 0 && (grid[i][j] || grid[j][i])) { mouseOveredNode1 = i; mouseOveredNode2 = j; } else if (i< 0 && j>=0){ mouseOveredNode1 = undefined; mouseOveredNode2 = j; } else if (i>=0 && j<0){ mouseOveredNode1 = i; mouseOveredNode2 = undefined; } else { mouseOveredNode1 = undefined; mouseOveredNode2 = undefined; } // throttleDraw(); this.draw(savedDiv); }); this.setSelectedNodes = (sns) => { selectedNodes = sns; this.draw(savedDiv); // throttleDraw(); }; this.getSelectedNodes = () => [...selectedNodes]; this.setHighlightedNodes = (hns) => { highlightedNodes = hns; this.draw(savedDiv); // throttleDraw(); }; this.getHighlightedNodes = () => [...highlightedNodes]; this.toggleClickedNode = (cn) => { let index = selectedNodes.findIndex( d => d == toOrder[cn]); if (index >= 0) selectedNodes.splice(index, 1); else selectedNodes.push(toOrder[cn]); console.log( selectedNodes.map ( i => data[network].nodes[i].label)); this.draw(savedDiv); // throttleDraw(); }; this.setIntroduction = (step, context) => { if (step == 0) context.gui.question.innerHTML = "This is an Adjacency Matrix and it can be used to show network data. " + "You can zoom the visualisation by pressing SHIFT while scrolling your mouse wheel; " + "you can pan it by pressing SHIFT while you drag the mouse. " + "We highly recommend this method if you can source a mouse with scroll. " + "Alternatively, double click to zoom in and press shift while double clicking to zoom out; " + "to pan, press shift and drag the mouse. Try it out!"; else if (step == 1) context.gui.question.innerHTML = "Nodes are shown as columns and rows of the matrix. " + "Two nodes are connected if there is a point at the intersection of their rows and columns. " + "You can select and deselect nodes by clicking on their row or column headers. "; else if (step == 2) context.gui.question.innerHTML = "You can use the matrix to answer questions about the network. " + "For example, to tell how many nodes are in the network you can count or " + "estimate the number of rows or columns. To tell how many connections, " + "count the number of dots and divide them by two (that's because the matrix is " + "mirrored around the diagonal - it contains the connections twice!)"; else if (step == 3) context.gui.question.innerHTML = "To check how many connections a node has, simply count how many dots there are on its column or row. " + "To determine if two nodes are connected, check if there is a dot at the intersection of their row and column."; else if (step == 4) context.gui.question.innerHTML = "Two nodes have a common neighbor if there's another node that shares a dot with both other nodes. " + "Nodes can be connected through multiple hops over other nodes."; else context.gui.question.innerHTML = ""; }; }35:[] 31:{"id":"bf547c2bfc090618","slug":"network-vis","title":"Network Visualisations","thumbnail":"9fc1b57a42d70c6c31ed7a62d68b295182bd1177909b14908abe9d7f7c2d61b8","access_level":"public","create_time":"$D2024-09-11T12:21:03.173Z","update_time":"$D2024-12-09T18:13:24.032Z","view_time":null,"first_public_time":"$D2024-09-18T13:55:37.414Z","has_unpublished_edits":null,"fork":false,"stars":5,"starred":false,"owner":{"type":"team","id":"0eea6200fa793072","login":"tyr1981","name":"tyr1981","avatar_url":"https://avatars-next.observableusercontent.com/66f967001deee18aef0611cb3db26e44b3673352ea83d80f5c042b1d468d7b3a","tier":"starter_2024"},"version":57,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"e7e6bc615f03bb8a","login":"tyr1981","name":"tyr1981","avatar_url":"https://avatars-next.observableusercontent.com/dfb74df6c39ed24d6e79e44cfc79136ab36233a17d1e111ef6dfd91050833ec8","tier":null}],"members":[{"type":"team","id":"0eea6200fa793072","login":"tyr1981","name":"tyr1981","avatar_url":"https://avatars-next.observableusercontent.com/66f967001deee18aef0611cb3db26e44b3673352ea83d80f5c042b1d468d7b3a","tier":"starter_2024","role":"editor"},{"type":"individual","id":"e7e6bc615f03bb8a","login":"tyr1981","name":"tyr1981","avatar_url":"https://avatars-next.observableusercontent.com/dfb74df6c39ed24d6e79e44cfc79136ab36233a17d1e111ef6dfd91050833ec8","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":5,"collection":{"id":"2479ec79deb66c52","slug":"visunit","title":"VisUnit","owner":{"id":"0eea6200fa793072","login":"tyr1981","name":"tyr1981"}},"type":"notebook","body":{"title":"Network Visualisations","cells":[{"id":0,"value":"# Network Visualisations","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"The notebook implements two simple network visualisations: a node-link diagram and an adjacency matrix. You can explore them below with some datasets imported from our [network test-suite](https://observablehq.com/@tyr1981/networktestsuite).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":8,"value":"viewof datasetName = Inputs.radio(Object.keys(allData), {\n label: \"Dataset\",\n value: Object.keys(allData)[1]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"viewof viewerName = Inputs.radio([\"NodeLinkViewer\", \"MatrixViewer\"], {\n label: \"Select a viewer\",\n value: \"NodeLinkViewer\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"viewof interactive = Inputs.checkbox([\"Interactive\"], { label: \"Interactive\" })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"{\n let s = \"\";\n if (viewerName == \"NodeLinkViewer\") s += \"Mouse over nodes to highlight them and their connections. Click nodes to select them permanently. Drag nodes and drag them around.\";\n else\n s +=\n \"Mouse over cells/connections or column/row headers to highlight their rows and columns. To select nodes, click either on the row or column headers. \";\n return md`${s}`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"{\n let s = \"\";\n if (interactive && viewerName == \"NodeLinkViewer\")\n s +=\n \"Hold shift to zoom/pan, drag to move a node and mouseover to highlight.\";\n if (interactive && viewerName == \"MatrixViewer\")\n s += \"Hold shift to zoom/pan and mouseover to highlight.\";\n return md`${s}`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"{\n let div = document.createElement(\"div\");\n if (viewerName == \"NodeLinkViewer\")\n new NodeLinkViewer(600, 600, interactive.length > 0)\n .loadData(allData[datasetName])\n .draw(div);\n else\n new MatrixViewer(600, 600, interactive.length > 0)\n .loadData(allData[datasetName])\n .draw(div);\n return div;\n \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"## Data","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":23,"value":"import { networkTesting } from \"@tyr1981/networktestsuite\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"allData = networkTesting.data","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"## Viewers","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":34,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"import { Renderer } from \"@jwolondon/renderer\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 32:"$31:body"