34:["$","title",null,{"children":"Project 4: The Affects of Psilocybin on the Human Brain | Jose.carmona-sanchez | Observable"}] 3c:T8ed,# Project 4: The Affects of Psilocybin on the Human Brain ### *Introduction & Hypothesis* The affects of psychedelics on the human brain has long been a focus of interest in the neuroscience field due to therapeutic potential and deeper insight for neurological network interactions and cellular and molecular mechanisms that underlay the nervous system. Prior research has shown that psilocybin largely affects the cerebral cortex but affects can also be seen across the temporal, occipital lobe, and deeper regions such as the basal ganglia. When looking into brain functional connectivity psilocybin has shown to disrupt connectivity within the mentioned regions mentioned above (Siegal et al, 2024). This notebook aims to explore the affects of psilocybin through correlation between different brain regions given fMRI data from the PsiConnect dataset (Novelli et al, 2026). **Hypothesis: Looking at correlation values between the control and the experimental (psilocybin) I expect to see an overall decrease in strongly correlated values.** ### *Data & Methodology* As stated in the introduction the data used in this notebook is fMRI from the PsiConnect dataset (Novelli et al, 2026). The data is composed of 4 different tasks: meditation, rest(eyes closed), movie watching, and music hearing. For now the notebook only looks at data from one subject (sub-PC001) but does incorporate all tasks. In the study the subjects first underwent all brain imaging (EEG and MRI) for the different task without psilicybin this is called session 1. After a week of initial imaging the subjects underwent the same imagining now with a 19mg dose of psilocybin. The analysis performed in this notebook looked at the pearsons correlation martix between session 1 and session 2. In order to achieve this analysis data preprocessing was done in python. Due to the size of fMRI data running a correlation anaylsis on the raw data is impractical (usually there is around 100,000 voxels). Hence a mask was applied to the raw fMRI data, specifically the Schafer 2018 atlas was applied to the data. What the mask does is aggregate voxels that are within a similar area. In this case applying the schafer 2018 atlas yielded a fMRI timeseries data with 58 ROIs (regions of interest).3d:T22c7,const compareView = (() => { const netSize = 440, matSize = 400; const baseOpacity = 0.35; // shared state (both panels stay in sync) let view = "axial", cutoff = 0.2, taskKey = "meditation"; let hoverId = null, selectedId = null; const wrapper = html`

`; wrapper.appendChild(html`

Correlation Functional connectivity before and after psilocybin: network graph and correlation matrix

sub-PC001 · 58 Schaefer 2018 regions · Session 1 (control) vs Session 2 (19 mg psilocybin)

`); const controls = html`

Task: View: Axial Sagittal Coronal Min |r|: 0.20

