31:T8bc,{ const myDiv = html`

`; simulation.tick(50); invalidation.then(() => simulation.stop()); var data = foodGroupFilter2.map(selectedGroup=>({ name: selectedGroup, type: 'scatter', mode: 'markers+text', x:nodes_.filter(n=>n.type==selectedGroup).map(n=>n.x), y:nodes_.filter(n=>n.type==selectedGroup).map(n=>n.y), hovertemplate: nodes_.filter(n=>n.type==selectedGroup).map(n=>n.id+``), text: nodes_.filter(n=>n.type==selectedGroup).map(n=>(n.outdegree > d3.quantile(nodes_.map(n=>n.outdegree),percentileLabel/100)) ? n.id:''), marker: { symbol: 'circle', color: nodes_.filter(n=>n.type==selectedGroup).map(n=>color(selectedGroup)), size: nodes_.filter(n=>n.type==selectedGroup).map(n=>5+valuesObjOnly2.nodeSize*(n.outdegree-outDegree_extent[0])/(outDegree_extent[1]-outDegree_extent[0])), opacity: 0.3, line: {width: 1} }, })) var layout = { hovermode: 'closest', xaxis: { showgrid: false, zeroline: false, visible: false }, yaxis: { showgrid: false, zeroline: false, visible: false }, shapes: foodGroupFilter2.map(selectedGroup=>links_.filter(l=>l.type==selectedGroup).map(l=>({ type: 'line', x0: l.source.x, y0: l.source.y, x1: l.target.x, y1: l.target.y, opacity: 0.1, line: { color: color(selectedGroup), width: l.width, } }))).flat(), legend: { y: 0.5, x: 0, xanchor: "right", font: { family: 'Arial, sans-serif', size: 20, color: 'grey', }, }, //title:'Data Labels on the Plot', showlegend: false, width:width, height:width, paper_bgcolor: 'white', }; Plotly.react(myDiv, data, layout); myDiv.on('plotly_click', function(event_data){ data.push({ name: "test", type: 'scatter', mode: 'markers+text', x:event_data.points.x, y:event_data.points.y, hovertemplate: ["testNode"+``], text: "testNode", marker: { symbol: 'circle', color: "black", size: 100, opacity: 1, line: {width: 1} },}); }); return myDiv; }32:T4b4,md`# Interesting Network Discoveries ### Asian,Mexican,European - Asian category splits naturally into "Chineese", "Indian" subcategories. Both of these show interaction with the "Mexican" category. - Bridging role of ginger, garlic, cilantro and dill between Asian, European and Mexican cuisines - Spice usage for each protein can be explored by picking salmon, chicken, pork, etc. on the Recipe Category checkbox selector. ### Beverages and Smoothies (with one and two max ingredient combinations) - Very clear boundary defined by dairy products between beverages and smoothies. Honey has the largest bridging centrality between these two groups. - Coffee and Tea drinks are separated by a large cluster of chocolate and common flavorings such as cinnamon and brown sugar. - Cinnamon is most central to beverages. - Increasing the max ingredient combination per node to two highlights more specific flavor combinations such as tomato juice-celery-worcestershire sauce and pepper which is common for Bloody Mary drinks. ### Sauces - Filtering out too frequent ingredients reveals segmentation of the sauce space into categories that can be labeled as: French, Chinese, Mediterranean and Mexican `33:T4a6,function linker(recipes,nIngMax) { let results = []; recipes.forEach(recipe=> { let array=combinations(recipe.RecipeIngredientParts.split(", "),nIngMax) for (let i = 0; i < array.length - 1; i++) { for (let j = i + 1; j < array.length; j++) { let nIng = [...array[0].split("/").filter(Boolean),...array[1].split(">").filter(Boolean)].sort() let nIngSet = new Set(nIng.flat()) if (nIng.length == nIngSet.size){ results.push({"source":array[i], "target":array[j],"type":recipe.RecipeCategory,"color":color(recipe.RecipeCategory)}); } } } }) let weights = edgeWeights(results) let maxWeight = d3.max(results.map(r=>weights[r.source+r.target])) let minWeight = d3.min(results.map(r=>weights[r.source+r.target])) let range = maxWeight-minWeight let edges = results.map(r=>({source:r.source,target:r.target,weight:(weights[r.source+r.target]),width:(edgeSize*(weights[r.source+r.target]-minWeight)/range),type:r.type,color:r.color})) //let edges = results.map(r=>({source:r.source,target:r.target,weight:([r.source+r.target],type:r.type})) return edges }34:T435,function linker2(recipes,nIngMax) { let results = []; recipes.forEach(recipe=> { let array=combinations(recipe.RecipeIngredientParts.split(","),nIngMax) for (let i = 0; i < array.length - 1; i++) { for (let j = i + 1; j < array.length; j++) { let nIng = [...array[0].split("/").filter(Boolean),...array[1].split(">").filter(Boolean)].sort() let nIngSet = new Set(nIng.flat()) if (nIng.length == nIngSet.size){ results.push({"source":array[i], "target":array[j],"type":recipe.RecipeCategory}); } } } }) let weights = edgeWeights(results) let maxWeight = d3.max(results.map(r=>weights[r.source+r.target])) let minWeight = d3.min(results.map(r=>weights[r.source+r.target])) let range = maxWeight-minWeight let edges = results.map(r=>({source:r.source,target:r.target,weight:(weights[r.source+r.target]),type:r.type})) //let edges = results.map(r=>({source:r.source,target:r.target,weight:([r.source+r.target],type:r.type})) return edges }35:T98e,cose_options = ({ name: 'cose', // Called on `layoutready` ready: function(){}, // Called on `layoutstop` stop: function(){}, // Whether to animate while running the layout // true : Animate continuously as the layout is running // false : Just show the end result // 'end' : Animate with the end result, from the initial positions to the end positions animate: false, // Easing of the animation for animate:'end' animationEasing: undefined, // The duration of the animation for animate:'end' animationDuration: undefined, // A function that determines whether the node should be animated // All nodes animated by default on animate enabled // Non-animated nodes are positioned immediately when the layout starts animateFilter: function ( node, i ){ return true; }, // The layout animates only after this many milliseconds for animate:true // (prevents flashing on fast runs) animationThreshold: 250, // Number of iterations between consecutive screen positions update refresh: 20, // Whether to fit the network view after when done fit: true, // Padding on fit padding: 0, // Constrain layout bounds; { x1, y1, x2, y2 } or { x1, y1, w, h } boundingBox: ({x1:0,y1:0,x2:width,y2:width}), // Excludes the label when calculating node bounding boxes for the layout algorithm nodeDimensionsIncludeLabels: false, // Randomize the initial positions of the nodes (true) or use existing positions (false) randomize: false, // Extra spacing between components in non-compound graphs componentSpacing: 0, // Node repulsion (non overlapping) multiplier nodeRepulsion: function( node ){ return valuesObjOnly.force; }, // Node repulsion (overlapping) multiplier nodeOverlap: valuesObjOnly.force, // Ideal edge (non nested) length idealEdgeLength: function( edge ){ return 16; }, // Divisor to compute edge forces edgeElasticity: function( edge ){ return 16; }, // Nesting factor (multiplier) to compute ideal edge length for nested edges nestingFactor: 1.2, // Gravity force (constant) //gravity: 100, // Maximum number of iterations to perform numIter: 1000, // Initial temperature (maximum node displacement) //initialTemp: 1000, // Cooling factor (how the temperature is reduced between consecutive iterations //coolingFactor: 0.99, // Lower temperature threshold (below this point the layout will end) //minTemp: 1.0 })36:T6cd,circle_options=({ name: 'circle', fit: true, // whether to fit the viewport to the graph padding: 0, // the padding on fit boundingBox: ({x1:0,y1:0,x2:width,y2:width}), // constrain layout bounds; { x1, y1, x2, y2 } or { x1, y1, w, h } avoidOverlap: true, // prevents node overlap, may overflow boundingBox and radius if not enough space nodeDimensionsIncludeLabels: false, // Excludes the label when calculating node bounding boxes for the layout algorithm spacingFactor: undefined, // Applies a multiplicative factor (>0) to expand or compress the overall area that the nodes take up radius: undefined, // the radius of the circle startAngle: 3 / 2 * Math.PI, // where nodes start in radians sweep: undefined, // how many radians should be between the first and last node (defaults to full circle) clockwise: true, // whether the layout should go clockwise (true) or counterclockwise/anticlockwise (false) sort: undefined, // a sorting function to order the nodes; e.g. function(a, b){ return a.data('weight') - b.data('weight') } animate: true, // whether to transition the node positions animationDuration: 500, // duration of animation in ms if enabled animationEasing: undefined, // easing of animation if enabled animateFilter: function ( node, i ){ return true; }, // a function that determines whether the node should be animated. All nodes animated by default on animate enabled. Non-animated nodes are positioned immediately when the layout starts ready: undefined, // callback on layoutready stop: undefined, // callback on layoutstop transform: function (node, position ){ return position; } // transform a given node position. Useful for changing flow direction in discrete layouts })37:T88d,concentric_options = ({ name: 'concentric', fit: true, // whether to fit the viewport to the graph padding: 0, // the padding on fit startAngle: 3 / 2 * Math.PI, // where nodes start in radians sweep: undefined, // how many radians should be between the first and last node (defaults to full circle) clockwise: true, // whether the layout should go clockwise (true) or counterclockwise/anticlockwise (false) equidistant: false, // whether levels have an equal radial distance betwen them, may cause bounding box overflow minNodeSpacing: 10, // min spacing between outside of nodes (used for radius adjustment) boundingBox: ({x1:0,y1:0,x2:width,y2:width}), // constrain layout bounds; { x1, y1, x2, y2 } or { x1, y1, w, h } avoidOverlap: true, // prevents node overlap, may overflow boundingBox if not enough space nodeDimensionsIncludeLabels: false, // Excludes the label when calculating node bounding boxes for the layout algorithm height: undefined, // height of layout area (overrides container height) width: undefined, // width of layout area (overrides container width) spacingFactor: undefined, // Applies a multiplicative factor (>0) to expand or compress the overall area that the nodes take up concentric: function( node ){ // returns numeric value for each node, placing higher nodes in levels towards the centre return node.degree(); }, levelWidth: function( nodes ){ // the variation of concentric values in each level return nodes.maxDegree() / 4; }, animate: false, // whether to transition the node positions animationDuration: 500, // duration of animation in ms if enabled animationEasing: undefined, // easing of animation if enabled animateFilter: function ( node, i ){ return true; }, // a function that determines whether the node should be animated. All nodes animated by default on animate enabled. Non-animated nodes are positioned immediately when the layout starts ready: undefined, // callback on layoutready stop: undefined, // callback on layoutstop transform: function (node, position ){ return position; } // transform a given node position. Useful for changing flow direction in discrete layouts })38:T6bd,breadthfirst_options = ({ name: 'breadthfirst', fit: true, // whether to fit the viewport to the graph directed: false, // whether the tree is directed downwards (or edges can point in any direction if false) padding: 0, // padding on fit circle: false, // put depths in concentric circles if true, put depths top down if false grid: false, // whether to create an even grid into which the DAG is placed (circle:false only) spacingFactor: 1.75, // positive spacing factor, larger => more space between nodes (N.B. n/a if causes overlap) boundingBox: ({x1:0,y1:0,x2:800,y2:600}), // constrain layout bounds; { x1, y1, x2, y2 } or { x1, y1, w, h } avoidOverlap: true, // prevents node overlap, may overflow boundingBox if not enough space nodeDimensionsIncludeLabels: false, // Excludes the label when calculating node bounding boxes for the layout algorithm roots: undefined, // the roots of the trees maximal: false, // whether to shift nodes down their natural BFS depths in order to avoid upwards edges (DAGS only) animate: false, // whether to transition the node positions animationDuration: 500, // duration of animation in ms if enabled animationEasing: undefined, // easing of animation if enabled, animateFilter: function ( node, i ){ return true; }, // a function that determines whether the node should be animated. All nodes animated by default on animate enabled. Non-animated nodes are positioned immediately when the layout starts ready: undefined, // callback on layoutready stop: undefined, // callback on layoutstop transform: function (node, position ){ return position; } // transform a given node position. Useful for changing flow direction in discrete layouts })39:T413,preset_options=({ name: 'preset', positions: undefined, // map of (node id) => (position obj); or function(node){ return somPos; } zoom: undefined, // the zoom level to set (prob want fit = false if set) pan: undefined, // the pan level to set (prob want fit = false if set) fit: true, // whether to fit to viewport padding: 0, // padding on fit animate: false, // whether to transition the node positions animationDuration: 500, // duration of animation in ms if enabled animationEasing: undefined, // easing of animation if enabled animateFilter: function ( node, i ){ return true; }, // a function that determines whether the node should be animated. All nodes animated by default on animate enabled. Non-animated nodes are positioned immediately when the layout starts ready: undefined, // callback on layoutready stop: undefined, // callback on layoutstop //transform: function (node, position ){ return position; } // transform a given node position. Useful for changing flow direction in discrete layouts })3a:[] 2f:{"title":"Food.com Ingredient Combination Explorer","cells":[{"id":1,"value":"md`# Food.com Ingredient Combination Explorer\n\nThe interactive visualizations below let you explore ingredient combinations from the Food.com dataset available at Kaggle https://www.kaggle.com/irkaal/foodcom-recipes-and-reviews.\n\nBoth are renderings of a network graph defined by database ingredients (nodes) and their co-occurrence within recipes (edge connections). \n\nThe first is built with d3 and Plotly JS whereas the second relies on Cytoscape, a specialized network graph JS library. \n\nVisualizaiton default funtionalities differ. For example, the d3-Plotly enjoys from Plotly's standard handlers for displaying text after pointer on hover events.\n\nOn the other hand Cytoscape provides a variety of layout options and functionalities for selecting and dragging nodes by default. However event listener functions are left to the developer. \n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":6169,"value":"md`## d3 + Plotly`","pinned":false,"hidden":false,"mode":"ojs"},{"id":6243,"value":"swatches({\n color: d3.scaleOrdinal(foodGroupFilter2, d3.schemeCategory10)\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":4626,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":5249,"value":"md`## Cytoscape\nhttps://js.cytoscape.org/\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":5867,"value":"viewof cytoGraphOptions = inputsGroup(\n [\n [\n select({\n title: \"Edge Type\",\n description: \"Select an edge type\",\n options: [\"straight\",\"unbundled-bezier\", \"bezier\", \"haystack\", \"segments\"],\n value: \"straight\"\n}),\n select({\n title: \"Layout Type\",\n description: \"Select a layout type\",\n options: [\"cose\", \"circle\", \"concentric\", \"breadth_first\",\"d3\"],\n value: \"cose\"\n})\n ],\n ],\n\n [\n ['edgeType','layoutType'],\n ]\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":6029,"value":"swatches({\n color: d3.scaleOrdinal(foodGroupFilter2, d3.schemeCategory10)\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":5373,"value":"graph = html`

`;","pinned":false,"hidden":false,"mode":"ojs"},{"id":6308,"value":"md`# Interactive Controls\nA variety of filters and plot controls are available below. These aid exploration and vizualization of the the ingredient networks above. \n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3989,"value":"viewof filterName = text({type:\"text\", value:\"\", description: \"Filter by Text in Recipe Name (Regex Supported)\",submit:true})","pinned":false,"hidden":false,"mode":"ojs"},{"id":4544,"value":"viewof foodGroupFilter2 = checkbox({\n title: \"Recipe Categories\",\n options: topCategories.map(d=>d.key),\n value: [\"Asian\",\"Mexican\",\"European\"],\n //value: [\"Beverages\",\"Smoothies\"],\n //value: [\"Sauces\"],\n //value: [\"Meat\", \"Breads\"],\n //value: [\"Breakfast\", \"Lunch/Snacks\",\"One Dish Meal\"],\n submit: true\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":3903,"value":"md`**Filter Edges by Connection Strength**`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4023,"value":"viewof edgeWeightRange = rangeSlider(links.filter(l=>l.weight>1 & l.weight<100),l=>l.weight)","pinned":false,"hidden":false,"mode":"ojs"},{"id":3906,"value":"md`**Filter Nodes by Occurrence Frequency**`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3828,"value":"viewof trimmed_outDegree = rangeSlider(nodes.filter(n=>n.outDegree>20 & n.outDegree<500),d=>d.outDegree)","pinned":false,"hidden":false,"mode":"ojs"},{"id":4067,"value":"viewof valuesObjOnly = inputsGroup(\n [\n [\n slider({ title: 'Node Repulsion Force',min:500, max:5000,value:1000, description: 'Strenght of Repulsion Force',submit:true }),\n number({value: 1, title: \"Ingredient Combinations per Node\",description:\"Max # Ingregient Combinations per Node\",min:1,max:5,submit:true})\n ],\n ],\n\n [\n ['force','ingCombinations'],\n ]\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":6114,"value":"viewof edgeSize = \n slider({ title: 'Edge Width Scale Factor',min:1, max:100,value:30,step:1, description: 'Resize edge width',submit:true})","pinned":false,"hidden":false,"mode":"ojs"},{"id":5599,"value":"viewof valuesObjOnly2 = inputsGroup(\n [\n [\n slider({ title: 'Node Size Scale Factor',min:1, max:100,value:20, step:1, description: 'Resize nodes',submit:true }),\n slider({ title: 'Font Size',min:1, max:25,value:15,step:1, description: 'Resize Font Size',submit:true })\n ]\n ],\n\n [\n ['nodeSize','fontSize']\n ]\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":6331,"value":"viewof percentileLabel = \n slider({ title: 'Percentile of Nodes to Label',min:1, max:100,value:5,step:1, description: 'Adjust to set the amount labels in graph',submit:true})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1090,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":6316,"value":"md`# Next Steps\nThere is a lot more than can be done with these visualizations. For example:\n- Speed and performance optimization. Graph querying could be done on the server side with utilizing a graph database service such as AWS Neptune (https://aws.amazon.com/neptune/). \n- Highlight Ego Networks after on-hover or on-click events.\n- Display a set of recipes when a user clicks on one or more ingredients.\n- Enhance filtering with Natural Language Processing of recipe descriptions and reviews.\n- Enhance filtering with Nutritional data.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":226,"value":"md`# Data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":238,"value":"recipes=d3.csv(\"https://raw.githubusercontent.com/DoTorr/UCF/main/recipes.csv\",d3.autoType)","pinned":false,"hidden":false,"mode":"ojs"},{"id":4655,"value":"import {cleanedRecipes} from '@dotorres/food-com-data-exploration'","pinned":false,"hidden":false,"mode":"ojs"},{"id":240,"value":"recipesGroupedByCategory = group(cleanedRecipes).by(d=>d.RecipeCategory).run()","pinned":false,"hidden":false,"mode":"ojs"},{"id":4682,"value":"catID = new Map(recipesGroupedByCategory.map((cat,i)=>[cat.key,i]))","pinned":false,"hidden":false,"mode":"ojs"},{"id":244,"value":"topCategories = recipesGroupedByCategory.filter(d=>d.values.length>500)","pinned":false,"hidden":false,"mode":"ojs"},{"id":3163,"value":"md`# Pre-Filter Data by Text in Title`","pinned":false,"hidden":false,"mode":"ojs"},{"id":245,"value":"renderableData2 = cleanedRecipes.filter(d => d.Name.match(new RegExp(filterName, 'i')) &&\n foodGroupFilter2.includes(d.RecipeCategory));","pinned":false,"hidden":false,"mode":"ojs"},{"id":3164,"value":"md`# Parse Nodes and Edges`","pinned":false,"hidden":false,"mode":"ojs"},{"id":334,"value":"links=linker(renderableData2,valuesObjOnly.ingCombinations)","pinned":false,"hidden":false,"mode":"ojs"},{"id":3088,"value":"nodes = nodeObjects(links)","pinned":false,"hidden":false,"mode":"ojs"},{"id":4228,"value":"node2index = new Map(nodes.map(d=>[d.node,d.index]))","pinned":false,"hidden":false,"mode":"ojs"},{"id":3145,"value":"md`# Compute Network Properties Before Pruning`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3094,"value":"filteredNodesSet = new Set(filteredNodes.map(n=>n.node))","pinned":false,"hidden":false,"mode":"ojs"},{"id":3150,"value":"nodes_outDegree = outDegree(links)","pinned":false,"hidden":false,"mode":"ojs"},{"id":3152,"value":"nodes_inDegree = inDegree(links)","pinned":false,"hidden":false,"mode":"ojs"},{"id":3430,"value":"weights = edgeWeights(links)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2876,"value":"md`# Prune Network`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2904,"value":"filteredNodes = nodes.filter(n=>(\nn.outDegreetrimmed_outDegree.range[0] & \n n.outDegree>0.0 & \n//n.inDegreeminInDegree &\nn.inDegree>0.0))","pinned":false,"hidden":false,"mode":"ojs"},{"id":2712,"value":"prunedLinks = links.filter(l=>filteredNodesSet.has(l.source) & filteredNodesSet.has(l.target) & l.weight>=edgeWeightRange.range[0] & l.weight<=edgeWeightRange.range[1] & l.weight>=2)","pinned":false,"hidden":false,"mode":"ojs"},{"id":4294,"value":"prunedNodes = nodeObjects(prunedLinks)","pinned":false,"hidden":false,"mode":"ojs"},{"id":4295,"value":"prunedNodes2= prunedNodes.map(n=>({index:node2index.get(n.node),node:n.node,outDegree:n.outDegree,inDegree:n.inDegree}))","pinned":false,"hidden":false,"mode":"ojs"},{"id":4297,"value":"prunedNodesSet = new Set(prunedNodes2.map(n=>n.node))","pinned":false,"hidden":false,"mode":"ojs"},{"id":5165,"value":"outDegreeMap = new Map(prunedNodes2.map(n=>[n.node,n.outDegree]))","pinned":false,"hidden":false,"mode":"ojs"},{"id":5172,"value":"inDegreeMap = new Map(prunedNodes2.map(n=>[n.node,n.inDegree]))","pinned":false,"hidden":false,"mode":"ojs"},{"id":4712,"value":"md`# Filtered Network Properties`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4716,"value":"outDegree_extent = d3.extent(prunedNodes2.map(n=>n.outDegree))","pinned":false,"hidden":false,"mode":"ojs"},{"id":4723,"value":"inDegree_extent = d3.extent(prunedNodes2.map(n=>n.inDegree))","pinned":false,"hidden":false,"mode":"ojs"},{"id":4727,"value":"edgeWeight_extent = d3.extent(prunedLinks.map(l=>l.weight))","pinned":false,"hidden":false,"mode":"ojs"},{"id":3120,"value":"md`# Processed Data to be Plotted`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4667,"value":"types=nodeTypes(links)","pinned":false,"hidden":false,"mode":"ojs"},{"id":3,"value":"data =({\n nodes: Array.from(prunedNodes2, (id,i) => ({id:id.node,outdegree:id.outDegree,indegree:id.inDegree,type:prunedLinks[i].type})),\n links: prunedLinks \n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":4235,"value":"nodes_ = data.nodes.map(d => Object.create(d))","pinned":false,"hidden":false,"mode":"ojs"},{"id":4748,"value":"links_ = data.links.map(d => Object.create(d))","pinned":false,"hidden":false,"mode":"ojs"},{"id":235,"value":"md`# Functions`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2338,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":274,"value":"function combinations(array,n) {\n let a_size = array.length;\n let results = []\n let lastResult = Array(a_size).join(\".\").split(\".\");\n// results.push(array) \n \n for(let i = 0; i < n; i++) { \n let currResult=[]\n for (let j = 0 ; j < a_size; j++) {\n let pair = [lastResult[j],array[(j+i)%a_size]].sort()\n currResult.push(pair[0]+\">\"+pair[1])\n }\n results.push(currResult)\n lastResult=currResult\n }\n return results.flat()\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2840,"value":"function nodesList(edgeList) {\n return Array.from(new Set(edgeList.flatMap(e => [e.source, e.target])))\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2849,"value":"function outDegree(edgeList) {\n return nodesList(edgeList).map(n=>edgeList.filter(l=>l.source==n).length)\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2857,"value":"function inDegree(edgeList) {\n return nodesList(edgeList).map(n=>edgeList.filter(l=>l.target==n).length)\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2894,"value":"function nodeObjects(edgeList) {\n const nodes = nodesList(edgeList)\n const oDegree = outDegree(edgeList)\n const iDegree = inDegree(edgeList)\n\n return nodes.map((n,i)=>({index:i,node:n,outDegree:oDegree[i],inDegree:iDegree[i]}))\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2883,"value":"function edgeWeights(edgeList) {\n var weigths = {},e;\n \n for(var i = 0,l=edgeList.length; i < l; i++) { \n e = edgeList[i];\n weigths[e.source+e.target] = (weigths[e.source+e.target] || weigths[e.source+e.target] || 0) + 1\n }\n \n return weigths\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3799,"value":"function edgeTypes(edgeList) {\n let types={}\n edgeList.forEach((e,i)=>types[i]=e.type)\n return types\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3820,"value":"function nodeTypes(edgeList) {\n let types={}\n edgeList.forEach((e,i)=>types[e.source]=e.type)\n return types\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":4676,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":231,"value":"md`# Plot Settings`","pinned":false,"hidden":false,"mode":"ojs"},{"id":159,"value":"function linkArc(d) {\n const r = Math.hypot(d.target.x - d.source.x, d.target.y - d.source.y);\n return `\n M${d.source.x},${d.source.y}\n A${r},${r} 0 0,1 ${d.target.x},${d.target.y}\n `;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":202,"value":"color = d3.scaleOrdinal(foodGroupFilter2, d3.schemeCategory10)","pinned":false,"hidden":false,"mode":"ojs"},{"id":76,"value":"drag = simulation => {\n \n function dragstarted(event, d) {\n if (!event.active) simulation.alphaTarget(0.3).restart();\n d.fx = d.x;\n d.fy = d.y;\n }\n \n function dragged(event, d) {\n d.fx = event.x;\n d.fy = event.y;\n }\n \n function dragended(event, d) {\n if (!event.active) simulation.alphaTarget(0);\n d.fx = null;\n d.fy = null;\n }\n \n return d3.drag()\n .on(\"start\", dragstarted)\n .on(\"drag\", dragged)\n .on(\"end\", dragended);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":4226,"value":"simulation = d3.forceSimulation(nodes_)\n .force(\"link\", d3.forceLink(links_).id(d => d.id))\n .force(\"charge\", d3.forceManyBody().strength(-valuesObjOnly.force))\n .force(\"x\", d3.forceX())\n .force(\"y\", d3.forceY())","pinned":false,"hidden":false,"mode":"ojs"},{"id":6236,"value":"graph_elems = { var elems = []\n prunedLinks.forEach(l=>(elems.push({group:\"edges\",data:l})));\n \n prunedLinks.forEach(l=>(elems.push({data:{\n id:l.source, \n filteredLabel:(outDegreeMap.get(l.source)>d3.quantile(nodes_.map(n=>n.outdegree),percentileLabel/100) ? l.source:''),\n degree:outDegreeMap.get(l.source),\n width:(5+valuesObjOnly2.nodeSize*(outDegreeMap.get(l.source)-outDegree_extent[0])/(outDegree_extent[1]-outDegree_extent[0]))\n },\n position:{x:0,y:0},\n })));\n \n prunedLinks.forEach(l=>(elems.push({data:{\n id:l.target,\n degree:outDegreeMap.get(l.target),\n width:(5+valuesObjOnly2.nodeSize*(outDegreeMap.get(l.source)-outDegree_extent[0])/(outDegree_extent[1]-outDegree_extent[0]))\n }\n ,position:{x:0,y:0},\n })));\n \n return elems\n }","pinned":false,"hidden":false,"mode":"ojs"},{"id":4751,"value":"cy={\n var cy = cytoscape({\n container: graph, // container to render in\n elements: graph_elems,\n });\n\n var edge_filter = cy.$('[weight<'+edgeWeightRange.range[0]+'].[weight>'+edgeWeightRange.range[1]+']');\n cy.remove(edge_filter);\n \n var node_filter = cy.nodes().filter(n=>n._private.edges.length>trimmed_outDegree.range[1]&n._private.edges.length