2c:null 2d:["$","title",null,{"children":"Ion Co-occurrence Network With Percentage V3.1 | data | Observable"}] 32:T11a7,function ui_select_ion_origin_data_table() { const container = document.createElement('div'); const input_label = document.createElement('label'); const tables = createTables(origin_data_selected); const tableWrapper = document.createElement('div'); tableWrapper.style.display = 'flex'; tableWrapper.style.flexWrap = 'wrap'; tableWrapper.style.alignItems = 'flex-start'; tableWrapper.style.gap = '10px'; tables.forEach(table => { const individualWrapper = document.createElement('div'); individualWrapper.appendChild(table); tableWrapper.appendChild(individualWrapper); }); container.appendChild(input_label); container.appendChild(tableWrapper); function createTables(dataString) { ui_tip_label.set_tip_label(node_selected) let disconnected_elements = get_disconnected_elements_by_name(edges, original_edges, original_edges_with_abs, node_selected) let _filter = remove_nodes_record.split(',').map(r => format_ion(r)); // console.log(_filter) let dataArray = dataString.trim().split(" ").map(item => item.split(":")); let tableContainers = []; const chunkSize = 10; if(dataArray.length >= 2) { for (let i = 0; i < dataArray.length; i += chunkSize) { let chunk = dataArray.slice(i, i + chunkSize); tableContainers.push(createTable(chunk, _filter, disconnected_elements)); } } return tableContainers; } function createTable(dataArray, _filter, disconnected_elements) { let table = document.createElement("table"); table.style.borderCollapse = "collapse"; table.style.maxHeight = "400px"; table.style.overflowY = "auto"; table.style.display = "block"; table.style.width = "200px" table.style.tableLayout = "fixed"; let thead = table.createTHead(); let headerRow = thead.insertRow(); ["Ions", "Percentage"].forEach(text => { let th = document.createElement("th"); th.textContent = text; th.style.border = "1px solid black"; th.style.padding = "5px"; headerRow.appendChild(th); }); let tbody = table.createTBody(); dataArray.forEach(([element, value]) => { let row = tbody.insertRow(); [element, value].forEach(text => { let cell = row.insertCell(); if(text.includes('^')) { cell.textContent = text; } else { cell.textContent = text + "%"; } cell.style.border = "1px solid black"; cell.style.padding = "5px"; cell.style.width = "135px"; cell.style.height = "20px"; if (_filter.includes(" " + element) || _filter.includes(element)) { cell.style.color = "gray"; cell.style.fontStyle = "italic"; } else { cell.style.fontSize = "15px"; cell.style.color = "Black"; cell.style.fontWeight = "bold"; let element_name = element.replace("^", "") if(disconnected_elements.includes(element_name)) { cell.style.fontWeight = "normal"; cell.style.fontSize = "15px"; } } }); }); return table; } function get_disconnected_elements_by_name(_edges, _originl_edges, _original_edges_with_abs, _name) { let disconnected_elements = []; if(_name != "") { let _e = original_edges.find(edge => edge.source.name === _name); let _id = _e.source.id let connected_edges = _originl_edges.filter(edge => edge.source.name == _name || edge.target.name == _name); let filtered_edges = connected_edges.filter(edge => edge.weight <= globalThis.threshold); let connected_edges_abs = _original_edges_with_abs.filter(edge => edge.source == _id || edge.target == _id); let filtered_edges_abs = connected_edges_abs.filter(edge => edge.weight <= globalThis.threshold_abs); let matched_edges_abs = original_edges.filter(edge => filtered_edges_abs.some(filteredEdge => (edge.source.id === filteredEdge.source && edge.target.id === filteredEdge.target) ) ); let combined_edges = [...new Set([...filtered_edges, ...matched_edges_abs])]; console.log(combined_edges) let node_names = [...new Set(combined_edges.flatMap(edge => [edge.source.name, edge.target.name]))]; disconnected_elements = node_names.filter(name => name != _name); } return disconnected_elements; } return container; }33:T14dc,async function ui_chart() { // create SVG container const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]); // append a background rectangle and set up click event to restore default opacity svg.append('rect') .attr('width', '100%') .attr('height', '100%') .attr('fill', 'white') .on('click', function() { console.log(globalThis.remove_input, "globalThis.remove_nodes_string") d3.selectAll('.link').style('stroke-opacity', '0.6'); d3.selectAll('[class^="node-"]').style('opacity', '1'); mutable origin_data_selected = ""; mutable node_selected = ""; }); // add zoom function var container = svg.append('g').attr('id', 'chart_container');; svg.call(zoom(container)); // init links and nodes var link = container.append("g").attr("class", "links").selectAll("line"); var node = container.append("g").attr("class", "nodes").selectAll("circle"); // every time we update graph use this function async function update() { let node_size = d3.scaleLinear().domain([d3.min(nodes, function(d) { return d.abundance / 5; }), d3.max(nodes, function(d) { return d.abundance / 5; })]).range(globalThis.node_size_array); // filter edges only when node is exsit const node_names = new Set(nodes.map(d => d.name)); const ne = edges.filter(edge => node_names.has(edge.source.name) && node_names.has(edge.target.name)); update_global_edges(ne); // update links ui link = link.data(edges, d => d.source.id + "," + d.target.id); link.exit().remove(); var link_enter = link.enter().append("line") .attr('class', 'link') .attr("stroke", "gray") .attr("stroke-opacity", 0.8); link = link_enter.merge(link); // update nodes ui node = node.data(nodes, d => d.id); node.exit().remove(); // ====================================== // // node selectded var node_enter = node.enter().append("g") .attr('class', d => `node-${d.id}`) .on('click', function(event) { const d = d3.select(this).datum() if (node_selected != "" && d.name == node_selected) { mutable node_selected = "" d3.selectAll('.link').style('stroke-opacity', '0.6'); d3.selectAll('[class^="node-"]').style('opacity', '1'); mutable origin_data_selected = ""; } else if (node_selected != "" && d.name != node_selected) { mutable node_selected = d.name; d3.select(this).style('opacity', 1); } else { mutable node_selected = d.name; d3.select(this).style('opacity', 1); } }) .call(drag(simulation)); if (node_selected != "") { var linked_index = {}; edges.forEach(d => { linked_index[d.source.name + ',' + d.target.name] = true; linked_index[d.target.name + ',' + d.source.name] = true; }); d3.selectAll('.link').style('stroke-opacity', function(l) { return l.target.name == node_selected || l.source.name == node_selected ? 1 : 0.1; }); d3.selectAll('[class^="node-"]').style('opacity', n => { if(node_selected == n.name) { let name = format_ion(node_selected) let _filter = data.map(obj => {if(obj[name] !== undefined && obj[name] != 0 && Object.entries(obj)[0] !== undefined && (Object.entries(obj)[0])[1] != name) {return (Object.entries(obj)[0])[1] + ":" + obj[name]}}); let str = _filter.toString() mutable origin_data_selected = str.replace(/,+/g, ' '); return 1; } return neighboring(node_selected, n.name, linked_index) ? 1 : 0.1; }); } // ====================================== // node_enter.append("circle") .attr('r', d => node_size(d.abundance) * 2.5) // .transition().duration(500) .attr("fill", d => colors[globalThis.communities[d.name]]); node_enter.append("text") .attr("dy", ".15em") .attr("text-anchor", "middle") .attr("fill", "black") .style("font-size", globalThis.font_size + "px") .text(d => d.name); node = node_enter.merge(node); // update font node.select("text") .style("font-size", globalThis.font_size + "px"); // update node size node.select("circle") .attr('r', d => node_size(d.abundance) * 2.5) // .transition().duration(500) .attr("fill", d => colors[globalThis.communities[d.name]]); nodes.forEach(d => { let communityColor = colors[globalThis.communities[d.name]]; d3.select(`.node-${d.id}`).select("circle").attr("fill", communityColor); }); // restart simulation simulation.nodes(nodes).on("tick", ticked); simulation.force("link").links(edges).distance(350-force); simulation.alpha(1).restart(); function ticked() { link.attr("x1", d => d.source.x) .attr("y1", d => d.source.y) .attr("x2", d => d.target.x) .attr("y2", d => d.target.y); node.attr("transform", d => `translate(${d.x},${d.y})`); } function neighboring(a, b, linked_index) { return linked_index[a + ',' + b] || linked_index[b + ',' + a] } } return Object.assign(svg.node(), { async update(nodes, edges) { await update(nodes, edges); } }); }34:T663,// this function only operates the links of the UI layer to change the color based on the current data. function ui_edge_highlight_slider() { let container = document.createElement('div'); let checkbox_label = document.createElement('label'); checkbox_label.textContent = "Show Links Highlight"; let checkbox = document.createElement('input'); checkbox.type = 'checkbox'; checkbox.checked = false; checkbox.onchange = () => { range.dispatchEvent(new Event('input')); }; checkbox_label.appendChild(checkbox); container.appendChild(checkbox_label); let min = 0 let max = 100 let slider = html` Link highlight: ${max}
`; let label = slider.querySelector('label'); let range = slider.querySelector('input'); range.oninput = () => { let threshold = range.valueAsNumber; label.innerHTML = `Link highlight: ${threshold}`; d3.selectAll(".link") .style("stroke-width", function(d) { if(d.weight >= threshold && checkbox.checked) { return 8 } else { return 1; } }) .style("stroke", function(d) { let sourc_name = d.source.name; if(d.weight >= threshold && checkbox.checked) { return colors[globalThis.communities[sourc_name]]; } else { return "gray"; } }); }; container.appendChild(checkbox_label); container.appendChild(document.createElement('br')); container.appendChild(slider); return container; };35:T697,ui_filtered_nodes_label = (()=> { let container = document.createElement('div'); let filteredNodesLabel = document.createElement('label'); filteredNodesLabel.id = 'filtered_nodes_label'; filteredNodesLabel.textContent = "Filtered Nodes: "; container.appendChild(filteredNodesLabel); function set_removed_nodes_text() { let removedNodesText = filter_removed_nodes(nodes, original_nodes); filteredNodesLabel.innerHTML = removedNodesText =="" ? "" :formatTextWithLineBreaks(removedNodesText, 30); mutable remove_nodes_record = removedNodesText; } // return the string of filter nodes function filter_removed_nodes(nodes, originalNodes) { const currentNodeIds = new Set(nodes.map(node => node.id)); const removedNodeNames = originalNodes .filter(originalNode => !currentNodeIds.has(originalNode.id) ) .map(originalNode => originalNode.name); let removedNodeNamesString = removedNodeNames.join(', '); if (removedNodeNamesString.endsWith(', ')) { removedNodeNamesString = removedNodeNamesString.slice(0, -2); } return removedNodeNamesString; } // return string base on removed nodes array function formatTextWithLineBreaks(text, maxLineLength) { const words = text.split(', '); let result = ''; let line = ''; words.forEach(word => { if ((line + word).length > maxLineLength) { result += line.trim().replace(/, $/, '') + '
'; line = ''; } line += word + ', '; }); if (line.trim().length > 0) { result += line.trim().replace(/, $/, ''); } return result; } return { container, set_removed_nodes_text }; })();36:T783,ui_cutoff_slider = (() => { let min = 0; let max = 70; let slider = document.createElement('div'); slider.innerHTML = ` Ion cutoff By Percentage: ${globalThis.threshold || min}% (Max: ${max}%)

Filtered out ions (no connections above ${globalThis.threshold || min}% threshold):
`; let threshold_label = slider.querySelector('label[for="threshold"]'); let filter_threshold_label = slider.querySelector('label[for="filter_threshold_label"]'); let range = slider.querySelector('input[type="range"]'); range.value = globalThis.threshold || min; range.oninput = async () => { let new_threshold = range.valueAsNumber; threshold_label.innerHTML = `Ion cutoff By Percentage: ${new_threshold}% (Max: ${max}%)`; filter_threshold_label.innerHTML = `Filtered out ions (no connections above ${new_threshold}% threshold)`; globalThis.threshold = new_threshold; let new_nodes = [...original_nodes]; let deleted_nodes = []; for (let ion in globalThis.checked_states) { if (globalThis.checked_states[ion]) { new_nodes = new_nodes.filter(node => { if (node.name.toLowerCase() === ion.toLowerCase()) { deleted_nodes.push(node); return false; } return true; }); } } let term = globalThis.remove_nodes_string.trim(); if (term !== "") { let terms = term.split(',').map(t => t.trim().toLowerCase()); for (let i = new_nodes.length - 1; i >= 0; i--) { if (terms.includes(new_nodes[i].name.toLowerCase())) { deleted_nodes.push(new_nodes[i]); new_nodes.splice(i, 1); } } } await ui_update_by_cutoff_slider(new_nodes); }; return { slider }; })();37:Tb7f,ui_cutoff_slider_by_abs = (() => { // let { max, min } = find_max_min_abundance(original_nodes); let min = 0; let max = 100; let slider = document.createElement('div'); slider.innerHTML = ` Ion cutoff by ABS: ${globalThis.threshold_abs || min} (Max: ${max})

Filtered out ions (no connections above ${globalThis.threshold_abs || min} threshold):
`; let threshold_label = slider.querySelector('label[for="threshold_abs"]'); let filter_threshold_label = slider.querySelector('label[for="filter_threshold_abs_label"]'); let number_input = slider.querySelector('#number-input') number_input.style.fontSize = "20px"; number_input.style.width = "100px"; number_input.addEventListener("change", function () { let currentValue = parseInt(number_input.value, 10); if (isNaN(currentValue) || currentValue < 0) { number_input.value = 0; globalThis.threshold_abs = 0; } else if (currentValue >= 100) { number_input.value = 100; globalThis.threshold_abs = 100 } else { globalThis.threshold_abs = currentValue } update(); }); number_input.addEventListener("input", function () { let currentValue = parseInt(number_input.value, 10); if (isNaN(currentValue) || currentValue < 0) { number_input.value = 0; globalThis.threshold_abs = 0; } else if (currentValue >= 100) { number_input.value = 100; globalThis.threshold_abs = 100 } else { globalThis.threshold_abs = currentValue } update(); }); async function update() { let new_threshold = globalThis.threshold_abs; threshold_label.innerHTML = `Ion cutoff by ABS: ${new_threshold} (Max: ${max})`; filter_threshold_label.innerHTML = `Filtered out ions (no connections above ${new_threshold} threshold)`; globalThis.threshold_abs = new_threshold; let new_nodes = [...original_nodes]; let deleted_nodes = []; for (let ion in globalThis.checked_states) { if (globalThis.checked_states[ion]) { new_nodes = new_nodes.filter(node => { if (node.name.toLowerCase() === ion.toLowerCase()) { deleted_nodes.push(node); return false; } return true; }); } } let term = globalThis.remove_nodes_string.trim(); if (term !== "") { let terms = term.split(',').map(t => t.trim().toLowerCase()); for (let i = new_nodes.length - 1; i >= 0; i--) { if (terms.includes(new_nodes[i].name.toLowerCase())) { deleted_nodes.push(new_nodes[i]); new_nodes.splice(i, 1); } } } await ui_update_by_cutoff_slider(new_nodes); }; return { slider }; })();38:Te13,ui_remove_nodes_controller = (() => { const common_ions = ['O2-', 'H+', 'Si4+', 'Ca2+', 'C4+', 'Al3+', 'Na+', 'S6+', 'P5+', 'Fe3+', 'Mg2+']; let container = document.createElement('div'); // title let title = document.createElement('div'); title.textContent = "Select to remove ions or enter ions to remove (comma-separated):"; container.appendChild(title); // input box let input_container = document.createElement('div'); let input_label = document.createElement('label'); input_label.textContent = 'Remove Ion:'; let input_box = document.createElement('input'); input_box.type = 'text'; input_box.placeholder = 'Enter ions to remove...'; update_input_box(); input_container.appendChild(input_label); input_container.appendChild(input_box); container.appendChild(input_container); function update_input_box() { input_box.value = globalThis.remove_nodes_string; } // common_ions.forEach(ion => { // let node = original_nodes.find(n => n.name == ion); // if (node) { // let label = document.createElement('label'); // label.textContent = node.name || ""; // let checkbox = document.createElement('input'); // checkbox.type = 'checkbox'; // checkbox.value = node.name; // checkbox.checked = globalThis.checked_states[node.name] || false; // checkbox.onchange = () => { // globalThis.checked_states[node.name] = checkbox.checked; // if(checkbox.checked) { // globalThis.remove_checked = globalThis.remove_checked + "," + node.name; // } else { // let valuesArray = globalThis.remove_checked.split(',').map(item => item.trim()); // let updatedValues = valuesArray.filter(item => item !== node.name); // let updatedString = updatedValues.join(', '); // globalThis.remove_checked = updatedString; // } // update_input_box(); // update_nodes(); // }; // label.appendChild(checkbox); // globalThis.checkboxMap[checkbox.value] = label; // container.appendChild(label); // } // }); input_box.onkeyup = () => { globalThis.remove_nodes_string = input_box.value; let term = input_box.value.trim().replace(/\s+/g, ''); let terms = term.split(','); // for (let ion in globalThis.checkboxMap) { // let checkbox = globalThis.checkboxMap[ion].querySelector('input'); // if (terms.includes(ion)) { // checkbox.checked = true; // globalThis.checked_states[ion] = true; // } else { // checkbox.checked = false; // globalThis.checked_states[ion] = false; // } // } update_nodes(); }; async function update_nodes() { let new_nodes = [...original_nodes]; let deleted_nodes = []; for (let ion in globalThis.checked_states) { if (globalThis.checked_states[ion]) { new_nodes = new_nodes.filter(node => { if (node.name.toLowerCase() === ion.toLowerCase()) { deleted_nodes.push(node); return false; } return true; }); } } let term = globalThis.remove_nodes_string.trim(); if (term !== "") { let terms = term.split(',').map(t => t.trim().toLowerCase()); for (let i = new_nodes.length - 1; i >= 0; i--) { if (terms.includes(new_nodes[i].name.toLowerCase())) { deleted_nodes.push(new_nodes[i]); new_nodes.splice(i, 1); } } } await ui_update_by_cutoff_slider(new_nodes); } return { container, update_nodes }; })();39:T57f,function ui_set_random_seed() { const container = document.createElement('div'); const input_label = document.createElement('label'); input_label.textContent = 'Random Seed:'; input_label.style.marginRight = '10px'; container.appendChild(input_label); const input_box = document.createElement('input'); input_box.type = 'text'; input_box.value = globalThis.seed; input_box.style.width = '150px'; input_box.style.height = '20px'; input_box.style.fontSize = '12px'; input_box.style.marginRight = '10px'; container.appendChild(input_box); setSeed(42); const update_button = document.createElement('button'); update_button.textContent = 'Set'; container.appendChild(update_button); update_button.onclick = (event) => { event.preventDefault(); globalThis.seed = input_box.value; setSeed(input_box.value) }; async function setSeed(seed) { const SERVER_URL = url; const set_seed = "seed" console.log(JSON.stringify({ seed: seed }) ) const response = await fetch(`${SERVER_URL}/${set_seed}`, { method: 'POST', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify({ seed: seed }) }); if (response.ok) { const data = await response.json(); console.log(data); } else { console.error("Error setting seed"); } } return container; } 3a:T6e3,function ui_take_snapshot_button() { const container = document.createElement('div'); const update_button = document.createElement('button'); update_button.textContent = 'Take Snapshot'; container.appendChild(update_button); update_button.onclick = (event) => { take_snapshot(); }; function take_snapshot() { const svgElement = document.querySelector('svg'); const chartGroup = document.getElementById('chart_container'); if (!svgElement || !chartGroup) { console.error('SVG or chart group not found!'); return; } const bbox = svgElement.getBoundingClientRect(); const width = bbox.width; const height = bbox.height; const pixelRatio = window.devicePixelRatio || 1; const clonedSvg = svgElement.cloneNode(true); const svgData = new XMLSerializer().serializeToString(clonedSvg); const svgBlob = new Blob([svgData], { type: 'image/svg+xml;charset=utf-8' }); const svgUrl = URL.createObjectURL(svgBlob); const img = new Image(); img.onload = function () { const canvas = document.createElement('canvas'); canvas.width = width * pixelRatio; canvas.height = height * pixelRatio; const ctx = canvas.getContext('2d'); ctx.scale(pixelRatio, pixelRatio); ctx.drawImage(img, 0, 0, width, height); const pngUrl = canvas.toDataURL('image/png'); const downloadLink = document.createElement('a'); downloadLink.href = pngUrl; downloadLink.download = 'chart_snapshot.png'; document.body.appendChild(downloadLink); downloadLink.click(); document.body.removeChild(downloadLink); URL.revokeObjectURL(svgUrl); }; img.src = svgUrl; } return container; } 3b:T9ee,async function caculate_communities() { const rng = seedrandom(globalThis.seed); let communities = {}; let options; let details; let graph = new graphology.Graph(); nodes.forEach((n) => graph.addNode(n.id)); edges.forEach((e) => graph.addEdge(e.source.id, e.target.id, { weight: e.weight })); let c_edges = graph.edges().map(edge => { let [source, target] = graph.extremities(edge); let weight = graph.getEdgeAttribute(edge, 'weight'); return { source: parseInt(source, 10), target: parseInt(target, 10), weights: parseFloat(weight).toFixed(3) }; }); let nodes_array = ([...new Set(c_edges.flat())]).map(node => [node.source, node.target]); ///////// switch (algorithm) { case "label_propagation": try { const data = await fetchCommunities("label_propagation", c_edges).then(data => { communities = convert_to_communities(data.communities, nodes_array); // console.log("Label Propagation:", data.communities); }); } catch (error) { console.error("Error fetching Label Propagation:", error); return {}; } break; case "infomap": try { const data = await fetchCommunities("infomap", c_edges).then(data => { communities = convert_to_communities(data.communities, nodes_array); console.log("Infomap:", communities); }); } catch (error) { console.error("Error fetching Infomap:", error); return {}; } break; case "walktrap": try { const data = await fetchCommunities(algorithm, c_edges).then(data => { communities = convert_to_communities(data.communities, nodes_array); // console.log(`${algorithm} Communities:`, data.communities); }); } catch (error) { console.error(`Error fetching ${algorithm}:`, error); return {}; } break; case "louvain": default: let louvain_graph = new graphology.Graph(); nodes.forEach((n) => louvain_graph.addNode(n.name)); edges.forEach((e) => louvain_graph.addEdge(e.source.name, e.target.name, { weight: e.weight / 100 }) ); options = { rng: rng, resolution: 1.0, fastLocalMoves: true, randomWalk: true, }; details = louvain.detailed(louvain_graph, options); communities = normalize_communities(details.communities); break; } // console.log("communities: ", communities); return communities; }3c:T59c,function normalize_communities(communities) { let mappedCommunities = { ...communities }; let usedNumbers = new Set( Object.values(communities).filter(v => v >= 2 && v <= 10) ); let largeValues = [...new Set(Object.values(communities).filter(v => v > 10))].sort((a, b) => a - b); let availableNumbers = new Set( [...Array(9).keys()].map(i => i + 2).filter(i => !usedNumbers.has(i)) ); let mapping = {}; for (let value of largeValues) { if (availableNumbers.size === 0) break; let minAvailable = Array.from(availableNumbers)[0]; mapping[value] = minAvailable; availableNumbers.delete(minAvailable); } for (let key in communities) { if (communities[key] > 10) { mappedCommunities[key] = mapping[communities[key]]; } } let countMap = {}; for (let value of Object.values(mappedCommunities)) { if (value !== -1) { countMap[value] = (countMap[value] || 0) + 1; } } let sortedGroups = Object.entries(countMap).sort((a, b) => b[1] - a[1]); let finalMapping = {}; sortedGroups.forEach(([originalValue], index) => { if (index <= 10) { finalMapping[originalValue] = index; } }); for (let key in mappedCommunities) { if (mappedCommunities[key] !== -1) { mappedCommunities[key] = finalMapping[mappedCommunities[key]]; } } // console.log("mappedCommunities: ", mappedCommunities); return mappedCommunities; }3d:[{"id":"3da72e659edb5742a8747ca369911bc5bd72153b6f3d6edb7b67fed1fb0f20c8b04c227c8f2a20b8d75a15bee646ba20b20836eace56e8c8d9db599fd751af4c","href":"https://static.observableusercontent.com/files/3da72e659edb5742a8747ca369911bc5bd72153b6f3d6edb7b67fed1fb0f20c8b04c227c8f2a20b8d75a15bee646ba20b20836eace56e8c8d9db599fd751af4c","name":"2025-Bermanec-Ions-SuppTable02-FEB01.csv","type":"text/csv","lastModified":1738536877389.18,"size":13208},{"id":"309786840845378fdab05180bccb13ae1d42644e1efe11c005b1d1365bc706ca5db53f7c2a9739807f7e925206c54c27cff363e731cf68980d431364d0f4998b","href":"https://static.observableusercontent.com/files/309786840845378fdab05180bccb13ae1d42644e1efe11c005b1d1365bc706ca5db53f7c2a9739807f7e925206c54c27cff363e731cf68980d431364d0f4998b","name":"2025-Bermanec-Ions-SuppTable03-FEB01.csv","type":"text/csv","lastModified":1738536877389.18,"size":18114},{"id":"127aabcd1d0a087079cf2ae018335ea4ac378cf64a678062b694147509048809617b06e1de3ff0b2b495a2670f82cc93fab74f4da83bea6c92f2dc2a74331c8e","href":"https://static.observableusercontent.com/files/127aabcd1d0a087079cf2ae018335ea4ac378cf64a678062b694147509048809617b06e1de3ff0b2b495a2670f82cc93fab74f4da83bea6c92f2dc2a74331c8e","name":"image.png","type":"image/png","lastModified":1738701801165.245,"size":268437}] 30:{"id":"646d21ae89964eb0","slug":null,"title":"Ion Co-occurrence Network With Percentage V3.1","thumbnail":"1e84ab45a13a5fc5b135bdb9238c04b3ccb7142f14eaeba4ac4a2caefa5588b5","access_level":"public","create_time":"$D2025-02-02T22:54:37.389Z","update_time":"$D2025-02-05T04:29:48.921Z","view_time":null,"first_public_time":"$D2025-02-02T22:54:37.389Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"b5b9728e59c3c510","login":"data8","name":"data","avatar_url":"https://avatars-next.observableusercontent.com/141627880d4714f4d022d32fcd164069d384e7a20f7f3d14b0978674254fe033","tier":"starter_2024"},"version":5106,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"b6a0831a63a6ee18","login":"null395925","name":"null","avatar_url":"https://avatars-next.observableusercontent.com/d5270b98ec49b7f08161425338c76173dd48880cac8a2425521abb3ee871e631","tier":null}],"members":[{"type":"team","id":"b5b9728e59c3c510","login":"data8","name":"data","avatar_url":"https://avatars-next.observableusercontent.com/141627880d4714f4d022d32fcd164069d384e7a20f7f3d14b0978674254fe033","tier":"starter_2024","role":"editor"},{"type":"individual","id":"b6a0831a63a6ee18","login":"null395925","name":"null","avatar_url":"https://avatars-next.observableusercontent.com/d5270b98ec49b7f08161425338c76173dd48880cac8a2425521abb3ee871e631","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":3,"collection":null,"type":"notebook","body":{"title":"Ion Co-occurrence Network With Percentage V3.1","cells":[{"id":0,"value":"# Ion Co-occurrence Network With Percentage V3.1","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":3265,"value":"***","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1970,"value":"highlight_label = {\n const label = document.createElement('label');\n label.textContent = 'Click any node to highlight it, click a blank space to cancel the highlight.';\n label.style = \"font-style: italic\";\n return label;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":985,"value":"font_size_input = ui_font_size_input();","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1002,"value":"node_size_input = ui_node_size();","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1990,"value":"force_adjustment_slider = ui_force_adjustment_slider();","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3404,"value":"ui_set_random_seed();","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3262,"value":"***","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":161,"value":"chart = ui_chart();","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3696,"value":"ui_take_snapshot_button();","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4376,"value":"

Bold: Ion visible and connected to the target ion

Normal: Ion disconnected

Grey: Ion filtered out

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":4282,"value":"ui_select_ion_origin_data_table();","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4951,"value":"ui_tip_label.label;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2120,"value":"ui_remove_nodes_controller.container;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3146,"value":"ui_cutoff_slider.slider;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3768,"value":"ui_cutoff_slider_by_abs.slider;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4546,"value":"ui_filtered_nodes_label.container;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":114,"value":"edge_highlight_slider = ui_edge_highlight_slider();","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3305,"value":"To maintain consistent Louvain colors across different settings, uncheck the Louvain box. Note that this disables Louvain calculation updating, potentially leading to inaccurate results.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":3287,"value":"ui_communities_update_checkbox.container;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4220,"value":"ui_communities_algorithm_selection.container;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4149,"value":"bermanecIonsSupptable02Feb01 = csv_data","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"bermanecIonsSupptable02Feb01","database":"$undefined"},{"id":3267,"value":"***","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":12,"value":"## 1.Data Preparation","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":3708,"value":"csv_data = FileAttachment(\"2025-Bermanec-Ions-SuppTable02-FEB01.csv\").csv();","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4110,"value":"csv_percentage_data = FileAttachment(\"2025-Bermanec-Ions-SuppTable03-FEB01.csv\").csv();","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3737,"value":"csv_data_matrix = fill_symmetric_matrix(csv_data)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3731,"value":"percentage_data = fill_symmetric_matrix(csv_percentage_data)// normalize_and_convert_to_percentage(csv_data_matrix)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4612,"value":"data = percentage_data;","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3711,"value":"function fill_symmetric_matrix(data) {\n const n = data.length;\n const keys = Object.keys(data[0]).slice(1);\n for (let i = 0; i < n; i++) {\n for (let j = i; j < n; j++) {\n const elementA = keys[i];\n const elementB = keys[j];\n\n let valueA = data[i][elementB];\n let valueB = data[j][elementA];\n\n if (valueA === null || valueA === \"\" || isNaN(valueA)) {\n valueA = valueB;\n data[i][elementB] = valueA;\n }\n\n if (valueB === null || valueB === \"\" || isNaN(valueB)) {\n valueB = valueA;\n data[j][elementA] = valueB;\n }\n }\n }\n\n return data;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3162,"value":"## 2.Data Init","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":16,"value":"original_nodes = csv_to_nodes(csv_data_matrix);// original_nodes got data directly from the csv table, and its value should not be changed after initialization","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":750,"value":"nodes = [...original_nodes];","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"original_edges = csv_to_edges(data);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":752,"value":"edges = [...original_edges];","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3871,"value":"original_edges_with_abs = csv_to_edges(csv_data_matrix);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":67,"value":"matrix = csv_to_matrix(percentage_data);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1280,"value":"globalThis.threshold = 0;","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3780,"value":"globalThis.threshold_abs = 0;","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2226,"value":"globalThis.communities = {}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3799,"value":"globalThis.communities = {} // await caculate_communities();","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4200,"value":"mutable is_commutities_update = true;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"csv_to_nodes = (csv) => {\n const nodes = [];\n csv.forEach((row, rowIndex) => {\n const rowValues = Array.isArray(row) ? row : Object.values(row);\n var node = {}\n rowValues.forEach((cell, colIndex) => {\n if(colIndex == 0 && !cell.includes(\"^0\")) {\n node = {\n \"name\": cell.replace(\"^\", \"\"),\n \"id\": rowIndex,\n \"index\": rowIndex,\n \"group\": 0,\n \"abundance\":0,\n }\n nodes.push(node)\n }\n if(colIndex - 1 == rowIndex) {\n node.abundance = cell\n }\n });\n })\n return nodes;\n};","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"csv_to_edges = function (csv) { \n const matrix = csv_to_matrix(csv);\n const edges = matrix_to_edges(matrix);\n return edges;\n};","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"csv_to_matrix = (csv) => {\n const datas = [[]];\n const nodes = [];\n csv.forEach((row, row_index) => {\n const rowValues = Array.isArray(row) ? row : Object.values(row);\n rowValues.forEach((cell, col_index) => {\n if(col_index != 0) {\n if (!datas[row_index])\n datas[row_index] = [];\n datas[row_index][col_index-1] = cell;\n }\n });\n })\n return datas;\n};","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":49,"value":"matrix_to_edges = (matrix) => {\n const edges = [];\n for (let i = 0; i < matrix.length; i++) {\n for (let j = i + 1; j < matrix[i].length; j++) {\n const weight = matrix[i][j];\n if (weight > 0 && i != j) {\n edges.push({ source: i, target: j, weight });\n }\n }\n }\n return edges;\n};","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":89,"value":"## 2.Utils","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":3482,"value":" await ui_remove_nodes_controller.update_nodes();","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3170,"value":"### 2.1 Global UI Variable Init","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2166,"value":"**_height_ controls the height of the chart image**","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":795,"value":"mutable height = 880","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2523,"value":"globalThis.seed = 42;","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":979,"value":"globalThis.font_size = 14;","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1006,"value":"globalThis.node_size_array = [6, 8];","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1092,"value":"mutable force = 20;","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3279,"value":"mutable is_louvain_update = true;","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1853,"value":"globalThis.checked_states = {};","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1850,"value":"globalThis.checkboxMap = {};","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":101,"value":"simulation = d3.forceSimulation(nodes)\n .force(\"link\", d3.forceLink(edges).id(function(d) { return d.id; }))\n .force(\"charge\", d3.forceManyBody().strength(-280).distanceMax(150))\n .force(\"center\", d3.forceCenter(width / 2, height / 2))\n .force(\"collide\", d3.forceCollide().radius(function(d) { return node_size(d.abundance); })); ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3633,"value":"simulation.force(\"link\").distance(350-force);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":91,"value":"// colors = d3.schemeCategory10;\ncolors = [\n \"#ff7f0e\",\n \"#d62728\",\n \"#2ca02c\", \n \"#1f77b4\",\n \"#8c564b\",\n \"#e377c2\",\n \"#9467bd\",\n \"#bcbd22\",\n \"#17becf\",\n \"#f4a261\",\n \"#e63946\",\n \"#a8dadc\",\n \"#1d3557\",\n \"#457b9d\",\n \"#7f7f7f\"\n];","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":97,"value":"zoom = container => {\n // zooming function translates the size of the svg container.\n function zoomed() {\n container.attr(\"transform\", \"translate(\" + d3.event.transform.x + \", \" + d3.event.transform.y + \")scale(\" + d3.event.transform.k + \")\");\n }\n return d3.zoom().scaleExtent([0.5,3]).on('zoom', zoomed);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":99,"value":"node_size = d3.scaleLinear()\n .domain([d3.min(nodes, function(d) { return d.abundance / 5; }), d3.max(nodes, function(d) { return d.abundance / 5; })])\n .range(globalThis.node_size_array);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":182,"value":"drag = simulation => {\n function dragstarted(d) {\n if (!d3.event.active) simulation.alphaTarget(0.3).restart();\n d.fx = d.x;\n d.fy = d.y;\n }\n\n function dragged(d) {\n d.fx = d3.event.x;\n d.fy = d3.event.y;\n }\n\n function dragended(d) {\n if (!d3.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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2084,"value":"async function update_graph(new_nodes, new_edges) {\n const node_set = new Set(new_nodes.map(node => node.id));\n \n \n const valid_edges = new_edges.filter(edge => node_set.has(edge.source.id) && node_set.has(edge.target.id));\n \n const node_edge_count = new Map();\n\n \n new_nodes.forEach(node => node_edge_count.set(node.id, 0));\n\n \n valid_edges.forEach(edge => {\n node_edge_count.set(edge.source.id, node_edge_count.get(edge.source.id) + 1);\n node_edge_count.set(edge.target.id, node_edge_count.get(edge.target.id) + 1);\n });\n\n \n let filtered_nodes = new_nodes.filter(node => node_edge_count.get(node.id) > 0);\n\n \n if (globalThis.threshold > 0) {\n filtered_nodes = filtered_nodes.filter(node => node_edge_count.get(node.id) > 0);\n }\n\n \n update_global_nodes(filtered_nodes);\n update_global_edges(valid_edges);\n\n \n if (is_commutities_update) {\n // console.log(\"Call update_graph\")\n globalThis.communities = await caculate_communities();\n }\n}\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":550,"value":"function update_global_nodes(new_nodes){\n nodes.length = 0;\n nodes.push(...new_nodes);\n};","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":537,"value":"function update_global_edges(new_edges){\n edges.length = 0;\n edges.push(...new_edges);\n};","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3773,"value":"function find_max_min_abundance(original_nodes) {\n let maxVal = -Infinity; // Initialize to negative infinity\n let minVal = Infinity; // Initialize to positive infinity\n\n // Iterate through the original_nodes array to find the max and min abundance\n for (let i = 0; i < original_nodes.length; i++) {\n const abundance = parseFloat(original_nodes[i].abundance);\n\n // Update maxVal and minVal\n if (abundance > maxVal) {\n maxVal = abundance;\n }\n if (abundance < minVal) {\n minVal = abundance;\n }\n }\n\n return { max: maxVal, min: minVal };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4298,"value":"function format_ion(ion) {\n return ion.replace(/(\\d*)([+-])/g, (_, num, sign) => (num ? `^${num}${sign}` : `^${sign}`));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2051,"value":"## 3.UI","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":3508,"value":"globalThis.remove_nodes_string = \"\";","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4277,"value":"mutable origin_data_selected = \"\";","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4388,"value":"mutable node_selected = \"\";","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4491,"value":"mutable remove_nodes_record = \"\";","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4734,"value":"globalThis.remove_checked = \"\";","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4279,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2093,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2054,"value":"function ui_font_size_input() {\n const container = document.createElement('div');\n \n const input_label = document.createElement('label');\n input_label.textContent = 'Font Size:';\n input_label.style.marginRight = '10px';\n container.appendChild(input_label);\n\n const input_box = document.createElement('input');\n input_box.type = 'number';\n input_box.value = globalThis.font_size;\n input_box.style.width = '50px';\n input_box.style.height = '20px';\n input_box.style.fontSize = '12px';\n input_box.style.marginRight = '10px';\n container.appendChild(input_box);\n\n const update_button = document.createElement('button');\n update_button.textContent = 'Update Font Size';\n container.appendChild(update_button);\n\n update_button.onclick = (event) => {\n const value = parseInt(input_box.value, 10);\n if (!isNaN(value)) {\n globalThis.font_size = value;\n chart.update();\n }\n };\n \n return container;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2061,"value":"function ui_node_size() {\n\n let min = 0;\n let max = 100;\n let slider = document.createElement('div');\n slider.innerHTML = `\n Node Size: ${(max + min) / 2}
\n
\n `;\n \n let threshold_label = slider.querySelector('label[for=\"threshold\"]');\n let range = slider.querySelector('input[type=\"range\"]');\n range.value = (max + min) / 2;\n range.oninput = () => {\n threshold_label.innerHTML = `Node Size: ${range.value}`;\n let normalizedValue = 6 + ((range.value - min) * (8 - 6)) / (max - min);\n globalThis.node_size_array[0] = normalizedValue;\n globalThis.node_size_array[1] = normalizedValue + 2;\n node_size();\n chart.update();\n };\n return slider;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2065,"value":"function ui_force_adjustment_slider() {\n let min = 0;\n let max = 100;\n let force = 20;\n let slider = document.createElement('div');\n slider.innerHTML = `\n Force: ${min}
\n
\n `;\n \n let threshold_label = slider.querySelector('label[for=\"threshold\"]');\n let range = slider.querySelector('input[type=\"range\"]');\n range.value = min;\n range.oninput = () => {\n let new_force = 20 + range.valueAsNumber\n force = new_force;\n threshold_label.innerHTML = `Force: ${range.valueAsNumber}`;\n simulation.force(\"charge\", d3.forceManyBody().strength(-280).distanceMax((200 - force) * 1.5));\n simulation.force(\"link\").distance(350-force);\n simulation.alpha(1).restart();\n };\n\n // .force(\"charge\", d3.forceManyBody().strength(-100).distanceMax(150))\n \n return slider;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2073,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3921,"value":"async function ui_update_by_cutoff_slider(new_nodes) {\n update_global_nodes(new_nodes);\n\n\n let new_edges_abs = original_edges_with_abs.filter(edge => edge.weight > globalThis.threshold_abs);\n\n let new_edges = original_edges.filter(edge => edge.weight > globalThis.threshold);\n\n let intersectionEdges = new_edges.filter(edge =>\n new_edges_abs.some(absEdge =>\n edge.source.id == absEdge.source && edge.target.id == absEdge.target\n )\n );\n // console.log(intersectionEdges)\n \n await update_graph(nodes, intersectionEdges); \n await chart.update();\n await ui_filtered_nodes_label.set_removed_nodes_text();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4526,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2078,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3766,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2115,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3283,"value":"ui_communities_update_checkbox = (() => {\n let container = document.createElement('div');\n\n let label = document.createElement('label');\n label.textContent = \"Recaculate Colors\";\n let checkbox = document.createElement('input');\n checkbox.style.marginLeft = \"10px\";\n checkbox.type = 'checkbox';\n checkbox.checked = true;\n checkbox.onchange = () => {\n mutable is_commutities_update = checkbox.checked;\n };\n label.appendChild(checkbox)\n container.appendChild(label);\n return {\n container,\n };\n})();","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3399,"value":"$39","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3687,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4183,"value":"ui_communities_algorithm_selection = (() => {\n let container = document.createElement('div');\n let label = document.createElement('label');\n label.style.marginRight = \"10px\"\n label.textContent = \"Communities Algorithms\";\n container.appendChild(label);\n \n const options = [\"louvain\", \"infomap\", \"label_propagation\", \"walktrap\"];\n \n const selectBox = document.createElement(\"select\");\n selectBox.setAttribute(\"id\", \"dynamicSelect\");\n selectBox.style.fontSize = \"20px\";\n selectBox.style.padding = \"0px\";\n selectBox.style.marginTop = \"0px\"; \n \n options.forEach(option => {\n const opt = document.createElement(\"option\");\n opt.value = option;\n opt.textContent = option;\n selectBox.appendChild(opt);\n });\n container.appendChild(selectBox);\n \n selectBox.addEventListener(\"change\", async () => {\n mutable algorithm = selectBox.value;\n globalThis.threshold = 0;\n globalThis.threshold_abs = 0;\n await chart.update();\n });\n \n return {\n container,\n };\n})();","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4957,"value":"ui_tip_label = (() => {\n const label = document.createElement('label');\n label.textContent = \"\";\n label.style.color = \"Red\";\n function set_tip_label(_ion) {\n if(_ion != \"\") {\n if(remove_nodes_record.includes(_ion) || remove_nodes_record.includes(\" \" + _ion)) {\n label.textContent = \"The targeted ion \"+ _ion + \" has been removed from the network at current filter conditions!\"\n } else {\n label.textContent = \"\";\n }\n }\n }\n return {\n label,\n set_tip_label\n };\n})();","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":337,"value":"## 4. Import","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":127,"value":"d3 = require(\"d3@4\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2191,"value":"graphology = import(\"https://cdn.jsdelivr.net/npm/graphology@0.25.4/+esm\");","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2197,"value":"louvain_library = import(\"https://cdn.jsdelivr.net/npm/graphology-communities-louvain@2.0.1/+esm\");","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2268,"value":"louvain = louvain_library.default","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3380,"value":"seedrandom = require(\"seedrandom\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4185,"value":"# Communities Algorithms","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":4187,"value":"mutable algorithm = \"louvain\";","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4190,"value":"async function fetchCommunities(algorithm, c_edges) {\n const SERVER_URL = url;\n try {\n const body = JSON.stringify({\n c_edges: c_edges.map(edge => [edge.source, edge.target]),\n weights: c_edges.map(edge => edge.weights)\n })\n\n \n const response = await fetch(`${SERVER_URL}/${algorithm}`, {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: body\n });\n\n\n if (!response.ok) {\n throw new Error(`Error: ${response.status} - ${response.statusText}`);\n }\n const res = await response.json()\n // console.log(res)\n return res;\n } catch (error) {\n console.error(\"Fetch error:\", error);\n return { error: error.message };\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4192,"value":"$3b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4269,"value":"function convert_to_communities(group_array, nodes_array) {\n console.log(nodes_array)\n const communities = {};\n group_array.forEach((group, groupIndex) => {\n group.forEach(nodeId => {\n const node = original_nodes.find(n => n.id === nodeId);\n if (node) {\n if(nodes_array.some(pair => pair.includes(node.id))) {\n communities[node.name] = groupIndex;\n } else {\n communities[node.name] = -1;\n } \n }\n });\n });\n return normalize_communities(communities);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4194,"value":"$3c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4244,"value":"url = \"https://cab-lemon.vercel.app\";","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W3d","stdlib":"1","titling":"auto"}} 31:"$30:body"