`; wrapper.appendChild(controls); const edgeColor = d3.scaleLinear().domain([-1, 0, 1]).range(["#2b8cbe", "#e0e0e0", "#e34a33"]); const matColor = d3.scaleDiverging(d3.interpolateRdBu).domain([1, 0, -1]); wrapper.appendChild(corrLegend(edgeColor, matColor)); const row = d3.select(wrapper).append("div") .style("display", "flex").style("flex-wrap", "wrap").style("gap", "24px"); const tooltip = d3.select(wrapper).append("div") .style("position", "absolute").style("visibility", "hidden").style("pointer-events", "none") .style("background", "rgba(0,0,0,0.85)").style("color", "#fff").style("padding", "6px 10px") .style("border-radius", "4px").style("font-size", "12px").style("z-index", "10"); const moveTip = (event) => { const [mx, my] = d3.pointer(event, wrapper); tooltip.style("left", (mx + 14) + "px").style("top", (my - 10) + "px"); }; const showTip = (h) => tooltip.style("visibility", "visible").html(h); const hideTip = () => tooltip.style("visibility", "hidden"); const lo = 30, hi = netSize - 30; const scales = { x: d3.scaleLinear().domain([-80, 80]).range([lo, hi]), y: d3.scaleLinear().domain([-110, 70]).range([hi, lo]), yh: d3.scaleLinear().domain([-110, 70]).range([lo, hi]), z: d3.scaleLinear().domain([-70, 80]).range([hi, lo]) }; const coords = (v, d) => v === "sagittal" ? [scales.yh(d.y), scales.z(d.z)] : v === "coronal" ? [scales.x(d.x), scales.z(d.z)] : [scales.x(d.x), scales.y(d.y)]; const linkOpacity = (e) => { if (Math.abs(e.correlation) < cutoff) return 0; const f = hoverId ?? selectedId; if (f == null) return baseOpacity; return (e.source === f || e.target === f) ? 1 : 0.03; }; const panels = []; function makePanel(title, session) { const col = row.append("div").style("flex", "1 1 400px").style("min-width", "320px"); col.append("h4").style("margin", "0 0 6px").text(title); const svgN = col.append("svg").attr("viewBox", [0, 0, netSize, netSize]) .style("width", "100%").style("background", "#fafafa"); const svgM = col.append("svg").attr("viewBox", [0, 0, matSize, matSize]) .style("width", "100%").style("margin-top", "8px"); const gLinks = svgN.append("g"), gNodes = svgN.append("g"); const gCells = svgM.append("g"), overlay = svgM.append("g").attr("pointer-events", "none"); let links, nodes, cells, labels = [], cs = 1, nodeById = new Map(); const setData = () => { const {nodes: nd, matrix} = taskData[taskKey][session]; const nodeArr = nd.nodes; labels = nodeArr.map(d => d.label); nodeById = new Map(nodeArr.map(d => [d.id, d])); const n = nodeArr.length; cs = matSize / n; const R = matrix.map(r => labels.map(l => +r[l])); const cellData = R.flatMap((r, i) => r.map((v, j) => ({i, j, v}))); links = gLinks.selectAll("line").data(nd.edges).join("line") .attr("stroke", d => edgeColor(d.correlation)) .attr("stroke-width", d => Math.abs(d.correlation) * 3) .on("mouseover", function(event, d) { if (Math.abs(d.correlation) < cutoff) return; showTip(`${labels[d.source]} ↔ ${labels[d.target]}
r = ${d.correlation.toFixed(2)}`); }) .on("mousemove", moveTip).on("mouseout", hideTip); nodes = gNodes.selectAll("circle").data(nodeArr).join("circle") .attr("stroke-width", 1.5).style("cursor", "pointer") .on("mouseover", (event, d) => { hoverId = d.id; refreshAll(); showTip(`${d.label}
MNI: [${d.x.toFixed(1)}, ${d.y.toFixed(1)}, ${d.z.toFixed(1)}]`); }) .on("mousemove", moveTip) .on("mouseout", () => { hoverId = null; refreshAll(); hideTip(); }) .on("click", (event, d) => { selectedId = selectedId === d.id ? null : d.id; refreshAll(); }); cells = gCells.selectAll("rect").data(cellData).join("rect") .attr("x", d => d.j * cs).attr("y", d => d.i * cs) .attr("width", cs).attr("height", cs) .attr("fill", d => matColor(d.v)).style("cursor", "pointer") .on("mouseover", (event, d) => { hoverId = d.i; refreshAll(); showTip(`Row: ${labels[d.i]}
Column: ${labels[d.j]}
r: ${d.v.toFixed(2)}`); }) .on("mousemove", moveTip) .on("mouseout", () => { hoverId = null; refreshAll(); hideTip(); }) .on("click", (event, d) => { selectedId = selectedId === d.i ? null : d.i; refreshAll(); }); place(false); refresh(); }; const place = (animate) => { const n = animate ? nodes.transition().duration(350) : nodes; n.attr("cx", d => coords(view, d)[0]).attr("cy", d => coords(view, d)[1]); const l = animate ? links.transition().duration(350) : links; l.attr("x1", d => coords(view, nodeById.get(d.source))[0]) .attr("y1", d => coords(view, nodeById.get(d.source))[1]) .attr("x2", d => coords(view, nodeById.get(d.target))[0]) .attr("y2", d => coords(view, nodeById.get(d.target))[1]); }; const refresh = () => { nodes.attr("r", d => (d.id === hoverId || d.id === selectedId) ? 9 : 5) .attr("fill", d => d.id === selectedId ? "#d62728" : d.id === hoverId ? "#ff7f0e" : "#222") .attr("stroke", d => d.id === selectedId ? "#000" : "#fff"); links.attr("opacity", linkOpacity) .style("pointer-events", d => Math.abs(d.correlation) < cutoff ? "none" : "auto"); cells.attr("opacity", d => d.i === d.j || Math.abs(d.v) >= cutoff ? 1 : 0.15); overlay.selectAll("*").remove(); const band = (id, color) => { overlay.append("rect").attr("x", 0).attr("y", id * cs).attr("width", matSize).attr("height", cs) .attr("fill", "none").attr("stroke", color).attr("stroke-width", 1.5); overlay.append("rect").attr("x", id * cs).attr("y", 0).attr("width", cs).attr("height", matSize) .attr("fill", "none").attr("stroke", color).attr("stroke-width", 1.5); }; if (selectedId != null) band(selectedId, "#d62728"); if (hoverId != null && hoverId !== selectedId) band(hoverId, "#ff7f0e"); }; const p = {setData, place, refresh}; panels.push(p); return p; } const refreshAll = () => panels.forEach(p => p.refresh()); makePanel("Session 1 (control)", "ses1"); makePanel("Session 2 (psilocybin)", "ses2"); // controls const val = controls.querySelector(".cmp-val"); controls.querySelector('select[name="cmp-task"]').addEventListener("change", (e) => { taskKey = e.target.value; selectedId = null; hoverId = null; panels.forEach(p => p.setData()); }); controls.querySelectorAll('input[name="cmp-view"]').forEach(inp => inp.addEventListener("change", () => { view = inp.value; panels.forEach(p => p.place(true)); })); controls.querySelector('input[name="cmp-cut"]').addEventListener("input", (e) => { cutoff = +e.target.value; val.textContent = cutoff.toFixed(2); refreshAll(); }); panels.forEach(p => p.setData()); return wrapper; })(); display(compareView);3e:T5aa,const netStats = (() => { const out = []; for (const ses of ["ses1", "ses2"]) { const {matrix} = taskData[netTask][ses]; const labels = Object.keys(matrix[0]); const net = labels.map(l => l.split("_")[1]); const sums = new Map(); matrix.forEach((row, i) => labels.forEach((l, j) => { if (i === j) return; const same = net[i] === net[j]; if ((netMode === "Within network") !== same) return; const s = sums.get(net[i]) ?? {sum: 0, n: 0}; s.sum += +row[l]; s.n++; sums.set(net[i], s); })); for (const [network, {sum, n}] of sums) out.push({network, session: ses === "ses1" ? "Session 1 (control)" : "Session 2 (psilocybin)", r: sum / n}); } return out; })(); const netPlot = display(Plot.plot({ title: `Average correlation by brain network: ${netTask}`, subtitle: `${netMode === "Within network" ? "Mean r between regions inside the same network" : "Mean r between each network's regions and all regions in other networks"} (both hemispheres pooled)`, width: 800, marginBottom: 40, x: {axis: null}, y: {label: "Mean Pearson r", grid: true}, fx: {axis: "bottom", label: null}, color: {legend: true, domain: ["Session 1 (control)", "Session 2 (psilocybin)"], range: ["#2b8cbe", "#e34a33"]}, marks: [ Plot.barY(netStats, {fx: "network", x: "session", y: "r", fill: "session", tip: {format: {r: d => d.toFixed(3), fx: true}}}), Plot.ruleY([0]) ] }));3f:T6cb,### *Results & Conclusion* Between all tasks looking at the network correlation plot and correlation matrix it seems that the control session seems to have a higher concentration of high correlation values compared to the psilocybin session. The only task where the difference isn't as apparent is the movie task. Although I believe that you can still see the difference in movie but it unlike the other three task. This is especially apparent when looking at the correlation matrix where there is a lot of white space in session 1 but is still accompanied by areas with strong correlation. Playing the minimal correlation value slider also makes it easier to see that all control sessions have a lot more strongly correlated values. It is also interesting to see how the correlation matrix for all session 2 are very similar in overall shape. Where there isn't specific areas that are more correlated with each other it reminds me of static of a tv. When looking at the histogram plots it supports what is shown with the network plots and correlation matrix. This is especially apprent when looking at between network correlation. When looking within network this effect is not as apparent. It is interesting to see that within network the dorsal attention network is closest between sessions but when looking between network is becomes the one that has the largest variation between sessions. Overall the results seem to support my hypothesis. There seems to be lower correlation functionality when under the influence of psilocybin. Although due to the time limit I was only able to show one subject in order to concretely accept my hypothesis showing that this behavior of correlation is seen in multiple subjects would be necessary.40:T5d7,const chart = (() => { const width = 600; const height = 600; const wrapper = html`

