2d:null 2e:["$","title",null,{"children":"Force-directed network layout | Mathieu Jacomy | Observable"}] 33: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}) } } }34:[{"id":"9dc5154f16a784b7c605a9699f43aa41566a9c86bc16e5cf779bc06149c818e1e5cd7e1a0954e2e85ebe9fcdc48a5b9f211daf2be3d9148653f9567c0d96ece5","href":"https://static.observableusercontent.com/files/9dc5154f16a784b7c605a9699f43aa41566a9c86bc16e5cf779bc06149c818e1e5cd7e1a0954e2e85ebe9fcdc48a5b9f211daf2be3d9148653f9567c0d96ece5","name":"Rio+20.gexf","type":"application/xml","lastModified":1583852387950.188,"size":549283}] 31:{"id":"ada71b76a6910f91","slug":"force-directed-network-layout","title":"Force-directed network layout","thumbnail":"30587c520238ad98d815304e52fd9276bc3247f1df09b0ecd2deaaa388571cda","access_level":"public","create_time":"$D2020-03-10T13:00:12.968Z","update_time":"$D2024-06-14T11:34:55.988Z","view_time":null,"first_public_time":"$D2020-03-10T15:02:29.904Z","has_unpublished_edits":null,"fork":false,"stars":4,"starred":false,"owner":{"type":"team","id":"314a0a5985c09d6c","login":"jacomyma","name":"Mathieu Jacomy","avatar_url":"https://avatars-next.observableusercontent.com/4496a2bc190392af306e4fcc2cc12dec9fe2acc458657e9bb35aecbeb5322d71","tier":"starter_2024"},"version":266,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"5877bce6260ce3ea","login":"jacomyma","name":"Mathieu Jacomy","avatar_url":"https://avatars-next.observableusercontent.com/4496a2bc190392af306e4fcc2cc12dec9fe2acc458657e9bb35aecbeb5322d71","tier":null}],"members":[{"type":"individual","id":"5877bce6260ce3ea","login":"jacomyma","name":"Mathieu Jacomy","avatar_url":"https://avatars-next.observableusercontent.com/4496a2bc190392af306e4fcc2cc12dec9fe2acc458657e9bb35aecbeb5322d71","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":4,"collection":{"id":"82494eb254f5af57","slug":"force-directed-network-layout","title":"Force-directed network layout","owner":{"id":"314a0a5985c09d6c","login":"jacomyma","name":"Mathieu Jacomy"}},"type":"notebook","body":{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":44,"value":"networkGEXF = FileAttachment(\"Rio+20.gexf\").text()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"g = gexf.parse(Graph, networkGEXF);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":179,"value":"md`It looks like this:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":92,"value":"network_visualization = {\n const parent = DOM.element('div');\n return parent;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":182,"value":"md`Click on the button below to do it again. What do you observe?`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":128,"value":"image_size = 800","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":121,"value":"ctx = {\n return canvas.node().getContext('2d');\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":116,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"Graph = require('graphology')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":256,"value":"GraphologyLibrary = require('graphology-library/dist/graphology-library.min.js')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":35,"value":"gexf = GraphologyLibrary.gexf","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"layout = GraphologyLibrary.layout","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"fa2 = GraphologyLibrary.layoutForceAtlas2","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":102,"value":"md`### Require d3`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":104,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 32:"$31:body"