2d:null 2e:["$","title",null,{"children":"Force-directed network layout (with D3) | Mathieu Jacomy | Observable"}] 33:Te14,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) // Prepare network addMissingVisualizationData(); 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) { console.warn('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":1584297045515.756,"size":549283}] 31:{"id":"bbed0638defc59ca","slug":"force-directed-network-layout-with-d3","title":"Force-directed network layout (with D3)","thumbnail":"5c8fcd52b8e926dd450e011146ac19c7cd42a21f876c8fde85d03dc7e2e9cc86","access_level":"public","create_time":"$D2020-03-15T18:30:45.515Z","update_time":"$D2024-06-14T11:21:30.924Z","view_time":null,"first_public_time":"$D2020-03-15T18:59:28.425Z","has_unpublished_edits":null,"fork":{"id":"ada71b76a6910f91","slug":"force-directed-network-layout","title":"Force-directed network layout","owner":{"id":"314a0a5985c09d6c","login":"jacomyma","name":"Mathieu Jacomy"}},"stars":0,"starred":false,"owner":{"type":"team","id":"314a0a5985c09d6c","login":"jacomyma","name":"Mathieu Jacomy","avatar_url":"https://avatars-next.observableusercontent.com/4496a2bc190392af306e4fcc2cc12dec9fe2acc458657e9bb35aecbeb5322d71","tier":"starter_2024"},"version":300,"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":0,"collection":null,"type":"notebook","body":{"title":"Force-directed network layout (with D3)","cells":[{"id":0,"value":"md`# Force-directed network layout (with D3)\n\n*In this notebook I load a network file, apply a layout, and render it as a static pixel image in a Canvas. I use the layout algorithm provided by [D3.js](https://d3js.org/).*\n\n*Check [this notebook](https://observablehq.com/@jacomyma/force-directed-network-layout) for the same thing but with Graphology's layout algorithms.*\n\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 the force-directed placement algorithm provided by D3.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"applyLayout = function() {\n \n // Graphology system to d3 system\n let node_index = {}\n let nodes = g.nodes().map((nid,i)=>{\n node_index[nid] = i\n return {index: i, nid:nid}\n });\n let links = g.edges().map(eid=>{return {source: node_index[g.source(eid)], target: node_index[g.target(eid)]}});\n \n let simulation = d3.forceSimulation(nodes)\n .force(\"charge\", d3.forceManyBody())\n .force(\"link\", d3.forceLink(links))\n .force(\"x\", d3.forceX())\n .force(\"y\", d3.forceY())\n .stop();\n\n // See https://github.com/d3/d3-force/blob/master/README.md#simulation_tick\n for (let i = 0, n = Math.ceil(Math.log(simulation.alphaMin()) / Math.log(1 - simulation.alphaDecay())); i < n; ++i) {\n simulation.tick();\n }\n \n // Back to the graphology stuff\n nodes.forEach(n=>{\n g.setNodeAttribute(n.nid, 'x', n.x);\n g.setNodeAttribute(n.nid, 'y', n.y);\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":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":292,"value":"{\n applyLayout();\n renderNetwork();\n}","pinned":true,"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":298,"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":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"