`; const svg = d3.select(wrapper).append("svg") .attr("viewBox", [0, 0, width, height]) .style("width", "100%") .style("background", "#fafafa"); // MNI coordinates -> SVG pixels const xScale = d3.scaleLinear().domain([-80, 80]).range([50, width - 50]); const yScale = d3.scaleLinear().domain([-110, 70]).range([height - 50, 50]); const colorScale = d3.scaleLinear() .domain([-1, 0, 1]) .range(["#2b8cbe", "#e0e0e0", "#e34a33"]); // Tooltip lives inside the wrapper (no leaks into document.body) const tooltip = d3.select(wrapper).append("div") .style("position", "absolute") .style("visibility", "hidden") .style("pointer-events", "none") .style("background", "rgba(0,0,0,0.8)") .style("color", "#fff") .style("padding", "6px 10px") .style("border-radius", "4px") .style("font-family", "sans-serif") .style("font-size", "12px"); const moveTip = (event) => { const [mx, my] = d3.pointer(event, wrapper); tooltip.style("left", (mx + 12) + "px").style("top", (my - 10) + "px"); }; const baseOpacity = 0.35; const nodeById = new Map(data.nodes.map(n => [n.id, n])); const links = svg.append("g") .selectAll("line") .data(data.edges) .join("line") .attr("stroke", d => colorScale(d.correlation)) .attr("stroke-width", d => Math.abs(d.correlation) * 3) .attr("opacity", baseOpacity) .attr("x1", d => xScale(nodeById.get(d.source).x)) .attr("y1", d => yScale(nodeById.get(d.source).y)) .attr("x2", d => xScale(nodeById.get(d.target).x)) .attr("y2", d => yScale(nodeById.get(d.target).y)) .on("mouseover", function(event, d) { d3.select(this).attr("opacity", 1).attr("stroke-width", Math.abs(d.correlation) * 6); tooltip.style("visibility", "visible") .html(`Correlation: ${d.correlation.toFixed(2)}`); }) .on("mousemove", moveTip) .on("mouseout", function(event, d) { d3.select(this).attr("opacity", baseOpacity).attr("stroke-width", Math.abs(d.correlation) * 3); tooltip.style("visibility", "hidden"); }); svg.append("g") .selectAll("circle") .data(data.nodes) .join("circle") .attr("cx", d => xScale(d.x)) .attr("cy", d => yScale(d.y)) .attr("r", 6) .attr("fill", "#222") .attr("stroke", "#fff") .attr("stroke-width", 1.5) .on("mouseover", function(event, d) { d3.select(this).attr("r", 10).attr("fill", "#ff7f0e"); links .attr("opacity", e => (e.source === d.id || e.target === d.id) ? 1 : 0.03); tooltip.style("visibility", "visible") .html(`${d.label}
MNI: [${d.x.toFixed(1)}, ${d.y.toFixed(1)}, ${d.z.toFixed(1)}]`); }) .on("mousemove", moveTip) .on("mouseout", function() { d3.select(this).attr("r", 6).attr("fill", "#222"); links.attr("opacity", baseOpacity); tooltip.style("visibility", "hidden"); }); return wrapper; })(); display(chart);42:T1104,const chart = (() => { const width = 600; const height = 600; const wrapper = html`

`; const controls = html`

Axial (X / Y) Sagittal (Y / Z) Coronal (X / Z)

`; wrapper.appendChild(controls); const svg = d3.select(wrapper).append("svg") .attr("viewBox", [0, 0, width, height]) .style("width", "100%") .style("background", "#fafafa"); const scales = { x: d3.scaleLinear().domain([-80, 80]).range([50, width - 50]), // Left-Right y: d3.scaleLinear().domain([-110, 70]).range([height - 50, 50]), // Posterior-Anterior z: d3.scaleLinear().domain([-70, 80]).range([height - 50, 50]) // Inferior-Superior }; const colorScale = d3.scaleLinear() .domain([-1, 0, 1]) .range(["#2b8cbe", "#e0e0e0", "#e34a33"]); const tooltip = d3.select(wrapper).append("div") .style("position", "absolute") .style("visibility", "hidden") .style("pointer-events", "none") .style("background", "rgba(0,0,0,0.85)") .style("color", "#fff") .style("padding", "6px 10px") .style("border-radius", "4px") .style("font-size", "12px") .style("z-index", "10"); const moveTip = (event) => { const [mx, my] = d3.pointer(event, wrapper); tooltip.style("left", (mx + 12) + "px").style("top", (my - 10) + "px"); }; const baseOpacity = 0.35; const nodeById = new Map(data.nodes.map(n => [n.id, n])); const getCoords = (view, node) => { if (view === "sagittal") return { cx: scales.x(node.y), cy: scales.z(node.z) }; if (view === "coronal") return { cx: scales.x(node.x), cy: scales.z(node.z) }; return { cx: scales.x(node.x), cy: scales.y(node.y) }; // default axial }; const links = svg.append("g") .selectAll("line") .data(data.edges) .join("line") .attr("stroke", d => colorScale(d.correlation)) .attr("stroke-width", d => Math.abs(d.correlation) * 3) .attr("opacity", baseOpacity) .on("mouseover", function(event, d) { d3.select(this).attr("opacity", 1).attr("stroke-width", Math.abs(d.correlation) * 6); tooltip.style("visibility", "visible") .html(`Correlation: ${d.correlation.toFixed(2)}`); }) .on("mousemove", moveTip) .on("mouseout", function(event, d) { d3.select(this).attr("opacity", baseOpacity).attr("stroke-width", Math.abs(d.correlation) * 3); tooltip.style("visibility", "hidden"); }); const nodes = svg.append("g") .selectAll("circle") .data(data.nodes) .join("circle") .attr("r", 6) .attr("fill", "#222") .attr("stroke", "#fff") .attr("stroke-width", 1.5) .on("mouseover", function(event, d) { d3.select(this).attr("r", 10).attr("fill", "#ff7f0e"); links.attr("opacity", e => (e.source === d.id || e.target === d.id) ? 1 : 0.03); tooltip.style("visibility", "visible") .html(`${d.label}
MNI: [${d.x.toFixed(1)}, ${d.y.toFixed(1)}, ${d.z.toFixed(1)}]`); }) .on("mousemove", moveTip) .on("mouseout", function() { d3.select(this).attr("r", 6).attr("fill", "#222"); links.attr("opacity", baseOpacity); tooltip.style("visibility", "hidden"); }); const updateProjection = (viewType) => { nodes.transition().duration(500) .attr("cx", d => getCoords(viewType, d).cx) .attr("cy", d => getCoords(viewType, d).cy); links.transition().duration(500) .attr("x1", d => getCoords(viewType, nodeById.get(d.source)).cx) .attr("y1", d => getCoords(viewType, nodeById.get(d.source)).cy) .attr("x2", d => getCoords(viewType, nodeById.get(d.target)).cx) .attr("y2", d => getCoords(viewType, nodeById.get(d.target)).cy); }; d3.select(controls).selectAll("input").on("change", function() { updateProjection(this.value); }); updateProjection("axial"); return wrapper; })(); display(chart); 43:T19da,const pinnableChart = (() => { const width = 600; const height = 600; const wrapper = html`

`; const controls = html`

View Projection: Axial (X / Y) Sagittal (Y / Z) Coronal (X / Z)

Minimum |r| Cutoff: 0.20 Click a node to pin its edges; click again to unpin.

