2e:null 2f:["$","title",null,{"children":"Consistency of distances and positions through multiple runs of the same network layout | Mathieu Jacomy | Observable"}] 34:T5d1,{ graph_version; var data = layout_data.x.map((series, i) => { let mean = d3.mean(series); let deviation = d3.deviation(series); return { title: g.nodes()[i], mean: mean, deviation: deviation, lower: mean-deviation/2, upper: mean+deviation/2, rand: Math.random(), } }) // Random selection data.sort((a, b) => {return a.rand - b.rand}); data = data.filter((d,i) => {return i<10}); // Sort data.sort((a, b) => {return a.mean - b.mean}); var title = `X on ${graph_version} renderings (selection of 10 random nodes)`; var leftTitle = 'Node'; var bottomTitle = 'X position'; var usePercentage = false; const bars = vl.markErrorbar() .data(data) .encode( vl.x().fieldQ('lower').title(''), vl.x2().fieldQ('upper'), vl.y().fieldN('title') ); let xScaleSettings = {}; if (usePercentage) { xScaleSettings.domain = [0, 1]; } let xAxisSettings = {grid: true}; if (usePercentage) { xAxisSettings.format = '%'; } let yScaleSettings = { domain: data.map(d => d.title) }; const points = vl.markPoint({filled: true, color: '#000'}) .data(data) .encode( vl.x().fieldQ('mean') .title(bottomTitle) .axis(xAxisSettings) .scale(xScaleSettings) , vl.y().fieldN('title') .title(leftTitle) .scale(yScaleSettings) ); return vl.layer(bars, points) .title(title) .width(500) .render(); }35:T5d1,{ graph_version; var data = layout_data.y.map((series, i) => { let mean = d3.mean(series); let deviation = d3.deviation(series); return { title: g.nodes()[i], mean: mean, deviation: deviation, lower: mean-deviation/2, upper: mean+deviation/2, rand: Math.random(), } }) // Random selection data.sort((a, b) => {return a.rand - b.rand}); data = data.filter((d,i) => {return i<10}); // Sort data.sort((a, b) => {return a.mean - b.mean}); var title = `Y on ${graph_version} renderings (selection of 10 random nodes)`; var leftTitle = 'Node'; var bottomTitle = 'Y position'; var usePercentage = false; const bars = vl.markErrorbar() .data(data) .encode( vl.x().fieldQ('lower').title(''), vl.x2().fieldQ('upper'), vl.y().fieldN('title') ); let xScaleSettings = {}; if (usePercentage) { xScaleSettings.domain = [0, 1]; } let xAxisSettings = {grid: true}; if (usePercentage) { xAxisSettings.format = '%'; } let yScaleSettings = { domain: data.map(d => d.title) }; const points = vl.markPoint({filled: true, color: '#000'}) .data(data) .encode( vl.x().fieldQ('mean') .title(bottomTitle) .axis(xAxisSettings) .scale(xScaleSettings) , vl.y().fieldN('title') .title(leftTitle) .scale(yScaleSettings) ); return vl.layer(bars, points) .title(title) .width(500) .render(); }36:T5f3,{ graph_version; var data = layout_data.d.map((series, i) => { let mean = d3.mean(series); let deviation = d3.deviation(series); return { title: 'Pair '+i, mean: mean, deviation: deviation, lower: mean-deviation/2, upper: mean+deviation/2, rand: Math.random(), } }) // Random selection data.sort((a, b) => {return a.rand - b.rand}); data = data.filter((d,i) => {return i<10}); // Sort data.sort((a, b) => {return a.mean - b.mean}); var title = `DISTANCE on ${graph_version} renderings (selection of 10 random node pairs)`; var leftTitle = 'Node pair'; var bottomTitle = 'Distance between the two nodes'; var usePercentage = false; const bars = vl.markErrorbar() .data(data) .encode( vl.x().fieldQ('lower').title(''), vl.x2().fieldQ('upper'), vl.y().fieldN('title') ); let xScaleSettings = {}; if (usePercentage) { xScaleSettings.domain = [0, 1]; } let xAxisSettings = {grid: true}; if (usePercentage) { xAxisSettings.format = '%'; } let yScaleSettings = { domain: data.map(d => d.title) }; const points = vl.markPoint({filled: true, color: '#000'}) .data(data) .encode( vl.x().fieldQ('mean') .title(bottomTitle) .axis(xAxisSettings) .scale(xScaleSettings) , vl.y().fieldN('title') .title(leftTitle) .scale(yScaleSettings) ); return vl.layer(bars, points) .title(title) .width(500) .render(); }37:T508,{ graph_version; var data = [layout_data.C_max].map((series, i) => { let mean = d3.mean(series); let deviation = d3.deviation(series); return { title: 'C_max', mean: mean, deviation: deviation, lower: mean-deviation/2, upper: mean+deviation/2 } }) var title = `Cmax (Maximal connected-closeness of the layout) on ${graph_version} renderings`; var leftTitle = ''; var bottomTitle = ''; var usePercentage = false; const bars = vl.markErrorbar() .data(data) .encode( vl.x().fieldQ('lower').title(''), vl.x2().fieldQ('upper'), vl.y().fieldN('title') ); let xScaleSettings = {}; if (usePercentage) { xScaleSettings.domain = [0, 1]; } let xAxisSettings = {grid: true}; if (usePercentage) { xAxisSettings.format = '%'; } let yScaleSettings = { domain: data.map(d => d.title) }; const points = vl.markPoint({filled: true, color: '#000'}) .data(data) .encode( vl.x().fieldQ('mean') .title(bottomTitle) .axis(xAxisSettings) .scale(xScaleSettings) , vl.y().fieldN('title') .title(leftTitle) .scale(yScaleSettings) ); return vl.layer(bars, points) .title(title) .width(500) .render(); }38:T4f3,{ graph_version; var data = [layout_data.Delta_max].map((series, i) => { let mean = d3.mean(series); let deviation = d3.deviation(series); return { title: 'Delta_max', mean: mean, deviation: deviation, lower: mean-deviation/2, upper: mean+deviation/2 } }) var title = `Δmax of the layout on ${graph_version} renderings`; var leftTitle = ''; var bottomTitle = ''; var usePercentage = false; const bars = vl.markErrorbar() .data(data) .encode( vl.x().fieldQ('lower').title(''), vl.x2().fieldQ('upper'), vl.y().fieldN('title') ); let xScaleSettings = {}; if (usePercentage) { xScaleSettings.domain = [0, 1]; } let xAxisSettings = {grid: true}; if (usePercentage) { xAxisSettings.format = '%'; } let yScaleSettings = { domain: data.map(d => d.title) }; const points = vl.markPoint({filled: true, color: '#000'}) .data(data) .encode( vl.x().fieldQ('mean') .title(bottomTitle) .axis(xAxisSettings) .scale(xScaleSettings) , vl.y().fieldN('title') .title(leftTitle) .scale(yScaleSettings) ); return vl.layer(bars, points) .title(title) .width(500) .render(); }39:T7f8,md`Now that you get the idea, re-run the layout a few dozen times, and take a look at the summarized figures. It's just a little convoluted because we reduce the data twice: one over the layouts, and one over the nodes or node pairs. In case of doubt, just ignore the last column.

Feature	Average	Std. Deviation
Average X (nodes) over ${graph_version} layouts	${d3.mean(layout_data.x.map(series => d3.mean(series))).toLocaleString()}	${d3.deviation(layout_data.x.map(series => d3.mean(series))).toLocaleString()}
Std. deviation of X (nodes) over ${graph_version} layouts	${d3.mean(layout_data.x.map(series => d3.deviation(series))).toLocaleString()}	${d3.deviation(layout_data.x.map(series => d3.deviation(series))).toLocaleString()}
Average Y (nodes) over ${graph_version} layouts	${d3.mean(layout_data.y.map(series => d3.mean(series))).toLocaleString()}	${d3.deviation(layout_data.y.map(series => d3.mean(series))).toLocaleString()}
Std. deviation of Y (nodes) over ${graph_version} layouts	${d3.mean(layout_data.y.map(series => d3.deviation(series))).toLocaleString()}	${d3.deviation(layout_data.y.map(series => d3.deviation(series))).toLocaleString()}
Average distance (node pairs) over ${graph_version} layouts	${d3.mean(layout_data.d.map(series => d3.mean(series))).toLocaleString()}	${d3.deviation(layout_data.d.map(series => d3.mean(series))).toLocaleString()}
Std. deviation of distance (node pairs) over ${graph_version} layouts	${d3.mean(layout_data.d.map(series => d3.deviation(series))).toLocaleString()}	${d3.deviation(layout_data.d.map(series => d3.deviation(series))).toLocaleString()}

`3a:T57c,applyLayout = function() { // Settings: let iterations = 100; let settings = {} settings.linLogMode = false settings.outboundAttractionDistribution = false settings.adjustSizes = false settings.edgeWeightInfluence = 0 settings.scalingRatio = 10 settings.strongGravityMode = true settings.gravity = 0.05 settings.slowDown = 1 settings.barnesHutOptimize = false settings.barnesHutTheta = 0.5 // Applying a random layout before starting layout.random.assign(g); // Applying FA2 fa2.assign(g, {iterations: iterations, settings: settings}); mutable graph_version++ // We use this to track the changes of the graph across the notebook // Update the layout data let dcount = 0; for (let i2=0; i2 { layout_data.x[i].push(g.getNodeAttribute(nid, 'x')); layout_data.y[i].push(g.getNodeAttribute(nid, 'y')); }) let cData = computeConnectedCloseness(g); layout_data.C_max.push(cData.C_max) layout_data.Delta_max.push(cData.Delta_max) } 3b:T11ad,computeConnectedCloseness = function(g, settings){ // Default settings settings = settings || {} settings.epsilon = settings.epsilon || 0.03; // 3% settings.grid_size = settings.grid_size || 10; // This is an optimization thing, it's not the graphical grid const pairs_of_nodes_sampled = sample_pairs_of_nodes(); const connected_pairs = g.edges().map(eid => { const n1 = g.getNodeAttributes(g.source(eid)); const n2 = g.getNodeAttributes(g.target(eid)); const d = Math.sqrt(Math.pow(n1.x-n2.x, 2)+Math.pow(n1.y-n2.y, 2)); return d; }) // Grid search for C_max let range = [0, Math.max(d3.max(pairs_of_nodes_sampled), d3.max(connected_pairs))]; let C_max = 0; let distances_index = {}; let Delta, old_C_max, C, i, target_index, indicators_over_Delta; do { for(i=0; i<=settings.grid_size; i++){ Delta = range[0] + (range[1]-range[0]) * i / settings.grid_size; if (distances_index[Delta] === undefined) { distances_index[Delta] = computeIndicators(Delta, g, pairs_of_nodes_sampled, connected_pairs); } } old_C_max = C_max; C_max = 0; indicators_over_Delta = Object.values(distances_index); indicators_over_Delta.forEach((indicators, i) => { C = indicators.C; if (C > C_max) { C_max = C; target_index = i; } }); range = [ indicators_over_Delta[Math.max(0, target_index-1)].Delta, indicators_over_Delta[Math.min(indicators_over_Delta.length-1, target_index+1)].Delta ] } while ( (C_max-old_C_max)/C_max >= settings.epsilon/10 ) const Delta_max = find_Delta_max(indicators_over_Delta, settings.epsilon); const indicators_of_Delta_max = computeIndicators(Delta_max, g, pairs_of_nodes_sampled, connected_pairs); // Resistance to misinterpretation if (indicators_of_Delta_max.C < 0.1) { return { undefined, E_percent_of_Delta_max: undefined, p_percent_of_Delta_max: undefined, P_edge_of_Delta_max: undefined, C_max: indicators_of_Delta_max.C } } else { return { Delta_max, E_percent_of_Delta_max: indicators_of_Delta_max.E_percent, p_percent_of_Delta_max: indicators_of_Delta_max.p_percent, P_edge_of_Delta_max: indicators_of_Delta_max.P_edge, C_max: indicators_of_Delta_max.C } } // Internal methods // Compute indicators given a distance Delta function computeIndicators(Delta, g, pairs_of_nodes_sampled, connected_pairs) { const connected_pairs_below_Delta = connected_pairs.filter(d => d<=Delta); const pairs_below_Delta = pairs_of_nodes_sampled.filter(d => d<=Delta); // Count of edges shorter than Delta // note: actual count const E = connected_pairs_below_Delta.length; // Proportion of edges shorter than Delta // note: actual count const E_percent = E / connected_pairs.length; // Count of node pairs closer than Delta // note: sampling-dependent const p = pairs_below_Delta.length; // Proportion of node pairs closer than Delta // note: sampling-dependent, but it cancels out const p_percent = p / pairs_of_nodes_sampled.length; // Connected closeness const C = E_percent - p_percent; // Probability that, considering two nodes closer than Delta, they are connected // note: p is sampling-dependent, so we have to normalize it here. const possible_edges_per_pair = g.undirected ? 1 : 2; const P_edge = E / (possible_edges_per_pair * p * (g.order * (g.order-1)) / pairs_of_nodes_sampled.length); return { Delta, E_percent, p_percent, P_edge, // Note: P_edge is complentary information, not strictly necessary C }; } function sample_pairs_of_nodes(){ if (g.order<2) return []; let samples = []; let node1, node2, n1, n2, d, c; const samples_count = g.size; // We want as many samples as edges if (samples_count<1) return []; for (let i=0; i d.C); const Delta_max = d3.min( indicators_over_Delta.filter(d => ( d.C >= (1-epsilon) * C_max ) ), d => d.Delta ); return Delta_max; } }3c:T3716,function draw(_g, _settings) { // SETTINGS let settings = _settings || {}; // Note: all sizes except canvas size are based on a 1000px x 1000px canvas // (this allows resizing the whole thing without losing tuning) // // 👇 Default values settings.zoom = settings.zoom || 0.9; // slight de-zoom for comfort settings.size = settings.size || 300; settings.node_size = settings.node_size || 5; settings.node_color = settings.node_color || 'rgba(0, 0, 0, 1)'; settings.edge_color_Dm = settings.edge_color_Dm || false; settings.edge_color = settings.edge_color || 'rgba(150, 150, 150, 0.8)'; settings.edge_thickness = settings.edge_thickness || 2; settings.margin_bottom = settings.margin_bottom || 130; settings.small_legend = settings.small_legend || false; let ccData = computeConnectedCloseness(_g); let Delta_max = ccData.Delta_max; let C_max = ccData.C_max; let C_max_threshold = 0.1; // Create canvas const canvas = document.createElement('canvas'); canvas.width = settings.size; canvas.height = settings.size + settings.margin_bottom; const ctx = canvas.getContext('2d'); // Clone network, so that we do not modify the original let g = _g.copy(); // Prepare network data addMissingVisualizationData(); rescaleGraphToGraphicSpace(); let Delta_max_scaled = Delta_max * (settings.size/1000); // Paint a white background ctx.fillStyle="white"; ctx.beginPath(); ctx.rect(0, 0, settings.size, settings.size+settings.margin_bottom); ctx.fill(); ctx.closePath(); // Connected-closeness Grid if (C_max >= C_max_threshold) { drawGrid(Delta_max_scaled); } // Scale canvas ctx.scale(settings.size/1000, settings.size/1000); // Shuffle edges (important for coloring) let edges = g.edges(); shuffle(edges); // Draw each edge ctx.lineCap="round"; ctx.lineJoin="round"; ctx.fillStyle = 'rgba(0, 0, 0, 0)'; ctx.lineWidth = settings.edge_thickness; if (!(settings.edge_color_Dm && C_max >= C_max_threshold)) { ctx.strokeStyle = settings.edge_color; } edges.forEach(function(eid){ const ns = g.getNodeAttributes(g.source(eid)); const nt = g.getNodeAttributes(g.target(eid)); const d = Math.sqrt(Math.pow(ns.x-nt.x, 2)+Math.pow(ns.y-nt.y, 2)) if (settings.edge_color_Dm && C_max >= C_max_threshold) { if (d <= Delta_max * 1.01) { ctx.strokeStyle = 'rgba(96, 168, 98, 0.8)'; } else { ctx.strokeStyle = 'rgba(229, 120, 114, 0.8)'; } } ctx.beginPath(); ctx.moveTo(ns.x, ns.y); ctx.lineTo(nt.x, nt.y); ctx.stroke(); ctx.closePath(); }); // Draw each node ctx.lineWidth = 0; ctx.shadowColor = 'transparent'; g.nodes().forEach(function(nid){ const n = g.getNodeAttributes(nid); ctx.beginPath(); ctx.arc(n.x, n.y, settings.node_size * n.size, 0, 2 * Math.PI, false); ctx.fillStyle = settings.node_color; ctx.fill(); ctx.closePath(); }); // Reset current transformation matrix to the identity matrix ctx.setTransform(1, 0, 0, 1, 0, 0); // Connected-closeness information if (C_max >= C_max_threshold) { // Draw the scale drawScaleV(ctx, 20, settings.size/2, Delta_max_scaled); drawText(ctx, 'Δmax', 25, settings.size/2 + 4, "start"); drawScaleH(ctx, settings.size/2, settings.size-20, Delta_max_scaled); drawText(ctx, 'Δmax', settings.size/2, settings.size -28, "center"); drawText( ctx, Math.round(100*ccData.E_percent_of_Delta_max) +(settings.small_legend ? `% edges ≤ Δmax` : `% of connected nodes are Δmax or closer` ), settings.size/2, settings.size + 10, "center" ); // Draw pie chart const chartAreaXOffset = settings.size/2 - 300 + (settings.small_legend ? 160 : 0) const pieChartR = 27; const pieChartCenterX = chartAreaXOffset + 25; const pieChartCenterY = settings.size + 55; drawPie(pieChartCenterX, pieChartCenterY, pieChartR); drawSquare(chartAreaXOffset + 67, settings.size + 35, 12, '#DDD'); drawText( ctx, (Math.round(100*ccData.E_percent_of_Delta_max) - Math.round(100*ccData.C_max)) +(settings.small_legend ? `% edges ≤ Δmax due to chance` : `% of connected nodes are closer than Δmax and would be if edges were at random` ), chartAreaXOffset + 80, settings.size + 40, "start" ); drawSquare(chartAreaXOffset + 67, settings.size + 55, 12, 'rgb(49, 130, 189)'); drawText( ctx, Math.round(100*ccData.C_max) +(settings.small_legend ? `% edges ≤ Δmax due to layout` : `% of connected nodes are closer than Δmax due to the effect of the layout` ), chartAreaXOffset + 80, settings.size + 60, "start" ); drawSquare(chartAreaXOffset + 67, settings.size + 75, 12, '#FFF'); drawText( ctx, (100-Math.round(100*ccData.C_max)-Math.round(100*ccData.E_percent_of_Delta_max)+Math.round(100*ccData.C_max)) +(settings.small_legend ? `% edges > Δmax` : `% of connected nodes are more distant than Δmax` ), chartAreaXOffset + 80, settings.size + 80, "start" ); drawText( ctx, settings.small_legend ? `(2 nodes ≤ Δmax) ⇒ ${Math.round(100*ccData.P_edge_of_Delta_max)}% chance connected` : `Two nodes closer than Δmax have a ${Math.round(100*ccData.P_edge_of_Delta_max)}% probability to be connected` , settings.size/2, settings.size + 110, "center" ); } else { drawText(ctx, 'Δmax is not applicable.', settings.size/2, settings.size + 10, "center"); } // Internal methods function rescaleGraphToGraphicSpace() { const referenceSize = 1000; // General barycenter resize let xbarycenter = 0; let ybarycenter = 0; let wtotal = 0; let dx; let dy; let ratio; g.nodes().forEach(function(nid){ let 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 = referenceSize / (2 * dmax); Delta_max *= ratio; // Resize g.nodes().forEach(function(nid){ let n = g.getNodeAttributes(nid); n.x = referenceSize / 2 + settings.zoom * (n.x - xbarycenter) * ratio; n.y = referenceSize / 2 + settings.zoom * (n.y - ybarycenter) * ratio; n.size *= ratio; }) } function addMissingVisualizationData() { let colorIssues = 0; let coordinateIssues = 0; g.nodes().forEach(function(nid){ let n = g.getNodeAttributes(nid); if (!isNumeric(n.x) || !isNumeric(n.y)) { const 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() { let candidates; let d2 = Infinity; const heuristicRatio = 5 * Math.sqrt(g.order); while (d2 > 1) { candidates = [2 * Math.random() - 1, 2 * Math.random() - 1]; d2 = candidates[0] * candidates[0] + candidates[1] * candidates[1]; } return candidates.map(function(d){return d * heuristicRatio}); } } function shuffle(array) { var currentIndex = array.length, temporaryValue, randomIndex; // While there remain elements to shuffle... while (0 !== currentIndex) { // Pick a remaining element... randomIndex = Math.floor(Math.random() * currentIndex); currentIndex -= 1; // And swap it with the current element. temporaryValue = array[currentIndex]; array[currentIndex] = array[randomIndex]; array[randomIndex] = temporaryValue; } return array; } function drawText(ctx, txt, x, y, textAlign) { ctx.textAlign = textAlign || "start"; ctx.font = settings.small_legend ? "300 12px sans-serif" : "500 14px sans-serif"; ctx.lineWidth = 4; ctx.fillStyle = '#FFFFFF'; ctx.strokeStyle = '#FFFFFF'; ctx.fillText( txt, x, y ); ctx.strokeText( txt, x, y ); ctx.lineWidth = 0; ctx.fillStyle = '#000'; ctx.fillText( txt, x, y ); } function drawPie(pieChartCenterX, pieChartCenterY, pieChartR) { drawPieSlice(pieChartCenterX, pieChartCenterY, pieChartR, 0, (ccData.E_percent_of_Delta_max-ccData.C_max), '#DDD'); drawPieSlice(pieChartCenterX, pieChartCenterY, pieChartR, (ccData.E_percent_of_Delta_max-ccData.C_max), ccData.C_max, 'rgb(49, 130, 189)'); drawPieSlice(pieChartCenterX, pieChartCenterY, pieChartR, (ccData.E_percent_of_Delta_max), (1-ccData.E_percent_of_Delta_max), '#FFF'); drawPieSliceBorder(pieChartCenterX, pieChartCenterY, pieChartR, 0, (ccData.E_percent_of_Delta_max-ccData.C_max)); drawPieSliceBorder(pieChartCenterX, pieChartCenterY, pieChartR, (ccData.E_percent_of_Delta_max-ccData.C_max), ccData.C_max); drawPieSliceBorder(pieChartCenterX, pieChartCenterY, pieChartR, (ccData.E_percent_of_Delta_max), (1-ccData.E_percent_of_Delta_max)); ctx.strokeStyle = 'rgba(0, 0, 0, 1)'; ctx.lineCap="round"; ctx.lineJoin="round"; ctx.fillStyle = 'rgba(0, 0, 0, 0)'; ctx.lineWidth = 1.5; ctx.beginPath(); ctx.arc(pieChartCenterX, pieChartCenterY, pieChartR, 0, 2 * Math.PI); ctx.stroke(); } function drawSquare(x, y, size, color) { ctx.strokeStyle = 'rgba(0, 0, 0, 1)'; ctx.lineCap="round"; ctx.lineJoin="round"; ctx.fillStyle = color; ctx.lineWidth = 1.5; ctx.beginPath(); ctx.fillRect(x-size/2, y-size/2, size, size); ctx.rect(x-size/2, y-size/2, size, size); ctx.stroke(); ctx } function drawPieSlice(x, y, r, percentOffset, percent, color) { const startAngle = percentOffset * 2 * Math.PI - Math.PI/2; const endAngle = (percentOffset + percent) * 2 * Math.PI - Math.PI/2; ctx.strokeStyle = 'rgba(0, 0, 0, 1)'; ctx.lineCap="round"; ctx.lineJoin="round"; ctx.fillStyle = color; ctx.lineWidth = 1.5; ctx.beginPath(); ctx.moveTo(x, y); ctx.arc(x, y, r, startAngle, endAngle); ctx.fill(); ctx.closePath(); } function drawPieSliceBorder(x, y, r, percentOffset, percent) { const startAngle = percentOffset * 2 * Math.PI - Math.PI/2; const endAngle = (percentOffset + percent) * 2 * Math.PI - Math.PI/2; ctx.strokeStyle = 'rgba(0, 0, 0, 1)'; ctx.lineCap="round"; ctx.lineJoin="round"; ctx.lineWidth = 1.5; ctx.beginPath(); ctx.moveTo(x, y); ctx.arc(x, y, r, startAngle, endAngle); ctx.stroke(); ctx.closePath(); } function drawScaleH(ctx, x, y, D) { const height = 8; ctx.strokeStyle = 'rgba(0, 0, 0, 1)'; ctx.lineCap="round"; ctx.lineJoin="round"; ctx.fillStyle = 'rgba(0, 0, 0, 0)'; ctx.lineWidth = 1.5; ctx.beginPath(); ctx.moveTo(x-D/2, y-height/2) ctx.lineTo(x-D/2, y+height/2) ctx.moveTo(x-D/2, y); ctx.lineTo(x+D/2, y); ctx.moveTo(x+D/2, y-height/2) ctx.lineTo(x+D/2, y+height/2) ctx.stroke(); ctx.closePath(); } function drawScaleV(ctx, x, y, D) { const width = 8; ctx.strokeStyle = 'rgba(0, 0, 0, 1)'; ctx.lineCap="round"; ctx.lineJoin="round"; ctx.fillStyle = 'rgba(0, 0, 0, 0)'; ctx.lineWidth = 1.5; ctx.beginPath(); ctx.moveTo(x-width/2, y-D/2) ctx.lineTo(x+width/2, y-D/2) ctx.moveTo(x, y-D/2); ctx.lineTo(x, y+D/2); ctx.moveTo(x-width/2, y+D/2) ctx.lineTo(x+width/2, y+D/2) ctx.stroke(); ctx.closePath(); } function drawGrid(D) { ctx.strokeStyle = 'rgba(107, 174, 214, 1)'; ctx.lineCap="round"; ctx.lineJoin="round"; ctx.fillStyle = 'rgba(0, 0, 0, 0)'; ctx.lineWidth = 0.5; for (let d=0.5 * D; d\n

\n `;\n form.layoutAndRenderButton.onclick = () => {\n applyLayout();\n };\n \n return form;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":173,"value":"md`The nodes are in a certain position. Click on the button above to re-run the layout. The nodes will be arranged differently, because the algorithm is non-deterministic. Hence the question: how does it compare from one time to another?\n\nHere we just look at node positions and the distances between pairs of nodes. Run the layout a number of time, and look at the charts below.\n\n**Dots represent averages, and error bars represent standard deviations.** Not all the nodes and node pairs are displayed, because there are too many of them. Just 10 are picked at random. They are sorted from min to max.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":316,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":337,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":385,"value":"{\n const form = html``;\n form.layoutAndRenderButton.onclick = () => {\n applyLayout();\n };\n \n return form;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":381,"value":"md`As you can see in the two charts above, the coordinates of nodes vary widely from one time to another (high variance). This is expected, as the layout could be rotated arbitrarily. Consequently, node positions will average to (0,0) over many iterations.\n\nNow, below are the distances between the pairs of nodes. Contrary to positions they do not average to zero, and their variance is much lower. Not all pairs have the same average value and standard deviation, though.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":340,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":388,"value":"md`Also find below the layout's [best connected-closeness (Cmax)](https://observablehq.com/@jacomyma/highlights-on-connected-closeness?collection=@jacomyma/quest-for-connected-closeness) and its distance (Δmax). Those are remarkably stable.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":358,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":361,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":321,"value":"{\n const form = html``;\n form.layoutAndRenderButton.onclick = () => {\n applyLayout();\n };\n \n return form;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":392,"value":"$39","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":431,"value":"md`The take-aways, for this network at least, are the following:\n* The average X and Y of the average node tends to 0\n* X varies a lot for the average node (idem for Y)\n* The distances vary more over node pairs than over layouts.\n\n**In short, even if the positions are not stable, the distances are.**\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"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":15,"value":"Graph = require('graphology@0.17.1/dist/graphology.umd.min.js')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"GraphologyLibrary = require('graphology-library@0.3.0/dist/graphology-library.min.js')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"gexf = GraphologyLibrary.gexf","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":66,"value":"layout = GraphologyLibrary.layout","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"fa2 = GraphologyLibrary.layoutForceAtlas2","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"md`### Load the network into Graphology`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"networkGEXF = FileAttachment(\"Rio+20.gexf\").text()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"g = gexf.parse(Graph, networkGEXF);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":97,"value":"{\n applyLayout();\n return md`(here we apply layout at init)`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":64,"value":"mutable graph_version = 0; // We use the graph version to track graph changes across cells","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":124,"value":"md`### Require d3`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":123,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":264,"value":"md`### Load Vega Lite for plotting`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":267,"value":"import {vl} from '@vega/vega-lite-api'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"md`### Routines`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":189,"value":"layout_data = {\n let d = [];\n for (let i2=0; i2[]),\n y: g.nodes().map(nid=>[]),\n d: d\n }\n};","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":60,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":45,"value":"$3b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"$3c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W3d","stdlib":"1","titling":"auto"}} 33:"$32:body"