2f:T1428,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 if (settings.sample === undefined) { settings.sample = false; } let pairs_of_nodes_sampled; if (settings.sample) { pairs_of_nodes_sampled = sample_pairs_of_nodes(); } else { pairs_of_nodes_sampled = get_all_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) || 0)]; let C_max = 0; let distances_index = {}; let Delta, old_C_max, C, i, indicators_over_Delta; let target_index = -1; 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 { let n1 = g.getNodeAttributes(n1id); g.nodes().forEach(n2id => { if (n1id != n2id) { let n2 = g.getNodeAttributes(n2id); let d = Math.sqrt(Math.pow(n1.x-n2.x, 2)+Math.pow(n1.y-n2.y, 2)); pairs.push(d) } }) }) return pairs; } function find_Delta_max(indicators_over_Delta, epsilon) { const C_max = d3.max(indicators_over_Delta, d => d.C); const Delta_max = d3.min( indicators_over_Delta.filter(d => ( d.C >= (1-epsilon) * C_max ) ), d => d.Delta ); return Delta_max; } }30:T36ba,function draw(_g, _settings, data) { // 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 Delta_max = data.Delta_max; let C_max = data.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*data.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*data.E_percent_of_Delta_max) - Math.round(100*data.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*data.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*data.C_max)-Math.round(100*data.E_percent_of_Delta_max)+Math.round(100*data.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*data.P_edge_of_Delta_max)}% chance connected` : `Two nodes closer than Δmax have a ${Math.round(100*data.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, (data.E_percent_of_Delta_max-data.C_max), '#DDD'); drawPieSlice(pieChartCenterX, pieChartCenterY, pieChartR, (data.E_percent_of_Delta_max-data.C_max), data.C_max, 'rgb(49, 130, 189)'); drawPieSlice(pieChartCenterX, pieChartCenterY, pieChartR, (data.E_percent_of_Delta_max), (1-data.E_percent_of_Delta_max), '#FFF'); drawPieSliceBorder(pieChartCenterX, pieChartCenterY, pieChartR, 0, (data.E_percent_of_Delta_max-data.C_max)); drawPieSliceBorder(pieChartCenterX, pieChartCenterY, pieChartR, (data.E_percent_of_Delta_max-data.C_max), data.C_max); drawPieSliceBorder(pieChartCenterX, pieChartCenterY, pieChartR, (data.E_percent_of_Delta_max), (1-data.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 let n = g.getNodeAttributes(nid);\n n.y = -n.y;\n });\n return g;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":482,"value":"indicators_celegans = computeConnectedCloseness(celegans, {sample: false});","pinned":false,"hidden":false,"mode":"ojs"},{"id":488,"value":"{\n return draw(\n celegans,\n {\n size: 900,\n node_size: 0.8,\n edge_thickness: 0.4\n },\n indicators_celegans\n ).canvas\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":643,"value":"## Stable","pinned":false,"hidden":false,"mode":"md"},{"id":645,"value":"stable = {\n let g = gexf.parse(Graph, STABLE_GEXF);\n // We need to invert y since the convention is different\n g.nodes().forEach(nid=>{\n let n = g.getNodeAttributes(nid);\n n.y = -n.y;\n });\n return g;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":675,"value":"indicators_stable = computeConnectedCloseness(stable, {sample: false});","pinned":false,"hidden":false,"mode":"ojs"},{"id":673,"value":"{\n return draw(\n stable,\n {\n size: 900,\n node_size: 0.8,\n edge_thickness: 0.4\n },\n indicators_stable\n ).canvas\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":696,"value":"## Clique","pinned":false,"hidden":false,"mode":"md"},{"id":699,"value":"clique = {\n let g = gexf.parse(Graph, CLIQUE_GEXF);\n // We need to invert y since the convention is different\n g.nodes().forEach(nid=>{\n let n = g.getNodeAttributes(nid);\n n.y = -n.y;\n });\n return g;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":703,"value":"indicators_clique = computeConnectedCloseness(clique, {sample: false});","pinned":false,"hidden":false,"mode":"ojs"},{"id":706,"value":"{\n return draw(\n clique,\n {\n size: 900,\n node_size: 0.8,\n edge_thickness: 0.4\n },\n indicators_clique\n ).canvas\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":709,"value":"## Star","pinned":false,"hidden":false,"mode":"md"},{"id":717,"value":"star = {\n let g = gexf.parse(Graph, STAR_GEXF);\n // We need to invert y since the convention is different\n g.nodes().forEach(nid=>{\n let n = g.getNodeAttributes(nid);\n n.y = -n.y;\n });\n return g;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":726,"value":"indicators_star = computeConnectedCloseness(star, {sample: false});","pinned":false,"hidden":false,"mode":"ojs"},{"id":735,"value":"{\n return draw(\n star,\n {\n size: 900,\n node_size: 0.8,\n edge_thickness: 0.4\n },\n indicators_star\n ).canvas\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":711,"value":"## Circle","pinned":false,"hidden":false,"mode":"md"},{"id":720,"value":"circle = {\n let g = gexf.parse(Graph, CIRCLE_GEXF);\n // We need to invert y since the convention is different\n g.nodes().forEach(nid=>{\n let n = g.getNodeAttributes(nid);\n n.y = -n.y;\n });\n return g;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":729,"value":"indicators_circle = computeConnectedCloseness(circle, {sample: false});","pinned":false,"hidden":false,"mode":"ojs"},{"id":738,"value":"{\n return draw(\n circle,\n {\n size: 900,\n node_size: 0.8,\n edge_thickness: 0.4\n },\n indicators_circle\n ).canvas\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":715,"value":"## Lattice","pinned":false,"hidden":false,"mode":"md"},{"id":723,"value":"lattice = {\n let g = gexf.parse(Graph, LATTICE_GEXF);\n // We need to invert y since the convention is different\n g.nodes().forEach(nid=>{\n let n = g.getNodeAttributes(nid);\n n.y = -n.y;\n });\n return g;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":732,"value":"indicators_lattice = computeConnectedCloseness(lattice, {sample: false});","pinned":false,"hidden":false,"mode":"ojs"},{"id":741,"value":"{\n return draw(\n lattice,\n {\n size: 900,\n node_size: 0.8,\n edge_thickness: 0.4\n },\n indicators_lattice\n ).canvas\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":35,"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":37,"value":"Graph = require('graphology@0.17.1/dist/graphology.umd.min.js')","pinned":false,"hidden":false,"mode":"ojs"},{"id":544,"value":"GraphologyLibrary = require('graphology-library@0.3.0/dist/graphology-library.min.js')","pinned":false,"hidden":false,"mode":"ojs"},{"id":42,"value":"gexf = GraphologyLibrary.gexf","pinned":false,"hidden":false,"mode":"ojs"},{"id":45,"value":"CElegans_GEXF = FileAttachment(\"C Elegans.gexf\").text()","pinned":false,"hidden":false,"mode":"ojs"},{"id":647,"value":"CLIQUE_GEXF = FileAttachment(\"Clique 30.gexf\").text()","pinned":false,"hidden":false,"mode":"ojs"},{"id":653,"value":"STABLE_GEXF = FileAttachment(\"Stable 30.gexf\").text();","pinned":false,"hidden":false,"mode":"ojs"},{"id":656,"value":"STAR_GEXF = FileAttachment(\"Star 30.gexf\").text();","pinned":false,"hidden":false,"mode":"ojs"},{"id":659,"value":"CIRCLE_GEXF = FileAttachment(\"Circle 30.gexf\").text();","pinned":false,"hidden":false,"mode":"ojs"},{"id":662,"value":"LATTICE_GEXF = FileAttachment(\"Square Lattice 100.gexf\").text();","pinned":false,"hidden":false,"mode":"ojs"},{"id":51,"value":"md`### Require d3`","pinned":false,"hidden":false,"mode":"ojs"},{"id":54,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":57,"value":"md`### Load Vega Lite for plotting`","pinned":false,"hidden":false,"mode":"ojs"},{"id":60,"value":"import {vl} from '@vega/vega-lite-api'","pinned":false,"hidden":false,"mode":"ojs"},{"id":218,"value":"md`### Load Observable inputs`","pinned":false,"hidden":false,"mode":"ojs"},{"id":220,"value":"import {View} from \"@mbostock/synchronized-views\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":216,"value":"viewof Sp = new View(10)","pinned":false,"hidden":false,"mode":"ojs"},{"id":492,"value":"md`### Routines`","pinned":false,"hidden":false,"mode":"ojs"},{"id":495,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}