31:Te1b,renderNetwork = function(){ var settings = {} // Feel free to edit following settings // Canvas size settings.width = image_size settings.height = image_size settings.offset = 20 // Margin // Drawing nodes, labels and edges settings.node_size = 0.3 settings.edge_color = 'rgba(200, 200, 200, 0.5)' // --- (end of settings) // Fix missing coordinates and/or colors addMissingVisualizationData() // Change the coordinates of the network to fit the canvas space rescaleGraphToGraphicSpace() // Paint a white background ctx.beginPath() ctx.rect(0, 0, settings.width, settings.height) ctx.fillStyle="white" ctx.fill() ctx.closePath() // Draw each edge g.edges().forEach(function(eid){ var ns = g.getNodeAttributes(g.source(eid)) var nt = g.getNodeAttributes(g.target(eid)) ctx.beginPath() ctx.lineCap="round" ctx.lineJoin="round" ctx.strokeStyle = settings.edge_color ctx.fillStyle = 'rgba(0, 0, 0, 0)'; ctx.lineWidth = settings.edge_thickness ctx.moveTo(ns.x, ns.y) ctx.lineTo(nt.x, nt.y) ctx.stroke() ctx.closePath() }) // Draw each node g.nodes().forEach(function(nid){ var n = g.getNodeAttributes(nid) ctx.beginPath() ctx.arc(n.x, n.y, settings.node_size * n.size, 0, 2 * Math.PI, false) ctx.lineWidth = 0 ctx.fillStyle = n.color ctx.shadowColor = 'transparent' ctx.fill() }) // --- // Functions function rescaleGraphToGraphicSpace() { // General barycenter resize var xbarycenter = 0 var ybarycenter = 0 var wtotal = 0 var dx var dy var ratio g.nodes().forEach(function(nid){ var n = g.getNodeAttributes(nid) // We use node size as weight (default to 1) n.size = n.size || 1 xbarycenter += n.size * n.x ybarycenter += n.size * n.y wtotal += n.size }) xbarycenter /= wtotal ybarycenter /= wtotal var dmax = 0 // Maximal distance from barycenter g.nodes().forEach(function(nid){ var n = g.getNodeAttributes(nid) var d = Math.sqrt( Math.pow(n.x - xbarycenter, 2) + Math.pow(n.y - ybarycenter, 2) ) dmax = Math.max(dmax, d) }) ratio = ( Math.min(settings.width, settings.height) ) / (2 * dmax) // Initial resize g.nodes().forEach(function(nid){ var n = g.getNodeAttributes(nid) n.x = settings.width / 2 + (n.x - xbarycenter) * ratio n.y = settings.height / 2 + (n.y - ybarycenter) * ratio //n.size *= ratio }) } function addMissingVisualizationData() { var colorIssues = 0 var coordinateIssues = 0 g.nodes().forEach(function(nid){ var n = g.getNodeAttributes(nid) if (!isNumeric(n.x) || !isNumeric(n.y)) { var c = getRandomCoordinates() n.x = c[0] n.y = c[1] coordinateIssues++ } if (!isNumeric(n.size)) { n.size = 1 } if (n.color == undefined) { n.color = '#665' colorIssues++ } }) if (coordinateIssues > 0) { alert('Note: '+coordinateIssues+' nodes had coordinate issues. We carelessly fixed them.') } function isNumeric(n) { return !isNaN(parseFloat(n)) && isFinite(n) } function getRandomCoordinates() { var candidates var d2 = Infinity while (d2 > 1) { candidates = [2 * Math.random() - 1, 2 * Math.random() - 1] d2 = candidates[0] * candidates[0] + candidates[1] * candidates[1] } var heuristicRatio = 5 * Math.sqrt(g.order) return candidates.map(function(d){return d * heuristicRatio}) } } }32:[{"id":"9dc5154f16a784b7c605a9699f43aa41566a9c86bc16e5cf779bc06149c818e1e5cd7e1a0954e2e85ebe9fcdc48a5b9f211daf2be3d9148653f9567c0d96ece5","href":"https://static.observableusercontent.com/files/9dc5154f16a784b7c605a9699f43aa41566a9c86bc16e5cf779bc06149c818e1e5cd7e1a0954e2e85ebe9fcdc48a5b9f211daf2be3d9148653f9567c0d96ece5","name":"Rio+20.gexf","type":"application/xml","lastModified":1583852387950.188,"size":549283}] 2f:{"title":"Force-directed network layout","cells":[{"id":0,"value":"md`# Force-directed network layout\n\n*In this notebook I load a network file, apply a layout, and render it as a static pixel image in a Canvas.*\n\n*Check [this notebook](https://observablehq.com/@jacomyma/force-directed-network-layout-with-d3) for the same thing but with the d3.js layout algorithm.*\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":65,"value":"md`Load the [GEXF](https://gephi.org/gexf/format/) file of a network into [Graphology](https://github.com/graphology/graphology).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":44,"value":"networkGEXF = FileAttachment(\"Rio+20.gexf\").text()","pinned":false,"hidden":false,"mode":"ojs"},{"id":29,"value":"g = gexf.parse(Graph, networkGEXF);","pinned":false,"hidden":false,"mode":"ojs"},{"id":75,"value":"md`Apply a force-directed placement algorithm; here [Force Atlas 2](https://journals.plos.org/plosone/article?id=10.1371/journal.pone.0098679).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"applyLayout = function() {\n // Settings:\n let iterations = 100;\n\n let settings = {}\n\n settings.linLogMode = false\n settings.outboundAttractionDistribution = false\n settings.adjustSizes = false\n settings.edgeWeightInfluence = 0\n settings.scalingRatio = 10\n settings.strongGravityMode = true\n settings.gravity = 0.05\n settings.slowDown = 1\n settings.barnesHutOptimize = false\n settings.barnesHutTheta = 0.5\n\n // Applying a random layout before starting\n layout.random.assign(g);\n\n // Applying FA2\n fa2.assign(g, {iterations: iterations, settings: settings});\n\n}\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":179,"value":"md`It looks like this:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":92,"value":"network_visualization = {\n const parent = DOM.element('div');\n return parent;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":182,"value":"md`Click on the button below to do it again. What do you observe?`","pinned":false,"hidden":false,"mode":"ojs"},{"id":149,"value":"{\n const form = html``;\n form.layoutAndRenderButton.onclick = () => {\n applyLayout();\n renderNetwork();\n };\n \n // Note: we also apply and render once at init\n applyLayout();\n renderNetwork(); \n \n return form;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":188,"value":"md`The layout is different every time; but it also bears some similarity. Can you spot which features are invariant?\n

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":128,"value":"image_size = 800","pinned":false,"hidden":false,"mode":"ojs"},{"id":95,"value":"canvas = { \n return d3.select(network_visualization).append(\"canvas\")\n .attr('width', image_size)\n .attr('height', image_size)\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":121,"value":"ctx = {\n return canvas.node().getContext('2d');\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":116,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"md`

\n\n--- \n\n# Appendix\n\n*This is stuff we need to load in this notebook to make it work.*\n\n### Require Graphology stuff`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2,"value":"Graph = require('graphology')","pinned":false,"hidden":false,"mode":"ojs"},{"id":256,"value":"GraphologyLibrary = require('graphology-library/dist/graphology-library.min.js')","pinned":false,"hidden":false,"mode":"ojs"},{"id":35,"value":"gexf = GraphologyLibrary.gexf","pinned":false,"hidden":false,"mode":"ojs"},{"id":26,"value":"layout = GraphologyLibrary.layout","pinned":false,"hidden":false,"mode":"ojs"},{"id":18,"value":"fa2 = GraphologyLibrary.layoutForceAtlas2","pinned":false,"hidden":false,"mode":"ojs"},{"id":102,"value":"md`### Require d3`","pinned":false,"hidden":false,"mode":"ojs"},{"id":104,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}