2f:T7c6,plot1 = { let clusterPlot =heatmap(dt, {width:width, height:height+50,color:'#A3320B',clusterRows: clusterRows,clusterCols :clusterCols,clusteringDistanceCols:distCols,clusteringDistanceRows:distRows,clusteringMethodCols:clustCols , clusteringMethodRows:clustRows,marginTop: 80, marginLeft: 120})//, rowPadding:50,colPadding:32}) let colDistPlot = heatmap(distMatCol , {width:width, height:height-50,color:'green',clusterRows : false,clusterCols :false,marginTop: 0, marginLeft: 120}) let rowDistPlot = heatmap(distMatRow , {width:width-100, height:height+50,color:'green',clusterRows : false,clusterCols :false,marginTop: 80, marginLeft: 0}) let colCorrPlot = heatmap(colCorrelation, {width:width, height:height-50,color:'purple',colorScale:[-0.3,0.4],marginTop: 0, marginLeft: 120}) let rowCorrPlot = heatmap(rowCorrelation, {width:width-100, height:height+50,color:'purple',colorScale:[-0.3,0.4],marginTop: 80, marginLeft: 0}) // // -------------------------------------- const div2 = document.createElement("div") div2.style.display = "flex" div2.style['flex-direction'] = 'column'; div2.appendChild(clusterPlot) const div3 = document.createElement("div") div3.style.display = "flex" const div4 = document.createElement("div") div4.style.display = "flex" const div5 = document.createElement("div") div5.style.display = "flex" // // ------------------------------------- if (clusterCols){ div2.appendChild( colDistPlot) div2.appendChild(plotPCA(scores2,groups) ) // div2.appendChild(colCorrPlot) div2.appendChild(colNetworkDiv) } if (clusterRows){ div3.appendChild(rowDistPlot) // div4.appendChild(rowCorrPlot) div4.appendChild(plotPCA(scores,groups) ) div5.appendChild(rowNetworkDiv) } const container = document.createElement("div") container.style.display = "flex" container.appendChild(div2); container.appendChild(div3); container.appendChild(div4); container.appendChild(div5); return container }30:T1032,plotPCA = function(scores,groups){ const width = 270 const height = width/1.4 const fontFamily= 'monospace' const maxOpacity = 0.7 const margin = ({top: 20, right: 90, bottom: 45, left: 30}) const paddedMin = d3.min(scores, d => d.PC1) - d3.min(scores, d => d.PC1)*-0.10 const paddedMax = d3.max(scores, d => d.PC1) + d3.max(scores, d => d.PC1)*0.10 const x = d3.scaleLinear() .domain([paddedMin, paddedMax]) .range([margin.left, width - margin.right]) const xAxis = g => g .attr("transform", `translate(0,${height - margin.bottom + 5})`) .call(d3.axisBottom(x)) .call(g => g.select(".domain").remove()) .call(g => g.append("text") .attr("x", width-margin.left -38) .attr("y", 15) .attr("fill", "#000") .attr("font-weight", "bold") .attr("text-anchor", "end") .text("PC1")) const y = d3.scaleLinear() .domain(d3.extent(scores, d => d.PC2)) .range([height - margin.bottom, margin.top]) const yAxis = g => g .attr("transform", `translate(${margin.left-1},0)`) .call(d3.axisLeft(y)) .call(g => g.select(".domain").remove()) .call(g => g.select(".tick:last-of-type text").clone() .attr("x", -margin.top) .attr("y", -margin.top) .attr("fill", "#000") .attr("text-anchor", "start") .attr("font-weight", "bold") .text("PC2")) const svg = d3.create("svg") // const g = d3.select(DOM.svg(width, height)); const g = svg .attr('width', width ) .attr('height', height ) .append('g') // .attr('transform', `translate(${margin.left+margin.right}, ${margin.top+margin.bottom})`) g.append("g") .call(xAxis); g.append("g") .call(yAxis); g.append("rect") .attr("id", "background") .attr("x", margin.left) .attr("y", margin.top) .attr("width", width - margin.top - margin.right) .attr("height", height - margin.top - margin.bottom) .attr("fill", "white") .on("click", d => { d3.selectAll(".points, .keyRects").transition().attr("opacity", maxOpacity) }) const gPoints = g.append("g").attr("class", "gPoints"); const tooltip = d3tip() .style('border', 'solid 3px black') .style('background-color', 'white') .style('border-radius', '11px') .style('float', 'left') .style('font-family', fontFamily) .html((event, d) => `

name:${d.Name}
pc1:${d.PC1.toFixed(2)}
pc2:${d.PC2.toFixed(2)}

`) // Apply tooltip to our SVG svg.call(tooltip) gPoints.selectAll() g.append("g") .style("isolation", "isolate") .selectAll("circle") .data(scores) .enter().append("circle") .attr("class", "points") .attr("cx", d => x(d.PC1)) .attr("cy", d => y(d.PC2)) .attr("fill", d => color(d.group)) // .style("mix-blend-mode", blendingMode) .attr("opacity", 0.7) .attr("r", 4) .on('mouseover', tooltip.show) .on('mouseout', tooltip.hide) const key = g.append("g") .selectAll("rect") .data(groups) console.log("key",key) key.enter().append("rect") .attr("class", "keyRects") .attr("x", width - margin.left - 70) .attr("y", (d, i) => i * 20) .attr("width", 12) .attr("height", 12) .attr("fill", d => color(d)) .on("click", (event, d) => { return selectGroup(this, d, maxOpacity) }) key.enter().append("text") .attr("x", d => width - margin.left -50) .attr("y", (d, i) => i * 20) .attr("dy", "0.7em") .text(d => `${d}`) .style("font-size", "11px") .on("click", (event, d) => { return selectGroup(this, d, maxOpacity) }); // x and y-axis labels // svg.append("text") // .attr("class", "x label") // .attr("text-anchor", "end") // .attr("x", width/2) // .attr("y", height - 6) // .text("PC1"); // svg.append("text") // .attr("class", "y label") // .attr("text-anchor", "end") // .attr("x", -height/2) // .attr("y", 0) // .attr("dy", "0.9em") // .attr("transform", "rotate(-90)") // .text("PC2"); return svg.node(); }31:T1ad3,heatmap = function(matrix, options = {}){ const { width: width = 200, height: height = 200, // dendograms clusterCols: clusterCols = false, clusterRows: clusterRows = false, clusteringDistanceRows: clusteringDistanceRows = "euclidean", clusteringDistanceCols: clusteringDistanceCols = "euclidean", clusteringMethodCols: clusteringMethodCols = "complete", clusteringMethodRows: clusteringMethodRows = "complete", marginTop: marginTop = clusterCols ? 80 : 30, marginLeft: marginLeft = clusterRows ? 120 : 30, colPadding: colPadding = clusterCols ? 20 : 0, rowPadding: rowPadding = clusterRows ? 20 : 0, // heatmap color: color = "red", colorScale: colorScale = [0,100], // hover tooltip decimal: decimal = 2, fontFamily: fontFamily= 'monospace' } = options; const margin = ({ top: marginTop,bottom:0,left:marginLeft,right:0}) const svg = d3.create("svg") const data = matrix.data ? matrix.data: matrix // Heatmap-------------------- const colHclustTree = new hclust.agnes(dist(transpose(data), distance[clusteringDistanceCols]), { method:clusteringMethodCols, isDistanceMatrix: true}) const root = d3.hierarchy(colHclustTree) const clusterLayout = d3.cluster() clusterLayout(root) const rowHclustTree2 = new hclust.agnes(dist(data, distance[clusteringDistanceRows]), { method: clusteringMethodRows, isDistanceMatrix: true}) const root2 = d3.hierarchy(rowHclustTree2) const clusterLayout2 = d3.cluster() clusterLayout2(root2) let colIdx = clusterCols ? root.leaves().map(x=>x.data.index): d3.range(data[0].length)//col clust let rowIdx = clusterRows ? root2.leaves().map(x=>x.data.index) : d3.range(data.length)//row clust console.log("rowIdx",rowIdx) const newMatrix2 = transpose(colIdx.map(i => transpose(rowIdx.map(e => data[e])) [i])) // if labels (truncated length) are not provided, indices are used let colNames2 = matrix.colNames ? trimText(colIdx, matrix.colNames) : Array.from(new Array(data[0].length),(x,i)=> i + 1) let rowNames2 = matrix.colNames ? trimText(rowIdx, matrix.rowNames) : Array.from(new Array(data[0].length),(x,i)=> i + 1) console.log("rowNames2",rowNames2) // max x and y label lengths to be used in dendogram heights const colNames2Lengths = d3.max(colNames2.map(e => e.length)) const rowNames2Lengths = d3.max(rowNames2.map(e => e.length)) const color_scale = d3.scaleLinear() .domain(colorScale) .range(['#fff', `${color}`]) let x_scale = d3.scaleBand() .domain(colNames2) .range([0, width-margin.left-margin.right]) let y_scale = d3.scaleBand() .domain(rowNames2) .range([ 0, height-margin.top]) const g = svg .attr('width', width ) .attr('height', height ) .append('g') // move the entire graph down and right to accomodate labels .attr('transform', `translate(${margin.left+margin.right}, ${margin.top+margin.bottom})`) //text x axis const xAxis = g.append('g') .call(d3.axisTop(x_scale)) xAxis.selectAll('.tick').selectAll('line').remove() xAxis.selectAll("text") .style("text-anchor", "start") .attr("dx", "2px") .attr("dy", "1.1em") .attr("transform", "rotate(-90)") .attr("class", "xa") //text y axis let yAxis = g.append('g') .call(d3.axisLeft(y_scale)) .attr("id", "ya") yAxis.selectAll('.tick').selectAll('line').remove() yAxis.selectAll("text") .attr("dx", "7px") .attr("dy", "0.3em") .attr("class", "yaa") const gPoints = g.append("g").attr("class", "gPoints"); const tooltip = d3tip() .style('border', 'solid 3px black') .style('background-color', 'white') .style('border-radius', '10px') .style('float', 'left') .style('font-family', fontFamily) .html((event, d) => `

value:${d.value.toFixed(decimal)}
row:${rowNames2[d.n]}, col:${colNames2[d.t] }

`) // Apply tooltip to our SVG svg.call(tooltip) gPoints.selectAll() .data(buildData(newMatrix2)) .enter() .append('rect') .attr('x', (d) => x_scale(colNames2[d.t])) .attr('y', (d) => y_scale(rowNames2[d.n])) .attr('width', width/data[0].length) .attr('height', height/data.length) .attr('fill', (d) => color_scale(d.value)) .on('mouseover', tooltip.show) .on('mouseout', tooltip.hide) // Top dendogram--------------------------------- if (clusterCols== true){ console.log(root.links()) const colMaxHeight = root.data.height; const allNodes = root.descendants().reverse() const leafs = allNodes.filter(d => !d.children) leafs.sort((a,b) => a.x - b.x) const leafHeight = (width-margin.left)/ leafs.length // spacing between leaves leafs.forEach((d,i) => d.x = i*leafHeight + leafHeight/2) allNodes.forEach(node => { if (node.children) { node.x = d3.mean(node.children, d => d.x) }}) root.links().forEach((link,i) => { svg .append("path") .attr("class", "link") .attr("stroke", link.source.color || "blue") .attr("stroke-width", `${5}px`) .attr("fill", 'none') .attr("transform", `translate(${margin.left},7)`) .attr("d", colElbow(link,colMaxHeight,margin.top,colNames2Lengths)) }) } // bottom dendogram---------------------- if (clusterRows== true){ const dendoTooltip = d3tip() .style('border', 'solid 3px black') .style('background-color', 'white') .style('border-radius', '10px') .style('float', 'left') .style('font-family', 'monospace') .html((event, d) => `

Height:${d.source.data.height.toFixed(3)}

`) const rowMaxHeight = root2.data.height; const clusterLayout2 = d3.cluster() clusterLayout2(root2) const allNodes2 = root2.descendants().reverse() const leafs2 = allNodes2.filter(d => !d.children) leafs2.sort((a,b) => a.x - b.x) const leafHeight2 = (height-margin.top)/ leafs2.length leafs2.forEach((d,i) => d.x = i*leafHeight2 + leafHeight2/2) allNodes2.forEach(node => { if (node.children) { node.x = d3.mean(node.children, d => d.x) }}) // Apply tooltip to our SVG svg.call(dendoTooltip) console.log(root2.links()) root2.links().forEach((link,i) => { svg .append("path") .attr("class", "link") .attr("stroke", link.source.color || "red") .attr("stroke-width", `${5}px`) .attr("fill", 'none') .attr("transform", `translate(7,${margin.top})`) .attr("d", rowElbow(link,rowMaxHeight,margin.left,rowNames2Lengths)) .on('mouseover', dendoTooltip.show) // Hide the tooltip when "mouseout" .on('mouseout', dendoTooltip.hide) }) svg.selectAll('path') .data(root2.links()) } return svg.node() }32:T8c2, function simpleHeatmap(matrix,rownames, colnames){ // index of the rows based on cluster hierarchy const svg = d3 .create("svg") const height = 400 const width = 250 const margin = ({ top: 30, bottom: 30, left: 30, right: 30 }); // interactive labels const tooltip = d3tip() .style('border', 'solid 2px black') .style('background-color', 'white') .style('border-radius', '6px') .style('float', 'left') .style('font-family', 'monospace') .style("font-size", '12px') .html((event, d) => `

val:${d.value.toFixed(0)}
row:${d.n}, col:${d.t}

`) svg.call(tooltip) let y_scale = d3.scaleBand() .domain(rownames) .range([ 0, height-margin.top-margin.bottom]) let x_scale = d3.scaleBand() .domain(colnames) .range([0, width-margin.left-margin.right]) console.log("colnames",colnames) console.log("colnames[0]",colnames[0]) console.log("coln",x_scale(colnames[0])) console.log("colnames[1]",colnames[1]) console.log("coln",x_scale(colnames[1])) const g = svg .attr('width', width) .attr('height', height) .append('g') // .attr('transform', `translate(0, 0)`) .attr('transform', `translate(${margin.left+margin.right}, ${margin.top+margin.bottom})`) //create x axis const x_axis = d3 .axisTop(x_scale) g .append('g') .attr('class', 'xAxis') .style("font-size", "13") .call(x_axis) //create y axes const y_axis = d3 .axisLeft(y_scale) g .append('g') .attr('class', 'yAxis') .style("font-size", "13") .call(y_axis); // create squares const gPoints = g.append("g").attr("class", "gPoints"); gPoints.selectAll() .data(buildData(matrix)) .enter() .append('rect') .attr('x', (d) => x_scale(colnames[d.t])) .attr('y', (d) => y_scale(rownames[d.n])) .attr('width', width/matrix[0].length) .attr('height', height/matrix.length) .attr('fill', (d) => color_scale(d.value)) // show the tooltip when "mouseover" .on('mouseover', tooltip.show) // Hide the tooltip when "mouseout" .on('mouseout', tooltip.hide) return svg.node() }33:T63b, function dendoHeatmap(matrix,width,height,rowname, colname, color){ const svg = d3 .create("svg") const color_scale = d3.scaleLinear() .domain([0, 100]) .range(['#fff', `${color}`]) let y_scale = d3.scaleBand() .domain(d3.range(matrix.length)) .range([0, height]) let x_scale = d3.scaleBand() .domain(d3.range(matrix[0].length)) .range([0, width]) const g = svg .attr('width', width ) .attr('height', height ) .append('g') .attr('transform', `translate(0, 0)`) // .attr('transform', `translate(20, 0)`) //text y axis g.append('g') .call(d3.axisLeft(y_scale)) const gPoints = g.append("g").attr("class", "gPoints"); const tooltip = d3tip() .style('border', 'solid 3px black') .style('background-color', 'white') .style('border-radius', '10px') .style('float', 'left') .style('font-family', 'monospace') .html((event, d) => `

PRS:${d.value.toFixed(0)}
samp:${rowname[d.n]}, PGS:${colname[d.t]}

corr: ${d.value.toFixed(2)}
samp:${idx2[d.n]}, samp:${idx2[d.t]}

dist: ${d.value.toFixed(0)}
samp:${idx2[d.n]}, samp:${idx2[d.t]}

`) // Apply tooltip to our SVG svg.call(tooltip) gPoints.selectAll() .data(buildData(matrix)) .enter() .append('rect') .attr('x', (d) => x_scale(d.t) ) // .attr('x', (d) => x_scale(d.t) + 20) .attr('y', (d) => y_scale(d.n)) .attr('width', width/matrix[0].length) .attr('height', height/matrix.length) .attr('fill', (d) => color_scale(d.value)) .on('mouseover', tooltip.show) // Hide the tooltip when "mouseout" .on('mouseout', tooltip.hide) return svg.node() }36:T175a,// Copyright 2021-2024 Observable, Inc. // Released under the ISC license. // https://observablehq.com/@d3/force-directed-graph function ForceGraphOld({ nodes, // an iterable of node objects (typically [{id}, …]) links // an iterable of link objects (typically [{source, target}, …]) }, { nodeId = d => d.id, // given d in nodes, returns a unique identifier (string) nodeName = d => d.name, nodeGroup, // given d in nodes, returns an (ordinal) value for color nodeGroups, // an array of ordinal values representing the node groups nodeTitle, // given d in nodes, a title string nodeFill = "currentColor", // node stroke fill (if not using a group color encoding) nodeStroke = "#fff", // node stroke color nodeStrokeWidth = 0.2, // node stroke width, in pixels nodeStrokeOpacity = 1, // node stroke opacity nodeRadius = 6, // node radius, in pixels nodeStrength, linkSource = ({source}) => source, // given d in links, returns a node identifier string linkTarget = ({target}) => target, // given d in links, returns a node identifier string linkStroke = "#999", // link stroke color linkStrokeOpacity = 0.4, // link stroke opacity linkStrokeWidth = 9, // given d in links, returns a stroke width in pixels linkStrokeLinecap = "round", // link stroke linecap linkStrength, colors = d3.schemeTableau10, // an array of color strings, for the node groups width = 300, // outer width, in pixels height = 300, // outer height, in pixels invalidation, // when this promise resolves, stop the simulation forceNode = d3.forceManyBody().strength(-4) } = {}) { // Compute values. const N = d3.map(nodes, nodeId).map(intern); const N2 = d3.map(nodes, nodeName).map(intern); const R = typeof nodeRadius !== "function" ? null : d3.map(nodes, nodeRadius); const LS = d3.map(links, linkSource).map(intern); const LT = d3.map(links, linkTarget).map(intern); if (nodeTitle === undefined) nodeTitle = (_, i) => N[i]; const T = nodeTitle == null ? null : d3.map(nodes, nodeTitle); const G = nodeGroup == null ? null : d3.map(nodes, nodeGroup).map(intern); const W = typeof linkStrokeWidth !== "function" ? null : d3.map(links, linkStrokeWidth); const L = typeof linkStroke !== "function" ? null : d3.map(links, linkStroke); // Replace the input nodes and links with mutable objects for the simulation. nodes = d3.map(nodes, (_, i) => ({id: N[i], name: N2[i]})); console.log("nodes", nodes) links = d3.map(links, (_, i) => ({source: LS[i], target: LT[i]})); // Compute default domains. if (G && nodeGroups === undefined) nodeGroups = d3.sort(G); // Construct the scales. const color = nodeGroup == null ? null : d3.scaleOrdinal(nodeGroups, colors); // Construct the forces. //const forceNode = d3.forceManyBody().strength(-4); const forceLink = d3.forceLink(links).id(({index: i}) => N[i]).distance([50]); if (nodeStrength !== undefined) forceNode.strength(nodeStrength); if (linkStrength !== undefined) forceLink.strength(linkStrength); const simulation = d3.forceSimulation(nodes) .force("link", forceLink) // .force("link", d3.forceLink().id(function(d) { return d.id; })) .force("charge", forceNode) .force("center", d3.forceCenter()) const svg = d3.create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [-width / 2, -height / 2, width, height]) .attr("style", "max-width: 100%; height: auto; height: intrinsic;"); const link = svg.append("g") .attr("stroke", typeof linkStroke !== "function" ? linkStroke : null) .attr("stroke-opacity", linkStrokeOpacity) .attr("stroke-width", typeof linkStrokeWidth !== "function" ? linkStrokeWidth : null) .attr("stroke-linecap", linkStrokeLinecap) .selectAll("line") .data(links) .join("line") // .attr("stroke-width", d => Math.sqrt(d.value)); const node = svg.append("g") .selectAll(".node") .data(nodes) .join("g") .attr('class', 'node') .call(drag(simulation)); node.append('circle') .attr("r", 5) .attr("fill", "purple"); node.append("text") .text(function(d) { return d.name; }) .style('fill', '#000') .style('font-size', '12px') .attr('x', 6) .attr('y', 3); 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("transform", d => `translate(${d.x}, ${d.y})`); }); if (W) link.attr("stroke-width", ({index: i}) => W[i]); if (L) link.attr("stroke", ({index: i}) => L[i]); if (G) node.attr("fill", ({index: i}) => color(G[i])); if (R) node.attr("r", ({index: i}) => R[i]); if (T) node.append("title").text(({index: i}) => T[i]); if (invalidation != null) invalidation.then(() => simulation.stop()); function intern(value) { return value !== null && typeof value === "object" ? value.valueOf() : value; } 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("cx", d => d.x) .attr("cy", d => d.y); } function drag(simulation) { function dragstarted(event) { if (!event.active) simulation.alphaTarget(0.0).restart(); event.subject.fx = event.subject.x; event.subject.fy = event.subject.y; } function dragged(event) { event.subject.fx = event.x; event.subject.fy = event.y; } function dragended(event) { if (!event.active) simulation.alphaTarget(0.0); event.subject.fx = null; event.subject.fy = null; } return d3.drag() .on("start", dragstarted) .on("drag", dragged) .on("end", dragended); } return svg.node() // return Object.assign(svg.node(), {scales: {color}}); }37:[] 2d:{"title":"Hierarchical clustering","cells":[{"id":0,"value":"# Hierarchical clustering","pinned":false,"hidden":false,"mode":"md"},{"id":5437,"value":"### Example based on Risk scores for individuals with 23andMe reports","pinned":false,"hidden":false,"mode":"md"},{"id":5428,"value":"A polygenic risk score (PRS) is a statistical calculation that estimates an individual's likelihood of developing a medical condition based on their genetic variants. PRS is also known as a polygenic score, genetic risk score, or genome-wide score.","pinned":false,"hidden":false,"mode":"md"},{"id":2239,"value":"viewof clusterRows = Inputs.toggle({label: \"Cluster rows (individuals)\", value: false})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2875,"value":"viewof clusterCols = Inputs.toggle({label: \"Cluster columns (scores)\", value: false})","pinned":false,"hidden":false,"mode":"ojs"},{"id":3539,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs"},{"id":4016,"value":"### _row parameters_","pinned":false,"hidden":false,"mode":"md"},{"id":3276,"value":"viewof distRows = Inputs.select(Object.keys(distance), {value: \"euclidean\", label: \"Dist Method\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":3971,"value":"viewof clustRows = Inputs.select([\"ward\",\"ward2\",\"single\", \"complete\", \"average\",\"upgma\", \"wpgma\", \"upgmc\",\"wpgmc\",\"median\",\"centroid\"], {value: \"complete\", label: \"Cluster Method\"})\n//https://github.com/mljs/hclust/blob/1e05947e815323b7b1244027cba2acb9af77d584/src/agnes.js#L59-L167","pinned":false,"hidden":false,"mode":"ojs"},{"id":2999,"value":" viewof corrCoef2 = Inputs.range([0,1], {label: \"CorrCoef\",value: 0.3})","pinned":false,"hidden":false,"mode":"ojs"},{"id":4022,"value":"### _column parameters_","pinned":false,"hidden":false,"mode":"md"},{"id":3266,"value":"viewof distCols = Inputs.select(Object.keys(distance), {value: \"euclidean\", label: \"Dist Method\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":3995,"value":"viewof clustCols = Inputs.select([\"ward\",\"ward2\",\"single\", \"complete\", \"average\",\"upgma\", \"wpgma\", \"upgmc\",\"wpgmc\",\"median\",\"centroid\"], {value: \"complete\", label: \"Cluster Method\"})\n//https://github.com/mljs/hclust/blob/1e05947e815323b7b1244027cba2acb9af77d584/src/agnes.js#L59-L167","pinned":false,"hidden":false,"mode":"ojs"},{"id":2116,"value":" viewof corrCoef = Inputs.range([0,1], {label: \"CorrCoef\",step: 0.01, value: 0.2})","pinned":false,"hidden":false,"mode":"ojs"},{"id":4028,"value":"### _data_","pinned":false,"hidden":false,"mode":"md"},{"id":2694,"value":"dt = new Object({\"rowNames\":[\"indiv1\", \"indiv2\", \"indiv3\", \"indiv4\", \"indivi5\", \"indiv6\", \"indiv7\", \"indiv8\", \"indiv9\"], \"colNames\":[\"pgs1\", \"pgs2\", \"pgs3\", \"pgs4\", \"pgs5\", \"pgs6\"], \"data\":matrix})","pinned":true,"hidden":false,"mode":"ojs"},{"id":4782,"value":"### PRS","pinned":false,"hidden":false,"mode":"md"},{"id":5424,"value":"In a genome-wide association study (GWAS), beta values are regression coefficients that indicate the effect size of a variant on a trait. Beta values represent the increase or decrease in the outcome per unit. The higher the absolute value of the beta coefficient, the stronger the effect.","pinned":false,"hidden":false,"mode":"md"},{"id":4620,"value":"### PCA (samples)","pinned":false,"hidden":false,"mode":"md"},{"id":4667,"value":"scores = pcaScores\n .predict(asMatrix(scale(pcaDt.map((row) => _.omit(row, ['group','Name'])))))\n .toJSON()\n .map((row, rowIndex) => {\n const columns = Object.keys(pcaDt[rowIndex]);\n const rowObj = {\n group: pcaDt[rowIndex]['group'],\n Name: pcaDt[rowIndex]['Name']\n };\n columns.forEach((column, colIndex) => {\n rowObj[`PC${colIndex + 1}`] = row[colIndex];\n });\n return rowObj;\n }).map(({PC1,PC2,group,Name}) => ({PC1,PC2,group,Name}))","pinned":false,"hidden":false,"mode":"ojs"},{"id":4625,"value":"group = [\"breastcancer\", \"t2d\",\"lungcancer\",\"breastcancer\", \"t2d\",\"lungcancer\",\"breastcancer\", \"t2d\",\"lungcancer\"]","pinned":false,"hidden":false,"mode":"ojs"},{"id":4578,"value":"pcaDt = dt.rowNames.map((row, rowIdx) => {\n let obj = {}\n dt.colNames.map((col,colIdx)=> {obj[col] = dt.data[rowIdx][colIdx]})\n obj['group'] = group[rowIdx]\n obj['Name'] = dt.rowNames[rowIdx]\n return obj\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":4657,"value":"pcaDtScaled = scale( pcaDt.map((row) => _.omit(row, ['group','Name'])) )","pinned":false,"hidden":false,"mode":"ojs"},{"id":4661,"value":"groups = [\"breastcancer\", \"t2d\", \"lungcancer\"]","pinned":false,"hidden":false,"mode":"ojs"},{"id":4665,"value":"pcaScores = new PCA(asMatrix(pcaDtScaled), { center: true, scale: true })","pinned":false,"hidden":false,"mode":"ojs"},{"id":5342,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":4793,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":4789,"value":"### PCA (pgs entries)","pinned":false,"hidden":false,"mode":"md"},{"id":4812,"value":"scores2 = pcaScores2\n .predict(asMatrix(scale(pcaDt2.map((row) => _.omit(row, ['group','Name'])))))\n .toJSON()\n .map((row, rowIndex) => {\n const columns = Object.keys(pcaDt2[rowIndex]);\n const rowObj = {\n group: pcaDt2[rowIndex]['group'],\n Name: pcaDt2[rowIndex]['Name']\n };\n columns.forEach((column, colIndex) => {\n rowObj[`PC${colIndex + 1}`] = row[colIndex];\n });\n return rowObj;\n }).map(({PC1,PC2,group,Name}) => ({PC1,PC2,group,Name}))","pinned":false,"hidden":false,"mode":"ojs"},{"id":4799,"value":"group2 = [\"breastcancer\", \"t2d\",\"lungcancer\",\"breastcancer\", \"t2d\",\"lungcancer\"]","pinned":false,"hidden":false,"mode":"ojs"},{"id":4795,"value":"pcaDt2 = dt.colNames.map((col, colIdx) => {\n let obj = {}\n dt.rowNames.map((row,rowIdx)=> {obj[row] = dt.data[rowIdx][colIdx]})\n obj['group'] = group[colIdx]\n obj['Name'] = dt.colNames[colIdx]\n return obj\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":4810,"value":"pcaDtScaled2 = scale( pcaDt2.map((row) => _.omit(row, ['group','Name'])) )","pinned":false,"hidden":false,"mode":"ojs"},{"id":4828,"value":"pcaScores2 = new PCA(asMatrix(pcaDtScaled2), { center: true, scale: true })","pinned":false,"hidden":false,"mode":"ojs"},{"id":4808,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":4653,"value":"PCA = (await require(\"https://bundle.run/ml-pca@4.0.2\")).PCA","pinned":false,"hidden":false,"mode":"ojs"},{"id":4629,"value":"import {\n scale,\n asMatrix,\n asDataFrame\n} from \"@chrispahm/hierarchical-clustering\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":4701,"value":"function selectGroup(ctx, group) {\n const groupElements = d3.selectAll(\".points\")\n .filter(d => d.group !== group);\n \n const activeGroup = d3.selectAll(\".keyRects\")\n .filter(d => d === group);\n \n const otherElements = d3.selectAll(\".points\")\n .filter(d => d.group === group);\n \n const otherGroups = d3.selectAll(\".keyRects\")\n .filter(d => d !== group);\n \n groupElements.transition().attr(\"opacity\", 0.1);\n otherGroups.transition().attr(\"opacity\", 0.1);\n \n otherElements.transition().attr(\"opacity\", 0.7);\n activeGroup.transition().attr(\"opacity\", 0.7);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":4675,"value":"color = d3.scaleOrdinal( [\"#8C236A\", \"#4477AA\", \"#AA7744\", \"#117777\", \"#DD7788\", \"#77AADD\", \"#777711\", \"#AA4488\", \"#44AA77\", \"#AA4455\"])\n .domain(groups)","pinned":false,"hidden":false,"mode":"ojs"},{"id":4732,"value":"R = require(\"https://cdnjs.cloudflare.com/ajax/libs/ramda/0.25.0/ramda.min.js\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1609,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":2194,"value":"#### How to adjust margins!\n","pinned":false,"hidden":false,"mode":"md"},{"id":2919,"value":"_Height is the same for all 3 plots_","pinned":false,"hidden":false,"mode":"md"},{"id":2849,"value":"// plot4 = { const div11 = document.createElement(\"div\")\n// div11.appendChild(heatmap(matrix,))\n// div11.appendChild(heatmap(matrix,{clusterRows: true}))\n// div11.appendChild(heatmap(matrix,{clusterRows: true, clusterCols: true}))\n\n// return div11\n// }","pinned":true,"hidden":false,"mode":"ojs"},{"id":2925,"value":"_Height and margins are different for all 3 plots_","pinned":false,"hidden":false,"mode":"md"},{"id":2848,"value":"// plot3 = {\n// const div = document.createElement(\"div\")\n\n// div.appendChild(heatmap(matrix,{height:300,width:150,marginTop:100,marginLeft:50}))\n// div.appendChild(heatmap(matrix,{height:300,marginTop:100,marginLeft:100,clusterRows: true}))\n// div.appendChild(heatmap(matrix,{height:300,marginTop:100,marginLeft:100,clusterRows: true, clusterCols: true}))\n// return div\n// }","pinned":false,"hidden":false,"mode":"ojs"},{"id":1611,"value":"### Data for row clustering","pinned":false,"hidden":false,"mode":"md"},{"id":3292,"value":"width = height*1.5","pinned":false,"hidden":false,"mode":"ojs"},{"id":284,"value":"height = 180","pinned":false,"hidden":false,"mode":"ojs"},{"id":48,"value":"matrix = [[3,1,44,5,80,3],[3,1,9,2,9,3],[3,35,70,23,14,3],[10,5,26,8,24,3],[1,27,86,30,140,8],[3,17,6,5,5,8],[3,95,75,7,34,8],[10,27,26,5,24,8],[79,27,86,8,130,8]]//,[50,22,70,2,90,8],[10,3,2,20,5,8],[88,16,88,12,90,8],[8,54,98,18,120,8],[58,90,88,5,99,8],[22,77,4,9,8,8],[11,199,98,5,120,89],[33,90,177,15,150,8],[22,12,43,28,1,40]]","pinned":false,"hidden":false,"mode":"ojs"},{"id":2741,"value":"distMatRow = new Object({\"rowNames\": idx.map(i => dt.rowNames[i]), \"colNames\":idx.map(i => dt.rowNames[i]), \"data\":dist(idx.map(i => matrix[i]), distance.euclidean)})","pinned":false,"hidden":false,"mode":"ojs"},{"id":4351,"value":"distCorMatRow = new Object({\"rowNames\": idx.map(i => dt.rowNames[i]), \"colNames\":idx.map(i => dt.rowNames[i]), \"data\":dist(idx.map(i => matrix[i]), similarity.pearson)})","pinned":true,"hidden":false,"mode":"ojs"},{"id":52,"value":"hclustTree = new hclust.agnes(dist(matrix, distance[\"euclidean\"]), {\n method: \"complete\",\n isDistanceMatrix: true\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1031,"value":"//mutable idx = ''\n idx = {\n const root = d3.hierarchy(hclustTree)\n\n const maxHeight = root.data.height;\n const clusterLayout = d3.cluster().nodeSize([1, width / root.height])\n clusterLayout(root)\n\n return root.leaves().map(x=>x.data.index)//.reverse()\n }","pinned":false,"hidden":false,"mode":"ojs"},{"id":1614,"value":"### Data for column clustering","pinned":false,"hidden":false,"mode":"md"},{"id":2863,"value":"distMatCol = new Object({\"rowNames\": idx2.map(i => dt.colNames[i]), \"colNames\":idx2.map(i => dt.colNames[i]), \"data\":dist(idx2.map(x=>transpose(matrix)[x]), distance.euclidean)})","pinned":true,"hidden":false,"mode":"ojs"},{"id":1275,"value":"hclustTree2 = new hclust.agnes(dist(transpose(matrix), distance.euclidean), {//column clust\n method: \"complete\",\n isDistanceMatrix: true\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1282,"value":" idx2 = {\n const root = d3.hierarchy(hclustTree2)\n const clusterLayout = d3.cluster()\n clusterLayout(root)\n // index of the rows based on cluster hierarchy\n let idx = root.leaves().map(x=>x.data.index)\n return idx\n }","pinned":false,"hidden":false,"mode":"ojs"},{"id":1286,"value":"newMatrix = transpose(idx2.map(i => transpose(idx.map(i => matrix[i]))[i]))","pinned":false,"hidden":false,"mode":"ojs"},{"id":1264,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":30,"value":"## Dendrogram Functions","pinned":false,"hidden":false,"mode":"md"},{"id":4506,"value":" function colElbow(d,maxHeight,marginTop,colNames2Lengths) { // H = width, V = height\n const height = marginTop - ((colNames2Lengths*5.5)+10)\n const path = (\"M\" + d.source.x + \",\" + \n (height-(d.source.data.height / maxHeight) * height) + \n \"H\" + d.target.x + \n \"V\" + (height-(d.target.data.height / maxHeight) * height))\n console.log(\"path\",path)\n return path\n }","pinned":false,"hidden":false,"mode":"ojs"},{"id":4535,"value":" function rowElbow(d,maxHeight,marginLeft,rowNames2Lengths) { // H = width, V = height\n const height = marginLeft - ((rowNames2Lengths*5.5)+10)\n const path = (\"M\" + (height-(d.source.data.height / maxHeight) * height) + \",\" + \n d.source.x + \n \"V\" + d.target.x + \n \"H\" + (height-(d.target.data.height / maxHeight) * height))\n console.log(\"path\",path)\n return path\n }","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"## Heatmap Functions","pinned":false,"hidden":false,"mode":"md"},{"id":4145,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":4445,"value":"// trim label lengths if they are greater than 8 characters\nfunction trimText(idx,arr){\n return idx.map(e => { \n if (arr[e].length>8){\n return arr[e].slice(0,8)\n } else{ return arr[e] }\n })\n }","pinned":false,"hidden":false,"mode":"ojs"},{"id":1559,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":1345,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":1865,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":1102,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":46,"value":"buildData = (matrix) => {\n let array = []\n d3.range(matrix.length).map((d) => {\n const o = d3.range(matrix[0].length).map((t) => ({\n t: t,\n n: d,\n value: matrix[d][t]\n }))\n array = [...array,...o]\n })\n return array\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":26,"value":"color_scale = d3.scaleLinear()\n .domain([0, 100])\n .range(['#fff', '#A3320B'])","pinned":false,"hidden":false,"mode":"ojs"},{"id":2008,"value":"## Correlation Functions","pinned":false,"hidden":false,"mode":"md"},{"id":3056,"value":"rowGraphNodes = networkNodes(rowCorrelation.data, rowCorrelation.rowNames)","pinned":true,"hidden":false,"mode":"ojs"},{"id":3054,"value":"rowGraphLinks = allNetworkLinks(idx.map(x=> dt.data[x]))","pinned":true,"hidden":false,"mode":"ojs"},{"id":3550,"value":"rowNetwork = ForceGraph()(rowNetworkDiv).width(width/2).height(200)","pinned":true,"hidden":false,"mode":"ojs"},{"id":3558,"value":"rowNetwork.graphData( { \n nodes: rowGraphNodes, \n links: rowGraphLinks.filter(d => d.value > corrCoef2)\n }).onNodeDragEnd(node => {\n node.fx = node.x;\n node.fy = node.y;\n }).nodeVal(nodeRadius).d3Force('charge').strength(-0.1)","pinned":true,"hidden":false,"mode":"ojs"},{"id":3061,"value":"colGraphLinks = allNetworkLinks(idx2.map(x=>transpose(dt.data)[x]))","pinned":false,"hidden":false,"mode":"ojs"},{"id":3064,"value":"colGraphNodes = networkNodes(colCorrelation.data, colCorrelation.rowNames)","pinned":false,"hidden":false,"mode":"ojs"},{"id":3575,"value":"colNetwork = ForceGraph()(colNetworkDiv).width(width/2).height(200)","pinned":true,"hidden":false,"mode":"ojs"},{"id":3584,"value":"colNetwork.graphData({ \n nodes: colGraphNodes, \n links: colGraphLinks.filter(d => d.value > corrCoef)\n }).cooldownTicks(1).onNodeDragEnd(node => {\n node.fx = node.x;\n node.fy = node.y;\n\n }).nodeVal(nodeRadius).d3Force('charge').strength(-0.1)","pinned":true,"hidden":false,"mode":"ojs"},{"id":5323,"value":"nodeRadius = 0.5","pinned":true,"hidden":false,"mode":"ojs"},{"id":1858,"value":"// rowCorrelation = new Object({\"rowNames\": idx.map(i => dt.rowNames[i]), \"colNames\":idx.map(i => dt.rowNames[i]), \"data\":corMat.map(y=> corMat.map(x=> corr(y,x)))}) \nrowCorrelation = new Object({\"rowNames\": idx.map(i => dt.rowNames[i]), \"colNames\":idx.map(i => dt.rowNames[i]), \"data\":dist(idx.map(x=> dt.data[x]),similarity.pearson).map(row => row.map(col => Number(col.toFixed(6))))}) ","pinned":false,"hidden":false,"mode":"ojs"},{"id":2851,"value":"// colCorrelation = new Object({\"rowNames\": idx2.map(i => dt.colNames[i]), \"colNames\":idx2.map(i => dt.colNames[i]), \"data\": corMat2.map(y=> corMat2.map(x=> corr(y,x)))})\ncolCorrelation = new Object({\"rowNames\": idx2.map(i => dt.colNames[i]), \"colNames\":idx2.map(i => dt.colNames[i]), \"data\": dist(idx2.map(x=>transpose(dt.data)[x]),similarity.pearson).map(row => row.map(col => Number(col.toFixed(6))))})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1860,"value":"// https://en.wikipedia.org/wiki/Correlation#Sample_correlation_coefficient\nfunction corr(x, y) {\n const n = x.length;\n if (y.length !== n)\n throw new Error(\"The two columns must have the same length.\");\n const x_ = d3.mean(x);\n const y_ = d3.mean(y);\n const XY = d3.sum(x, (_, i) => (x[i] - x_) * (y[i] - y_));\n const XX = d3.sum(x, (d) => (d - x_) ** 2);\n const YY = d3.sum(y, (d) => (d - y_) ** 2);\n return XY / Math.sqrt(XX * YY);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2933,"value":"ForceGraph = require('force-graph@1.43.5/dist/force-graph.min.js')","pinned":false,"hidden":false,"mode":"ojs"},{"id":2938,"value":"function networkNodes(matrix, rownames) {\n let nodes = d3.range(matrix.length).map( (x, idx)=>{\n let obj = {}\n obj[\"id\"] = idx\n obj[\"name\"] = rownames[idx]\n return obj\n })\n return nodes\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2940,"value":"function allNetworkLinks(matrix) {\n let dt = matrix.map( (y,e)=> { let arr = []\n matrix.map((x,i)=>{ \n let obj = {}\n obj[\"source\"] = e//\"sample\"+e\n obj[\"target\"] = i//\"sample\"+i\n obj[\"value\"] = Math.abs(corr(matrix[e],matrix[i]))\n arr.push(obj) \n }) \n return arr\n })\n return dt.flat()\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2025,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":3578,"value":"colNetworkDiv = document.createElement('div')","pinned":true,"hidden":false,"mode":"ojs"},{"id":3567,"value":"rowNetworkDiv = document.createElement('div')","pinned":true,"hidden":false,"mode":"ojs"},{"id":15,"value":"## Imports","pinned":false,"hidden":false,"mode":"md"},{"id":1767,"value":"Plotly = require(\"https://cdn.plot.ly/plotly-latest.min.js\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":999,"value":"// Import the d3-tip library\nd3tip = require('d3-tip')","pinned":false,"hidden":false,"mode":"ojs"},{"id":18,"value":"dist = require(\"https://bundle.run/ml-distance-matrix@2.0.1\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":3235,"value":"(await import(\"https://cdn.skypack.dev/ml-distance@3.0.0?min\"))","pinned":false,"hidden":false,"mode":"ojs"},{"id":1751,"value":"distance = (await import(\"https://cdn.skypack.dev/ml-distance@3.0.0?min\")).distance","pinned":false,"hidden":false,"mode":"ojs"},{"id":3252,"value":"similarity = (await import(\"https://cdn.skypack.dev/ml-distance@3.0.0?min\")).similarity","pinned":false,"hidden":false,"mode":"ojs"},{"id":22,"value":"hclust = (await import(\"https://cdn.skypack.dev/ml-hclust@3.1.0?min\"))","pinned":false,"hidden":false,"mode":"ojs"},{"id":1270,"value":"transpose = m => m[0].map((x,i) => m.map(x => x[i]))","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W37","stdlib":"1","titling":"auto"}