Public
Edited
Jun 1
correlation_network = FileAttachment("correlation_network.json").json()
data = await FileAttachment("correlation_network.json").json()
viewof interaction = Inputs.select([
"All",
"diet-bacteria",
"diet-symptom",
"bacteria-symptom",
"bacteria-metabolite",
"metabolite-symptom"
], {label: "Select interaction type:"})
filteredEdges = {
let type1 = interaction;
let type2 = interaction.split("-").reverse().join("-");
return interaction === "All"
? data.edges
: data.edges.filter(d => d.interaction === type1 || d.interaction === type2);
}
usedNodeIds = new Set(filteredEdges.flatMap(d => [d.source, d.target]))
filteredNodes = data.nodes.filter(n => usedNodeIds.has(n.id))
chart = {
const width = 800;
const height = 700;
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height])
.style("font", "12px sans-serif");
const color = d => ({
"bacteria": "#66c2a5",
"metabolite": "#fc8d62",
"symptom": "#8da0cb",
"diet": "#e78ac3",
"personal": "#a6d854"
}[d.group] || "#ccc");
const simulation = d3.forceSimulation(filteredNodes)
.force("link", d3.forceLink(filteredEdges).id(d => d.id).distance(80))
.force("charge", d3.forceManyBody().strength(-200))
.force("center", d3.forceCenter(width / 2, height / 2));
const link = svg.append("g")
.attr("stroke", "#aaa")
.attr("stroke-opacity", 0.6)
.selectAll("line")
.data(filteredEdges)
.join("line")
.attr("stroke-width", d => Math.sqrt(d.weight || 1))
.attr("stroke", d => d.color || "#999");
const node = svg.append("g")
.attr("stroke", "#fff")
.attr("stroke-width", 1.5)
.selectAll("circle")
.data(filteredNodes)
.join("circle")
.attr("r", 8)
.attr("fill", d => color(d))
.call(drag(simulation));
const label = svg.append("g")
.selectAll("text")
.data(filteredNodes)
.join("text")
.text(d => d.id)
.attr("x", 10)
.attr("y", 3);
node.append("title")
.text(d => `${d.id} (${d.group})`);
simulation.on("tick", () => {
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("cx", d => d.x)
.attr("cy", d => d.y);
label
.attr("x", d => d.x + 10)
.attr("y", d => d.y + 3);
});
function drag(simulation) {
function dragstarted(event, d) {
if (!event.active) simulation.alphaTarget(0.3).restart();
d.fx = d.x;
d.fy = d.y;
}
function dragged(event, d) {
d.fx = event.x;
d.fy = event.y;
}
function dragended(event, d) {
if (!event.active) simulation.alphaTarget(0);
d.fx = null;
d.fy = null;
}
return d3.drag()
.on("start", dragstarted)
.on("drag", dragged)
.on("end", dragended);
}
return svg.node();
}
akkermansia_faecalibacterium = FileAttachment("Akkermansia_Faecalibacterium.png").image()
clostridiumxviii = FileAttachment("ClostridiumXVIII.png").image()
eggerthella_biomarker = FileAttachment("Eggerthella_Biomarker.png").image()
pic2 = FileAttachment("pic2.png").image()
pic1 = FileAttachment("pic1.png").image()
Irritable bowel syndrome (IBS), a brain-gut interaction disorder characterized by abdominal pain and altered bowel habits, is the most prevalent gastrointestinal (GI) disorder worldwide, with a global prevalence ranging from approximately 6.5% to 34.2%. IBS primarily affects females (about two-thirds of cases) and imposes a high socioeconomic burden in well-developed countries. Studying the relationships between the gut microbiome (bacteria and its metabolites), diet, and self-reported GI symptoms (such as abdominal pain, constipation, diarrhea, and bloating) as well as non-GI symptoms (e.g., fatigue, stress, anxiety, and depression) is key to understanding the pathogenesis of IBS. The goal of this visualization project is to identify biomarkers (i.e., bacteria and/or metabolites) that may be associated with IBS. Differences in the gut microbiome—specifically fecal metabolites and bacterial profiles—between healthy control (HC) women and women with IBS may help clarify the current understanding that gut microbiome imbalances (also referred to as “gut dysbiosis”) play a role in the persistence of IBS symptoms.
https://gitlab.com/autleg-group/ibs-visualization
https://gitlab.cs.washington.edu/autleg/
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
