31: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}); } } }32:[{"id":"9dc5154f16a784b7c605a9699f43aa41566a9c86bc16e5cf779bc06149c818e1e5cd7e1a0954e2e85ebe9fcdc48a5b9f211daf2be3d9148653f9567c0d96ece5","href":"https://static.observableusercontent.com/files/9dc5154f16a784b7c605a9699f43aa41566a9c86bc16e5cf779bc06149c818e1e5cd7e1a0954e2e85ebe9fcdc48a5b9f211daf2be3d9148653f9567c0d96ece5","name":"Rio+20.gexf","type":"application/xml","lastModified":1584297045515.756,"size":549283}] 2f:{"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"},{"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 the force-directed placement algorithm provided by D3.`","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"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":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":292,"value":"{\n applyLayout();\n renderNetwork();\n}","pinned":true,"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":298,"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":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"}