25:["$","title",null,{"children":"Network Analysis Cytoscape | Joli Holmes | Observable"}] 4b:T91a,chart = { const width = 928; // Compute the tree height; this approach will allow the height of the // SVG to scale according to the breadth (width) of the tree layout. const root = d3.hierarchy(data); const dx = 20; const dy = width / (root.height + 2); // Create a tree layout. const tree = d3.tree().nodeSize([dx, dy]); // Sort the tree and apply the layout. root.sort((a, b) => d3.ascending(a.data.statistics.density, b.data.statistics.density)); tree(root); // Compute the extent of the tree. Note that x and y are swapped here // because in the tree layout, x is the breadth, but when displayed, the // tree extends right rather than down. let x0 = Infinity; let x1 = -x0; root.each(d => { if (d.x > x1) x1 = d.x; if (d.x < x0) x0 = d.x; }); // Compute the adjusted height of the tree. const height = x1 - x0 + dx * 2; const svg = d3.create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [-dy / 3, x0 - dx, width, height]) .attr("style", "max-width: 100%; height: auto; font: 10px sans-serif;"); const link = svg.append("g") .attr("fill", "none") .attr("stroke", "#555") .attr("stroke-opacity", 0.4) .attr("stroke-width", 1.5) .selectAll() .data(root.links()) .join("path") .attr("d", d3.linkHorizontal() .x(d => d.y) .y(d => d.x)); const node = svg.append("g") .attr("stroke-linejoin", "round") .attr("stroke-width", 3) .selectAll() .data(root.descendants()) .join("g") .attr("transform", d => `translate(${d.y},${d.x})`) .attr("class", d => d.children ? "Level2-Node" : "Level3-Node"); node.append("circle") .attr("fill", d => d.children ? "#555" : colorScale(d.data.statistics.density)) // .attr("class", d => d.children ? "Level2-Node" : "Level3-Node") .attr("r", 7) .attr("stroke", "#555") .attr("stroke-width", 1) .style('cursor', d => d.children ? 'not-allowed': 'pointer'); node.append("text") .attr("dy", "0.31em") .attr("x", d => d.children ? -10 : 10) .attr("text-anchor", d => d.children ? "end" : "start") .text(d => d.data.name) .clone(true).lower() .attr("stroke", "white"); return svg.node(); }4c:T6c4,function cytoNetwork(d, i) { const el = d3.select(`#cy-${i}`); let textColor; if (d.statistics.density < .03) { textColor = "black" } else { textColor = 'white'; } el.style('background-color', colorScale(d.statistics.density)); el.append('text') .attr('x', 20) .attr('y', 20) .style('font-family', 'sans-serif') .style('color', textColor) .text(d.name); const settings = cy({ width: 300, height: 300, container: document.getElementById(`cy-${i}`), elements: d, wheelSensitivity: 0.4, style: [ // the stylesheet for the graph // Group selectors { 'selector': 'node', 'style': { 'width': 'mapData(bet_cen, 0, 0.5415790924816003, 30, 120)', 'height': 'mapData(bet_cen, 0, 0.5415790924816003, 30, 120)', // 'content': 'data(name)', 'background-color': "#d7d7d7", 'border-color': '#555', 'border-width': '3px' }, }, { 'selector': 'edge', 'style': { 'line-color': "#555" } }, // Class selectors { 'selector': '.triangle', 'style': { 'shape': 'triangle' } }, { 'selector': '.diamond', 'style': { 'shape': 'diamond' } }, { 'selector': '.square', 'style': { 'shape': 'square' } }, { 'selector': '.star', 'style': { 'shape': 'star' } } ], layout: { name: layoutInput, padding: 10 } }) return settings; } 4d:[{"id":"6ed46c512bdc15df6a44d44eeb513eee7648b04fc4f189a22c419450a5863bfbcec5f5edc63f689b0e32a81bce639ea03a4b357e0030293b9ceaed4daaf452b0","href":"https://static.observableusercontent.com/files/6ed46c512bdc15df6a44d44eeb513eee7648b04fc4f189a22c419450a5863bfbcec5f5edc63f689b0e32a81bce639ea03a4b357e0030293b9ceaed4daaf452b0","name":"networks@17.json","type":"application/json","lastModified":1696530468224.16,"size":2101868},{"id":"f88c87f9a2847a261a927f4443cb1632a5476392b9de95315d3e8bee11823d64560262791b8221aa13c7fbf95289df1a9500551ae84a59b895fe333fc05c8537","href":"https://static.observableusercontent.com/files/f88c87f9a2847a261a927f4443cb1632a5476392b9de95315d3e8bee11823d64560262791b8221aa13c7fbf95289df1a9500551ae84a59b895fe333fc05c8537","name":"networks@18.json","type":"application/json","lastModified":1696530523005.534,"size":2101838},{"id":"ee6a4be826930a138a3b283f941415484754e92c73361642d4da9d2255c3d316cfe96f88c5f433a3b49b76cb140a1fd2d5a1deddae60045d50fdcd5ec56b0829","href":"https://static.observableusercontent.com/files/ee6a4be826930a138a3b283f941415484754e92c73361642d4da9d2255c3d316cfe96f88c5f433a3b49b76cb140a1fd2d5a1deddae60045d50fdcd5ec56b0829","name":"networks@19.json","type":"application/json","lastModified":1696530781922.26,"size":2101836}] 47:{"id":"66b872a8dc9fc6a7","slug":"network-analysis","title":"Network Analysis Cytoscape","thumbnail":"dcc65e5e2afcce50d04e36af1e5266257f2fb96448bef2fa866f5cdc111e287d","access_level":"public","create_time":"$D2023-10-05T16:03:29.531Z","update_time":"$D2023-10-09T19:24:46.532Z","view_time":null,"first_public_time":"$D2023-10-05T16:03:29.531Z","has_unpublished_edits":null,"fork":{"id":"77cda90227a8aecc","slug":"cytoscape-js","title":"Cytoscape.js","owner":{"id":"f87146b7be32b20f","login":"valnik","name":"Valentine Nikitsky"}},"stars":0,"starred":false,"owner":{"type":"team","id":"1560cab9530d3e73","login":"holmesjoli","name":"Joli Holmes","avatar_url":"https://avatars-next.observableusercontent.com/08709ac7b914866bf5dd78a03a7e0ee886489de26197efeabb9ef0a6d1f4da9f","tier":"starter_2024","bio":"Data Visualization Designer. R, Python, JS. ","followed_by_you":false,"follows_you":false},"version":546,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"cfbcb27567ee75ed","login":"holmesjoli","name":"Joli Holmes","avatar_url":"https://avatars-next.observableusercontent.com/08709ac7b914866bf5dd78a03a7e0ee886489de26197efeabb9ef0a6d1f4da9f","tier":null,"bio":"Data Visualization Designer. R, Python, JS. ","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"cfbcb27567ee75ed","login":"holmesjoli","name":"Joli Holmes","avatar_url":"https://avatars-next.observableusercontent.com/08709ac7b914866bf5dd78a03a7e0ee886489de26197efeabb9ef0a6d1f4da9f","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Network Analysis Cytoscape","cells":[{"id":0,"value":"md`# Network Analysis Cytoscape`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":359,"value":"## Level 2 Process - Own account finance\n\nClick nodes to select networks to render","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":536,"value":"viewof layoutInput = Inputs.radio([\"cose\", \"concentric\", \"grid\"], {label: \"layout\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":293,"value":"$4b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":368,"value":"## Level 3 processes","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":11,"value":"container = html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":106,"value":"data = FileAttachment(\"networks@19.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":415,"value":"function clickProcess () {\n\n let graphs = [];\n \n d3.selectAll('.Level3-Node')\n .on('click', (e, datum) => {\n\n if (graphs.length >= 3) {\n graphs.pop(0);\n }\n graphs.push(datum.data.id);\n cytoNetwork(datum.data, graphs.length - 1);\n });\n }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":418,"value":"clickProcess();","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"$4c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"cy = require(\"cytoscape@3.4.2/dist/cytoscape.umd.js\") ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"style = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":514,"value":"colorScale = {\n const density = d3.extent(data.children.map(d => d.statistics.density)).sort((a, b) => a - b)\n const colorScale = d3.scaleSequentialLog(d3.interpolatePuBuGn).domain(density);\n return colorScale;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4d","stdlib":"1"}} 24:null