`; wrapper.appendChild(controls); const sliderInput = controls.querySelector('input[name="threshold"]'); const sliderLabel = controls.querySelector('#threshold-val'); const svg = d3.select(wrapper).append("svg") .attr("viewBox", [0, 0, width, height]) .style("width", "100%") .style("background", "#fafafa"); const scales = { x: d3.scaleLinear().domain([-80, 80]).range([50, width - 50]), y: d3.scaleLinear().domain([-110, 70]).range([height - 50, 50]), z: d3.scaleLinear().domain([-70, 80]).range([height - 50, 50]) }; const colorScale = d3.scaleLinear() .domain([-1, 0, 1]) .range(["#2b8cbe", "#e0e0e0", "#e34a33"]); const tooltip = d3.select(wrapper).append("div") .style("position", "absolute") .style("visibility", "hidden") .style("pointer-events", "none") .style("background", "rgba(0,0,0,0.85)") .style("color", "#fff") .style("padding", "6px 10px") .style("border-radius", "4px") .style("font-size", "12px") .style("z-index", "10"); const moveTip = (event) => { const [mx, my] = d3.pointer(event, wrapper); tooltip.style("left", (mx + 12) + "px").style("top", (my - 10) + "px"); }; const baseOpacity = 0.35; const nodeById = new Map(data.nodes.map(n => [n.id, n])); let currentView = "axial"; let currentCutoff = 0.20; let hoveredId = null; let selectedId = null; const getCoords = (view, node) => { if (view === "sagittal") return { cx: scales.x(node.y), cy: scales.z(node.z) }; if (view === "coronal") return { cx: scales.x(node.x), cy: scales.z(node.z) }; return { cx: scales.x(node.x), cy: scales.y(node.y) }; }; const linkOpacity = (e) => { if (Math.abs(e.correlation) < currentCutoff) return 0; const focus = hoveredId ?? selectedId; if (focus == null) return baseOpacity; return (e.source === focus || e.target === focus) ? 1 : 0.03; }; const links = svg.append("g") .selectAll("line") .data(data.edges) .join("line") .attr("stroke", d => colorScale(d.correlation)) .attr("stroke-width", d => Math.abs(d.correlation) * 3) .attr("opacity", baseOpacity) .on("mouseover", function(event, d) { if (Math.abs(d.correlation) < currentCutoff) return; d3.select(this).attr("opacity", 1).attr("stroke-width", Math.abs(d.correlation) * 6); tooltip.style("visibility", "visible") .html(`Correlation: ${d.correlation.toFixed(2)}`); }) .on("mousemove", moveTip) .on("mouseout", function(event, d) { if (Math.abs(d.correlation) < currentCutoff) return; d3.select(this).attr("opacity", linkOpacity(d)).attr("stroke-width", Math.abs(d.correlation) * 3); tooltip.style("visibility", "hidden"); }); const nodes = svg.append("g") .selectAll("circle") .data(data.nodes) .join("circle") .attr("r", 6) .attr("fill", "#222") .attr("stroke", "#fff") .attr("stroke-width", 1.5) .style("cursor", "pointer"); const refreshHighlight = (animate = true) => { nodes .attr("r", d => (d.id === hoveredId || d.id === selectedId) ? 10 : 6) .attr("fill", d => d.id === selectedId ? "#d62728" : d.id === hoveredId ? "#ff7f0e" : "#222") .attr("stroke", d => d.id === selectedId ? "#000" : "#fff"); const sel = animate ? links.transition("fade").duration(150) : links; sel.attr("opacity", linkOpacity) .style("pointer-events", d => Math.abs(d.correlation) < currentCutoff ? "none" : "auto"); }; nodes .on("mouseover", function(event, d) { hoveredId = d.id; refreshHighlight(false); tooltip.style("visibility", "visible") .html(`${d.label}
MNI: [${d.x.toFixed(1)}, ${d.y.toFixed(1)}, ${d.z.toFixed(1)}]${d.id === selectedId ? "
pinned (click to unpin)" : ""}`); }) .on("mousemove", moveTip) .on("mouseout", function() { hoveredId = null; refreshHighlight(false); tooltip.style("visibility", "hidden"); }) .on("click", function(event, d) { selectedId = (selectedId === d.id) ? null : d.id; refreshHighlight(false); }); const updateVisuals = () => { nodes.transition().duration(400) .attr("cx", d => getCoords(currentView, d).cx) .attr("cy", d => getCoords(currentView, d).cy); links.transition().duration(400) .attr("x1", d => getCoords(currentView, nodeById.get(d.source)).cx) .attr("y1", d => getCoords(currentView, nodeById.get(d.source)).cy) .attr("x2", d => getCoords(currentView, nodeById.get(d.target)).cx) .attr("y2", d => getCoords(currentView, nodeById.get(d.target)).cy); refreshHighlight(true); }; d3.select(controls).selectAll('input[name="brainview"]').on("change", function() { currentView = this.value; updateVisuals(); }); d3.select(sliderInput).on("input", function() { currentCutoff = +this.value; sliderLabel.textContent = currentCutoff.toFixed(2); updateVisuals(); }); updateVisuals(); return wrapper; })(); display(pinnableChart); 44:T220a,function correlation_fc(nodes_data,correlation_matrix) { const linkedView = (() => { const netSize = 560, matSize = 520; const nodesData = nodes_data.nodes; const n = nodesData.length; const labels = nodesData.map(d => d.label); const nodeById = new Map(nodesData.map(d => [d.id, d])); const R = correlation_matrix.map(row => labels.map(l => +row[l])); const wrapper = html`

`; const controls = html`

View: Axial (X/Y) Sagittal (Y/Z) Coronal (X/Z)

Min |r|: 0.20 Hover nodes or matrix cells to link them; click a node or matrix cell to pin its region.

`; wrapper.appendChild(controls); const panels = d3.select(wrapper).append("div") .style("display", "flex").style("flex-wrap", "wrap").style("gap", "16px").style("align-items", "flex-start"); const tooltip = d3.select(wrapper).append("div") .style("position", "absolute").style("visibility", "hidden").style("pointer-events", "none") .style("background", "rgba(0,0,0,0.85)").style("color", "#fff").style("padding", "6px 10px") .style("border-radius", "4px").style("font-size", "12px").style("z-index", "10"); const moveTip = (event) => { const [mx, my] = d3.pointer(event, wrapper); tooltip.style("left", (mx + 14) + "px").style("top", (my - 10) + "px"); }; // ---- state ---- let view = "axial", cutoff = 0.2; let hoverId = null, hoverPair = null, selectedId = null; const baseOpacity = 0.35; // ---- network panel ---- const svg = panels.append("svg") .attr("viewBox", [0, 0, netSize, netSize]) .style("width", "min(100%, 560px)").style("flex", "1 1 380px").style("background", "#fafafa"); const scales = { x: d3.scaleLinear().domain([-80, 80]).range([40, netSize - 40]), y: d3.scaleLinear().domain([-110, 70]).range([netSize - 40, 40]), z: d3.scaleLinear().domain([-70, 80]).range([netSize - 40, 40]) }; const coords = (v, d) => v === "sagittal" ? {cx: scales.x(d.y), cy: scales.z(d.z)} : v === "coronal" ? {cx: scales.x(d.x), cy: scales.z(d.z)} : {cx: scales.x(d.x), cy: scales.y(d.y)}; const edgeColor = d3.scaleLinear().domain([-1, 0, 1]).range(["#2b8cbe", "#e0e0e0", "#e34a33"]); const links = svg.append("g").selectAll("line").data(nodes_data.edges).join("line") .attr("stroke", d => edgeColor(d.correlation)) .attr("stroke-width", d => Math.abs(d.correlation) * 3) .attr("opacity", baseOpacity); const nodes = svg.append("g").selectAll("circle").data(nodesData).join("circle") .attr("r", 6).attr("fill", "#222").attr("stroke", "#fff").attr("stroke-width", 1.5) .style("cursor", "pointer"); // ---- matrix panel ---- const msvg = panels.append("svg") .attr("viewBox", [0, 0, matSize, matSize]) .style("width", "min(100%, 520px)").style("flex", "1 1 380px"); const cs = matSize / n; const matColor = d3.scaleDiverging(d3.interpolateRdBu).domain([1, 0, -1]); const cellData = R.flatMap((row, i) => row.map((v, j) => ({i, j, v}))); const cellSel = msvg.append("g").selectAll("rect").data(cellData).join("rect") .attr("x", d => d.j * cs).attr("y", d => d.i * cs) .attr("width", cs).attr("height", cs) .attr("fill", d => matColor(d.v)) .style("cursor", "pointer"); const overlay = msvg.append("g").attr("pointer-events", "none"); // ---- rendering ---- const focusId = () => hoverId ?? selectedId; const linkOpacity = (e) => { if (Math.abs(e.correlation) < cutoff) return 0; const f = focusId(); if (f == null) return baseOpacity; return (e.source === f || e.target === f) ? 1 : 0.03; }; const band = (g, id, color, w) => { g.append("rect").attr("x", 0).attr("y", id * cs).attr("width", matSize).attr("height", cs) .attr("fill", "none").attr("stroke", color).attr("stroke-width", w); g.append("rect").attr("x", id * cs).attr("y", 0).attr("width", cs).attr("height", matSize) .attr("fill", "none").attr("stroke", color).attr("stroke-width", w); }; const refresh = (animate = false) => { nodes .attr("r", d => (d.id === hoverId || d.id === selectedId || (hoverPair && d.id === hoverPair.j)) ? 10 : 6) .attr("fill", d => d.id === selectedId ? "#d62728" : (d.id === hoverId || (hoverPair && d.id === hoverPair.j)) ? "#ff7f0e" : "#222") .attr("stroke", d => d.id === selectedId ? "#000" : "#fff"); const sel = animate ? links.transition("fade").duration(150) : links; sel.attr("opacity", linkOpacity) .style("pointer-events", d => Math.abs(d.correlation) < cutoff ? "none" : "auto"); // matrix: dim cells below cutoff (except diagonal) cellSel.attr("opacity", d => d.i === d.j || Math.abs(d.v) >= cutoff ? 1 : 0.15); overlay.selectAll("*").remove(); if (selectedId != null) band(overlay, selectedId, "#d62728", 1.5); if (hoverId != null && hoverId !== selectedId) band(overlay, hoverId, "#ff7f0e", 1.5); if (hoverPair) overlay.append("rect") .attr("x", hoverPair.j * cs).attr("y", hoverPair.i * cs).attr("width", cs).attr("height", cs) .attr("fill", "none").attr("stroke", "#000").attr("stroke-width", 2); }; const update = () => { nodes.transition().duration(400) .attr("cx", d => coords(view, d).cx).attr("cy", d => coords(view, d).cy); links.transition().duration(400) .attr("x1", d => coords(view, nodeById.get(d.source)).cx) .attr("y1", d => coords(view, nodeById.get(d.source)).cy) .attr("x2", d => coords(view, nodeById.get(d.target)).cx) .attr("y2", d => coords(view, nodeById.get(d.target)).cy); refresh(true); }; // ---- interactions: nodes ---- nodes .on("mouseover", (event, d) => { hoverId = d.id; hoverPair = null; refresh(); tooltip.style("visibility", "visible") .html(`${d.label}
MNI: [${d.x.toFixed(1)}, ${d.y.toFixed(1)}, ${d.z.toFixed(1)}]${d.id === selectedId ? "
pinned (click to unpin)" : ""}`); }) .on("mousemove", moveTip) .on("mouseout", () => { hoverId = null; refresh(); tooltip.style("visibility", "hidden"); }) .on("click", (event, d) => { selectedId = selectedId === d.id ? null : d.id; refresh(); }); // ---- interactions: edges ---- links .on("mouseover", function(event, d) { if (Math.abs(d.correlation) < cutoff) return; d3.select(this).attr("opacity", 1).attr("stroke-width", Math.abs(d.correlation) * 6); tooltip.style("visibility", "visible") .html(`${labels[d.source]} ↔ ${labels[d.target]}
r = ${d.correlation.toFixed(2)}`); }) .on("mousemove", moveTip) .on("mouseout", function(event, d) { d3.select(this).attr("opacity", linkOpacity(d)).attr("stroke-width", Math.abs(d.correlation) * 3); tooltip.style("visibility", "hidden"); }); // ---- interactions: matrix ---- cellSel .on("mouseover", (event, d) => { hoverId = d.i; hoverPair = d; refresh(); tooltip.style("visibility", "visible") .html(`Row: ${labels[d.i]}
Column: ${labels[d.j]}
r: ${d.v.toFixed(2)}`); }) .on("mousemove", moveTip) .on("mouseout", () => { hoverId = null; hoverPair = null; refresh(); tooltip.style("visibility", "hidden"); }) .on("click", (event, d) => { selectedId = selectedId === d.i ? null : d.i; refresh(); }); // ---- controls ---- d3.select(controls).selectAll('input[name="lv-view"]').on("change", function() { view = this.value; update(); }); const valLabel = controls.querySelector(".lv-val"); d3.select(controls.querySelector('input[name="lv-cut"]')).on("input", function() { cutoff = +this.value; valLabel.textContent = cutoff.toFixed(2); refresh(true); }); update(); return wrapper; })(); return linkedView; }45:T6cd,const data = FileAttachment("connectome_brain.json").json() const corr_matrix = await FileAttachment("correlation_matrix.csv").csv({ typed: true }); const subPC001_ses2_meditation_data = FileAttachment("ses2_meditation_connectome_data.json").json() const subPC001_ses2_meditation_corr_matrix = await FileAttachment("ses2_meditation_correlation_matrix.csv").csv({ typed: true }); const subPC001_ses1_movie_data = FileAttachment("subPC001_ses1_movie_connectome_data.json").json() const subPC001_ses1_movie_corr_matrix = await FileAttachment("subPC001_ses1_movie_correlation_matrix.csv").csv({ typed: true }); const subPC001_ses2_movie_data = FileAttachment("subPC001_ses2_movie_connectome_data.json").json() const subPC001_ses2_movie_corr_matrix = await FileAttachment("subPC001_ses2_movie_correlation_matrix.csv").csv({ typed: true }); const subPC001_ses1_music_data = FileAttachment("subPC001_ses1_music_connectome_data.json").json() const subPC001_ses1_music_corr_matrix = await FileAttachment("subPC001_ses1_music_correlation_matrix.csv").csv({ typed: true }); const subPC001_ses2_music_data = FileAttachment("subPC001_ses2_music_connectome_data.json").json() const subPC001_ses2_music_corr_matrix = await FileAttachment("subPC001_ses2_music_correlation_matrix.csv").csv({ typed: true }); const subPC001_ses1_rest_data = FileAttachment("subPC001_ses1_rest_connectome_data.json").json() const subPC001_ses1_rest_corr_matrix = await FileAttachment("subPC001_ses1_rest_correlation_matrix.csv").csv({ typed: true }); const subPC001_ses2_rest_data = FileAttachment("subPC001_ses2_rest_connectome_data.json").json() const subPC001_ses2_rest_corr_matrix = await FileAttachment("subPC001_ses2_rest_correlation_matrix.csv").csv({ typed: true });46:[{"id":"7d769a7f00d55a925dd286df5248387d1919eb4b15a56afb16c26fba12d7a5bd001adbecd5569a355cf9b7d10ba1cc342366ee405645c0068fef31454220a7e3","href":"https://static.observableusercontent.com/files/7d769a7f00d55a925dd286df5248387d1919eb4b15a56afb16c26fba12d7a5bd001adbecd5569a355cf9b7d10ba1cc342366ee405645c0068fef31454220a7e3","name":"connectome_brain.json","type":"application/json","lastModified":1793489827105,"size":200128},{"id":"01989b31a781bfe3a1e8312f0a2234ea41b15b1e0a6d66d7d2972946bafa7007e426a78b3eecbcd456f2b526dba7f7c15080cb6e77e9f9d19f8f47e9d45d5287","href":"https://static.observableusercontent.com/files/01989b31a781bfe3a1e8312f0a2234ea41b15b1e0a6d66d7d2972946bafa7007e426a78b3eecbcd456f2b526dba7f7c15080cb6e77e9f9d19f8f47e9d45d5287","name":"correlation_matrix.csv","type":"text/csv","lastModified":1793584148464,"size":18308},{"id":"76f429775c511f11f569d10df4a2589b2a577d5b09670c769ddda3dcd25c305f1170185cb1b3f406c80e2c852613195397a16ddf0e1661479ebb5c39b355318e","href":"https://static.observableusercontent.com/files/76f429775c511f11f569d10df4a2589b2a577d5b09670c769ddda3dcd25c305f1170185cb1b3f406c80e2c852613195397a16ddf0e1661479ebb5c39b355318e","name":"ses2_meditation_connectome_data.json","type":"application/json","lastModified":1793641037824,"size":138310},{"id":"1100812541900e64bf96d3048f3a1a3fbefa9e9635842be8064ec7c8e6da52b03dfcd0ed898df8987e1c20f3f7b7177dc3e9368449b277b316a5e97b8b9a0f3d","href":"https://static.observableusercontent.com/files/1100812541900e64bf96d3048f3a1a3fbefa9e9635842be8064ec7c8e6da52b03dfcd0ed898df8987e1c20f3f7b7177dc3e9368449b277b316a5e97b8b9a0f3d","name":"ses2_meditation_correlation_matrix.csv","type":"text/csv","lastModified":1793640942650,"size":19142},{"id":"de23cbb15be7beba17cce27aa712e81818bf95dffc12e05ba027b7711c34f20718e3c242e0d33c585ede41105f6901f4dd4cf78d7edf8a34422d3b1525e5087e","href":"https://static.observableusercontent.com/files/de23cbb15be7beba17cce27aa712e81818bf95dffc12e05ba027b7711c34f20718e3c242e0d33c585ede41105f6901f4dd4cf78d7edf8a34422d3b1525e5087e","name":"subPC001_ses1_movie_connectome_data.json","type":"application/json","lastModified":1793644401455,"size":192529},{"id":"845c13be53d889e8e18b6f5a800a661cb542efde721bb10500f2dbef389b2b12283bfe6c092b818b3907e5bdd2c67b24ce757665338ada58c562d6734675a19f","href":"https://static.observableusercontent.com/files/845c13be53d889e8e18b6f5a800a661cb542efde721bb10500f2dbef389b2b12283bfe6c092b818b3907e5bdd2c67b24ce757665338ada58c562d6734675a19f","name":"subPC001_ses1_movie_correlation_matrix.csv","type":"text/csv","lastModified":1793644317378,"size":18976},{"id":"756dfa2adf74c86272380ed876bf4e20002f99bb73b6732f1d9ec12b646aa610336429c1e4a519adeb0935df2f2220c824dcb16daa47c81419d38082aa8bfa09","href":"https://static.observableusercontent.com/files/756dfa2adf74c86272380ed876bf4e20002f99bb73b6732f1d9ec12b646aa610336429c1e4a519adeb0935df2f2220c824dcb16daa47c81419d38082aa8bfa09","name":"subPC001_ses2_movie_connectome_data.json","type":"application/json","lastModified":1793644389355,"size":179889},{"id":"a8dd06a661c2a2f5026d8c5215749dc9f539d5cb8baa334d404454246b828b14a24c20b4368bb34997962e86ee723b95f2531960a22db594a67301f2d35046f9","href":"https://static.observableusercontent.com/files/a8dd06a661c2a2f5026d8c5215749dc9f539d5cb8baa334d404454246b828b14a24c20b4368bb34997962e86ee723b95f2531960a22db594a67301f2d35046f9","name":"subPC001_ses2_movie_correlation_matrix.csv","type":"text/csv","lastModified":1793644301300,"size":19274},{"id":"d18d4ab93fa6801af26453459d29e8a8b854502e9cd8c58955524341d992c23c736cec8d3ec9d04d852957e1bd7943cae2642a97ce3aaf85174af21e6118c915","href":"https://static.observableusercontent.com/files/d18d4ab93fa6801af26453459d29e8a8b854502e9cd8c58955524341d992c23c736cec8d3ec9d04d852957e1bd7943cae2642a97ce3aaf85174af21e6118c915","name":"subPC001_ses1_music_connectome_data.json","type":"application/json","lastModified":1793645299621,"size":202906},{"id":"dd9822ac0cf9c84d921e1934a478496145745c2613af4022515c43ebdd0a0f588d2c11a50a8c63e426fa0023540352e9b45215fbb62e939acbfdb0f0cf152df6","href":"https://static.observableusercontent.com/files/dd9822ac0cf9c84d921e1934a478496145745c2613af4022515c43ebdd0a0f588d2c11a50a8c63e426fa0023540352e9b45215fbb62e939acbfdb0f0cf152df6","name":"subPC001_ses1_music_correlation_matrix.csv","type":"text/csv","lastModified":1793645098398,"size":18598},{"id":"663c28600480046c00b9db19a037731fd11bf4f535b411f766cf03289c7b1dfb0ddecfc05304a6df4f9c1974521ff6e0598dce10fc0a4793de645d9bf36a6d7a","href":"https://static.observableusercontent.com/files/663c28600480046c00b9db19a037731fd11bf4f535b411f766cf03289c7b1dfb0ddecfc05304a6df4f9c1974521ff6e0598dce10fc0a4793de645d9bf36a6d7a","name":"subPC001_ses2_music_connectome_data.json","type":"application/json","lastModified":1793645210222,"size":162619},{"id":"ef32261d0331105994c27a8d177380d4a4c7e02303c10ceeb620d423f19952065f5c6d46f221d30422aab9fe4eaa3f641c9ac970bafa0b9625ab87910271b8a7","href":"https://static.observableusercontent.com/files/ef32261d0331105994c27a8d177380d4a4c7e02303c10ceeb620d423f19952065f5c6d46f221d30422aab9fe4eaa3f641c9ac970bafa0b9625ab87910271b8a7","name":"subPC001_ses2_music_correlation_matrix.csv","type":"text/csv","lastModified":1793645119647,"size":19158},{"id":"1d822fe9bfa88a08b3062258332f61b05a0d8d105248366d1bfa8bdc4e131557b5879401eb2b7331e93490d5ffa9b5d479e8a16cf90a72b0327e91e0ee54d6a9","href":"https://static.observableusercontent.com/files/1d822fe9bfa88a08b3062258332f61b05a0d8d105248366d1bfa8bdc4e131557b5879401eb2b7331e93490d5ffa9b5d479e8a16cf90a72b0327e91e0ee54d6a9","name":"subPC001_ses1_rest_connectome_data.json","type":"application/json","lastModified":1793684904728,"size":206145},{"id":"faf601f1fe0c2d6e56bab9268fd548f09a6b4746b9f9edd545339356c50e3ef0299176d48402431ac399015f8ecc3ab0edb59c06267ecad45b6a9c77dba23788","href":"https://static.observableusercontent.com/files/faf601f1fe0c2d6e56bab9268fd548f09a6b4746b9f9edd545339356c50e3ef0299176d48402431ac399015f8ecc3ab0edb59c06267ecad45b6a9c77dba23788","name":"subPC001_ses1_rest_correlation_matrix.csv","type":"text/csv","lastModified":1793684797491,"size":18552},{"id":"4b6b610b8f8290dba71a95a0e18279ac8f729587e780334f975c69d8948691c7d90af7bce08835a27220c08bb5b5b17e9de36e60dfc70af2fa98d7405a4cf1dc","href":"https://static.observableusercontent.com/files/4b6b610b8f8290dba71a95a0e18279ac8f729587e780334f975c69d8948691c7d90af7bce08835a27220c08bb5b5b17e9de36e60dfc70af2fa98d7405a4cf1dc","name":"subPC001_ses2_rest_connectome_data.json","type":"application/json","lastModified":1793684923348,"size":179034},{"id":"5fe0e4304c35d0de3873134ae845e23e715aa6e90d5fd61356ea1448b746bf267860315bad6bea66bcf44f29e5c96bff675ca53b75525f99c6353b96c046eb18","href":"https://static.observableusercontent.com/files/5fe0e4304c35d0de3873134ae845e23e715aa6e90d5fd61356ea1448b746bf267860315bad6bea66bcf44f29e5c96bff675ca53b75525f99c6353b96c046eb18","name":"subPC001_ses2_rest_correlation_matrix.csv","type":"text/csv","lastModified":1793684785084,"size":19024},{"id":"196592958a313f04a18f065f5703ffba2d76699a4c53e880d132b113074490dca90592af7ec185c55112da4ba9a0335e9f4fc307090b7e62007abf55974d9055","href":"https://static.observableusercontent.com/files/196592958a313f04a18f065f5703ffba2d76699a4c53e880d132b113074490dca90592af7ec185c55112da4ba9a0335e9f4fc307090b7e62007abf55974d9055","name":"screenshot1.png","type":"image/png","lastModified":1793777425071,"size":682755},{"id":"02a42db76837783783e5a2b0f8e7d1d461f87f86675ff85af230649b7abbc5435ae5dfa90a6f68e1894e90329466665a7c23454bb1c4c3c384f84b2bb7e86df0","href":"https://static.observableusercontent.com/files/02a42db76837783783e5a2b0f8e7d1d461f87f86675ff85af230649b7abbc5435ae5dfa90a6f68e1894e90329466665a7c23454bb1c4c3c384f84b2bb7e86df0","name":"screenshot2.png","type":"image/png","lastModified":1793777438980,"size":158023},{"id":"864be7460cb00a4ece596a3580d5f4930e4af986234aa808c80aa7f13aea3fac3aae283d63e9dcaa37cdb4e6a2509cd14532062d9ad122debfd4e1fb7987b7cd","href":"https://static.observableusercontent.com/files/864be7460cb00a4ece596a3580d5f4930e4af986234aa808c80aa7f13aea3fac3aae283d63e9dcaa37cdb4e6a2509cd14532062d9ad122debfd4e1fb7987b7cd","name":"screenshot3.png","type":"image/png","lastModified":1793777447110,"size":152923}] 38:{"id":"d515ff7b15710a92","slug":"project-4-the-affects-of-psilocybin-on-the-human-brain","title":"Project 4: The Affects of Psilocybin on the Human Brain","thumbnail":"6a6bb96d87742ae96bd21a62d065ed3d11aab881849565346223897a63af06eb","access_level":"public","create_time":"$D2026-10-03T21:18:12.426Z","update_time":"$D2026-11-04T07:39:17.270Z","view_time":null,"first_public_time":"$D2026-11-04T07:40:18.087Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"6e1a0b6a59a98d7d","login":"jose-carmona-sanchez","name":"Jose.carmona-sanchez","avatar_url":"https://avatars-next.observableusercontent.com/7c7c926efd11da0bb4d75ebd1a0198795094c32af03dd95ecac6eebd7c4f7fb5","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":476,"publish_version":476,"role":null,"authored":false,"authors":[{"type":"individual","id":"ef578cb74e81811e","login":"jose-carmona-sanchez","name":"Jose.carmona-sanchez","avatar_url":"https://avatars-next.observableusercontent.com/7c7c926efd11da0bb4d75ebd1a0198795094c32af03dd95ecac6eebd7c4f7fb5","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"team","id":"6e1a0b6a59a98d7d","login":"jose-carmona-sanchez","name":"Jose.carmona-sanchez","avatar_url":"https://avatars-next.observableusercontent.com/7c7c926efd11da0bb4d75ebd1a0198795094c32af03dd95ecac6eebd7c4f7fb5","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Project 4: The Affects of Psilocybin on the Human Brain","cells":[{"id":1,"value":"$3c","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"$3d","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":55,"value":"\n \n A functional connectivity graph showing both a network graph and its corresponding correlation matrix. The network graph is composed of 58 different nodes which correspond with a specific brain region. Each node is placed using MNI coordinates which are coordinates used to map out a human brain. The coordinates seen within nodes is a rough centralization of a specific region. Do note that in order to lessen the memory load any edge that had a correlation of (+/-).2 or less was removed within the preprocessing step. Below the network graph you see the corresponding 58x58 correlation matrix. The .2 filter was not enforced on the correlation matrix.\n \n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":52,"value":"const netTask = view(Inputs.select(Object.keys(taskData), {label: \"Task\", value: \"meditation\"}));\nconst netMode = view(Inputs.radio([\"Within network\", \"Between networks\"], {label: \"Average r\", value: \"Within network\"}));","pinned":false,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":51,"value":"$3e","pinned":false,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":56,"value":"\n \n Histogram plot showing average correlation coefficient for yeo 7 brain networks. Each node shown in the network graph had a label that showed what brain network it was apart of. This histogram averages correlation values either within network or between network.\n \n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":57,"value":"$3f","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":59,"value":"### Color Accessibility (Protanopia)\n![Protanopia plot](${await FileAttachment('screenshot1.png').url()})\n![Protanopia plot](${await FileAttachment('screenshot2.png').url()})\n![Protanopia plot](${await FileAttachment('screenshot3.png').url()})","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"### AI Uses\nAI was used in this note, the LLM used was deepseek. AI was used in this notebook for graphing on observable specifically providing a graphical network template that would accept a list of nodes (id, coordinates, label) and a list of edges (source,target,correlation). AI was also used in helping setup the interactivity between the network graph and the correlation matrix.\n\n**Specific Prompts**\n- given a json file with node data that contains node id, 3d coordinates, and label and edge data that contains sourceid, targetid, and correlation value can you provide a template to graph nodes and edges within javascript\n- how to setup interactivity using D3.js\n- setting up interactivity between a node/edge graph and correlation matrix\n\n### Source\n- (Siegal et al, 2024) https://www.nature.com/articles/s41586-024-07624-5\n- (Novelli et al, 2026) https://openneuro.org/datasets/ds006110/versions/1.2.2","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"## Revisions","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"const chart = (() => {\n const width = 600;\n const height = 600;\n\n const wrapper = html`

`;\n\n const svg = d3.select(wrapper).append(\"svg\")\n .attr(\"viewBox\", [0, 0, width, height])\n .style(\"width\", \"100%\")\n .style(\"background\", \"#fafafa\");\n\n // MNI coordinates -> SVG pixels\n const xScale = d3.scaleLinear().domain([-80, 80]).range([50, width - 50]);\n const yScale = d3.scaleLinear().domain([-110, 70]).range([height - 50, 50]);\n\n const colorScale = d3.scaleLinear()\n .domain([-1, 0, 1])\n .range([\"#2b8cbe\", \"#e0e0e0\", \"#e34a33\"]);\n\n const baseOpacity = 0.35;\n const nodeById = new Map(data.nodes.map(n => [n.id, n]));\n\n svg.append(\"g\")\n .selectAll(\"circle\")\n .data(data.nodes)\n .join(\"circle\")\n .attr(\"cx\", d => xScale(d.x))\n .attr(\"cy\", d => yScale(d.y))\n .attr(\"r\", 6)\n .attr(\"fill\", \"#222\")\n .attr(\"stroke\", \"#fff\")\n .attr(\"stroke-width\", 1.5)\n\n return wrapper;\n})();\n\ndisplay(chart);","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":43,"value":"First successful attempt at applying the template that was given by deepseek, although at this point i wasn't sure if points were in 3d","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":42,"value":"$40","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":44,"value":"I than got the edges to show","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"$41","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":45,"value":"Next I focused on getting the interactivity to work. This was another part where AI came in real help. I was comfortable enough getting the data in a format json format with appropriate information. So the tough part was identifying what was needed to get the graph to pick up my mouse and what to show. Code from project 3 also did help here as well","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"$42","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":46,"value":"Since this was in 3d space I than focused on getting different views to work. The main idea is simple where depending on the view you would just include two coordinates. Tough part was understanding how D3 handles these animation. It is neat how you have to specify a starting position and finish posotion for everything on the graph","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"$43","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":47,"value":"To finish up the correlation fc graph I included a slider to help filter out edges with low correlation","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"const cols = Object.keys(corr_matrix[0]);\nconst cells = corr_matrix.flatMap((row, i) => cols.map((c, j) => ({i, j, value: +row[c]})));\n\nconst matrixPlot = display(Plot.plot({\n width: 640,\n height: 640,\n aspectRatio: 1,\n x: {axis: null},\n y: {axis: null},\n color: {scheme: \"RdBu\", reverse: true, domain: [-1, 1], legend: true, label: \"r\"},\n marks: [Plot.cell(cells, {x: \"j\", y: \"i\", fill: \"value\"})]\n}));","pinned":false,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"const interactiveCells = corr_matrix.flatMap((row, i) =>\n Object.keys(row).map((c, j) => ({i, j, row: Object.keys(row)[i], col: c, value: +row[c]}))\n);\n\nconst interactiveMatrix = display(Plot.plot({\n width: 640,\n height: 640,\n aspectRatio: 1,\n x: {axis: null},\n y: {axis: null},\n color: {scheme: \"RdBu\", reverse: true, domain: [-1, 1], legend: true, label: \"r\"},\n marks: [\n Plot.cell(interactiveCells, {x: \"j\", y: \"i\", fill: \"value\"}),\n Plot.tip(interactiveCells, Plot.pointer({\n x: \"j\",\n y: \"i\",\n channels: {Row: \"row\", Column: \"col\", r: \"value\"},\n format: {x: false, y: false, fill: false, Row: true, Column: true, r: (d) => d.toFixed(2)}\n }))\n ]\n}));","pinned":false,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":48,"value":"I than graph the correlation matrix which was the easiest part of the notebook.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"$44","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"correlation_fc(data,corr_matrix)","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":49,"value":"I finally combined everything together. Here I also used AI to get the dual graph interactivity going","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"$45","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"const taskData = {\n meditation: {\n ses1: {nodes: data, matrix: corr_matrix},\n ses2: {nodes: subPC001_ses2_meditation_data, matrix: subPC001_ses2_meditation_corr_matrix}\n },\n movie: {\n ses1: {nodes: subPC001_ses1_movie_data, matrix: subPC001_ses1_movie_corr_matrix},\n ses2: {nodes: subPC001_ses2_movie_data, matrix: subPC001_ses2_movie_corr_matrix}\n },\n music: {\n ses1: {nodes: subPC001_ses1_music_data, matrix: subPC001_ses1_music_corr_matrix},\n ses2: {nodes: subPC001_ses2_music_data, matrix: subPC001_ses2_music_corr_matrix}\n },\n rest: {\n ses1: {nodes: subPC001_ses1_rest_data, matrix: subPC001_ses1_rest_corr_matrix},\n ses2: {nodes: subPC001_ses2_rest_data, matrix: subPC001_ses2_rest_corr_matrix}\n }\n};\n","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":53,"value":"function corrLegend(edgeColor, matColor) {\n const grad = (f) => `linear-gradient(to right, ${d3.range(-1, 1.01, 0.1).map(v => f(v)).join(\",\")})`;\n const bar = (label, f) => html`

${label}

−10+1

`;\n return html`

\n ${bar(\"Network edges: correlation (r)\", edgeColor)}\n ${bar(\"Matrix cells: correlation (r)\", matColor)}\n

`;\n}","pinned":false,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W46","stdlib":"2"}} 33:null