25:["$","title",null,{"children":"Network Analysis PIXI | Joli Holmes | Observable"}] 49:T5b2,Legend = { const svg = d3.select("#legend") const svgElem = d3.select('#legend').node(); const width = svgElem.getBoundingClientRect().width; const height = svgElem.getBoundingClientRect().height const defs = svg.append("defs"); const margin = {top: 10, right: 10, bottom: 10, left: 10}; const barHeight = 20; const linearGradient = defs.append("linearGradient") .attr("id", "linear-gradient"); const axisScale = d3.scaleLinear() .domain(colorScale.domain()) .range([margin.left, width - margin.right]); const axisBottom = g => g .attr("class", `x-axis`) .attr("transform", `translate(0,${barHeight + margin.bottom})`) .call(d3.axisBottom(axisScale) .ticks(width / 80) .tickSize(-barHeight)); linearGradient.selectAll("stop") .data(colorScale.ticks().map((t, i, n) => ({ offset: `${100*i/n.length}%`, color: colorScale(t) }))) .enter().append("stop") .attr("offset", d => d.offset) .attr("stop-color", d => d.color); svg .append("rect") .attr("x", margin.right) .attr("y", margin.top) .attr("width", width - margin.right - margin.left) .attr("height", barHeight) .style("fill", "url(#linear-gradient)"); svg .append('g') .call(axisBottom); svg.append('text') .attr('x', margin.right) .attr('y', 55) .style('font-family', 'sans-serif') .text(statistic) .style('font-size', 13) return svg.node(); }4a:T12f2,class NetworkVisualization { constructor (data, id, i) { this.data = reshapeData(data.find(d => d.id === id)); this.selector = `#cy-${i} .viz`; this.rootDOM = document.querySelector(this.selector); this.width = 225; //fraction of the width until with view becomes moveable and collapseable this.height = 300; for (let d of this.data.nodes) { d.x = this.width/2; d.y = this.height/2; } } // Initializes the application init () { this.initSimulation(); this.initSizeScale(); // create canvas this.app = new PIXI.Application({ resizeTo: this.rootDOM, width: this.width, height: this.height, resolution: devicePixelRatio, antialias: true, autoDensity: true, backgroundColor: 0x08090b, eventMode: "none" }); this.app.stage.sortableChildren = true; this.rootDOM.appendChild(this.app.view); this.viewport = new Viewport({ screenWidth: this.width, screenHeight: this.height, worldWidth: this.width, worldHeight: this.height, passiveWheel: false, interaction: this.app.renderer.events, // the interaction module is important for wheel to work properly when renderer.view is placed or scaled events: this.app.renderer.events }); this.app.stage.addChild(this.viewport); } initSimulation () { this.simulation = d3.forceSimulation() .nodes(this.data.nodes) .force('link', d3.forceLink().id(function (d) { return d.id; })) .force('charge', d3.forceManyBody().strength(-10)) .force('center', d3.forceCenter(this.width / 2, this.height / 2).strength(1)) .force('collide', d3.forceCollide().strength(2).radius(8)) .force('x', d3.forceX() .x(this.width/2).strength(0.4) ) .force('y', d3.forceY() .y(this.height/2).strength(0.15) ) this.simulation.force('link') .links(this.data.links); } run () { return this.simulation; } // Initializes the links drawLinks () { this.containerLinks = new PIXI.Container(); // Links this.links = new PIXI.Graphics(); this.containerLinks.addChild(this.links); // Identify Links this.identifyLinks = new PIXI.Graphics(); this.containerLinks.addChild(this.identifyLinks); this.viewport.addChild(this.containerLinks); } // Update the links position updateLinkPosition () { // Links this.links.clear(); this.data.links.forEach(link => { const { source, target } = link; this.links.lineStyle(1, 0x686868); this.links.moveTo(source.x, source.y); this.links.lineTo(target.x, target.y); }); } // symbolScalePixi (node, rSize) { switch (node.shape_var) { case 'actor': node.gfx.drawRect(-rSize / 2, -rSize / 2, rSize, rSize); node.shape = 'square'; break; // case 'Process activity': // node.gfx.drawRegularPolygon(0, 0, rSize, 4, 1.7); // node.shape = 'diamond'; // break; // case 'Control activity': // node.gfx.drawRegularPolygon(0, 0, rSize, 3); // node.shape = 'triangle'; // break; case 'risk': node.gfx.drawStar(0, 0, 5, rSize); node.shape = 'star'; break; default: node.gfx.drawCircle(0, 0, rSize); node.shape = 'circle'; break; } } initSizeScale () { const stat = d3.extent(this.data.nodes.map(d => d.deg_cen)); this.sizeScale = d3.scaleLog() .domain(stat) .range([3, 9]); } // Initializes the nodes drawNodes () { this.containerNodes = new PIXI.Container(); this.nodes = []; this.data.nodes.forEach((node) => { node.gfx = new PIXI.Graphics(); node.gfx.beginFill(0xcbcbcb); this.symbolScalePixi (node, this.sizeScale(node.deg_cen)); node.gfx.x = this.width * 0.5; node.gfx.y = this.height * 0.5; node.gfx.eventMode = 'dynamic'; node.gfx.buttonMode = true; node.gfx.cursor = 'pointer'; this.nodes.push(node); this.containerNodes.addChild(node.gfx); }); this.viewport.addChild(this.containerNodes); } updateNodePosition () { this.nodes.forEach((node) => { const { x, y, gfx } = node; gfx.x = x; gfx.y = y; }); } draw () { this.drawLinks(); this.drawNodes(); this.simulation.alpha(1).restart(); } animate () { this.app.ticker.add(() => { this.updateLinkPosition(); this.updateNodePosition(); }); } }4b:T993,DendroVisualization = { 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[statistic], b.data.statistics[statistic])); 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 * 10; const svg = d3.select("#dendro").append("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[statistic])) .attr("r", 7) .attr("stroke", "#555") .attr("stroke-width", 1) .style('cursor', d => d.children ? 'not-allowed': 'pointer'); node.append("text") .attr("dy", "1.1em") .attr("x", d => d.children ? -10 : 10) .attr("transform", d => d.children? "rotate(-90)": "rotate(-30)") .attr("text-anchor", d => d.children ? "end" : "start") .text(d => d.data.name) .clone(true).lower() .attr("stroke", "white") .attr("transform","rotate(65)"); svg.attr("transform","rotate(90)"); return svg.node(); }4c:T4a8,function clickProcess () { let graphs = []; d3.selectAll(".Level3-Node circle").on("mouseover", function (e, d) { d3.select(this) .attr("stroke", "black") .attr("stroke-width", 2) }).on("mouseout", function () { d3.select(this) .attr("stroke", "#555") .attr("stroke-width", 1) }); d3.selectAll('.Level3-Node') .on('click', (e, datum) => { if (graphs.length >= 3) { graphs.pop(); } const id = datum.data.id; graphs.push(id); const i = graphs.length - 1; const networkDiagram = new NetworkVisualization(data.children, id, i); networkDiagram.init(); networkDiagram.draw(); networkDiagram.animate(); let textColor = "white"; if (datum.data.statistics[statistic] < .045) { textColor = "black"; } document.querySelector(`#cy-${i} .title`).innerHTML= data.children.find(d => d.id === id).name; document.querySelector(`#cy-${i} .title`).style.backgroundColor = colorScale(datum.data.statistics[statistic]); document.querySelector(`#cy-${i} .title`).style.color = textColor; }); }4d:[{"id":"d15b5df3949de7aa6fa1f571f4abd8799e3825bbb37aadc7e3557254e723a632832994e782730c53e0cd68b54a3fbf00f0e1886d110c2d8192f6399d99b0c28a","href":"https://static.observableusercontent.com/files/d15b5df3949de7aa6fa1f571f4abd8799e3825bbb37aadc7e3557254e723a632832994e782730c53e0cd68b54a3fbf00f0e1886d110c2d8192f6399d99b0c28a","name":"networks@5.json","type":"application/json","lastModified":1697154676270.02,"size":1637453}] 29:{"id":"cebff8fee6a7900a","slug":null,"title":"Network Analysis PIXI","thumbnail":"8c6ad8fca5eb2137ed39ea9f99512e3731de0927fc9f937714f7b5b9657ff588","access_level":"public","create_time":"$D2023-10-09T18:28:17.503Z","update_time":"$D2023-10-25T21:00:41.762Z","view_time":null,"first_public_time":"$D2023-10-09T18:28:17.503Z","has_unpublished_edits":null,"fork":false,"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":510,"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 PIXI","cells":[{"id":0,"value":"# Network Analysis PIXI","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":13,"value":"viewof statistic = Inputs.radio([\"density\", \"nNodes\", \"meanBetweeness\"], {value: \"density\", label: \"Network statistic\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":320,"value":"userContainer = html`

\n \n

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":147,"value":"clickProcess();","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"$49","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":71,"value":"$4a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"$4b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":95,"value":"function reshapeData(data) {\n let nodes = [];\n let links = [];\n data.nodes.forEach(d => {\n nodes.push(d.data);\n })\n\n data.edges.forEach(d => {\n links.push(d.data)\n })\n\n return {nodes: nodes, links: links};\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":139,"value":"$4c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"colorScale = {\n const stat = d3.extent(data.children.map(d => d.statistics[statistic])).sort((a, b) => a - b);\n const colorScale = d3.scaleSequentialLog(d3.interpolatePuBuGn).domain(stat);\n return colorScale;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"data = FileAttachment(\"networks@5.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":69,"value":"PIXI = import(\"https://cdn.jsdelivr.net/npm/pixi.js@7.2.4/+esm\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":76,"value":"Viewport = (await require('https://bundle.run/pixi-viewport@4.2.2/dist/viewport.js')).Viewport","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":54,"value":"style = html``","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