25:["$","title",null,{"children":"Visualization Course Report | Jan Steiger's Workspace | Observable"}] 49:T710,parseGFF = function(gffAttachment){ // Define a function that parses the GFF and returns a dictionary of important information const parsedGff = gffAttachment.text().then( gffText => { const dictionaryGFF = {} const gffEntries = gffText.split("\n") for (const entry of gffEntries) { if (entry.startsWith('#')) { // In this case, we ignore all comments. continue; } // Continue with the data const fields = entry.split('\t'); if (fields.length < 9) { // GFFs should always contain exactly nine columns. // If not, they are invalid. console.error(`The entry %{entry} contains less than 9 columns. Please check the line`) continue; } // Separate each column into one variable const [seqid, source, type, start, end, score, strand, phase, attributes] = fields; if (type === "gene"){ // Parse the attributes field into a key-value object const attributePairs = attributes.split(';'); const attributeObject = {}; for (const pair of attributePairs) { const [key, value] = pair.split('='); if (key && value) { attributeObject[key.trim()] = value.trim(); } } // Create a feature object const feature = { seqid, source, type, start: parseInt(start, 10), end: parseInt(end, 10), score: score === '.' ? null : parseFloat(score), strand, phase: phase === '.' ? null : parseInt(phase, 10), attributes: attributeObject, }; dictionaryGFF[attributeObject["locus_tag"]] = feature } } return dictionaryGFF; } ) return parsedGff }4a:T411,// create same visualization as in Task 1 with the add-on of a color when the nucleotide is part of a gene bases2 = { const svg = d3.create('svg') .attr('height', svgSetting.height) .attr('width', svgSetting.width) var x = d3.scaleLinear() .range([svgSetting.margin.left, svgSetting.width - svgSetting.margin.right]) .domain([0, subsequence.length]) svg.selectAll() .data(subsequence) .enter() .append("rect") .attr("x", function(d, i) { return x(i)}) .attr("y", svgSetting.margin.top) .attr("height", svgSetting.height - svgSetting.margin.top - svgSetting.margin.bottom) .attr("width", svgSetting.width / subsequence.length - 4) .style("fill", function(d) {return isGene[d.position] == 1 ? "yellow" : "white"}) .attr("stroke", "black") svg.selectAll() .data(subsequence) .enter().append("text") .attr("x", function(d, i) { return x(i) + 3}) .attr("y", svgSetting.margin.top + 25) .text(function(d) {return d.base}) return svg.node() }4b:T563,heatmap = { const svg = d3.create('svg') .attr('width', svgSetting2.width) .attr('height', svgSetting2.height) var x = d3.scaleBand() .range([svgSetting2.margin.left, svgSetting2.width - svgSetting2.margin.right]) .domain(Array.from(new Set(exprData.map(x => {return x.Gene})))) svg.append("g") .attr("transform", `translate(0,${svgSetting2.height - svgSetting2.margin.bottom})`) .call(d3.axisBottom(x)) .selectAll("text") .attr("y", -4) .attr("x", 10) .attr("transform", "rotate(90)") .style("text-anchor", "start"); var y = d3.scaleBand() .range([ svgSetting2.height - svgSetting2.margin.bottom, svgSetting2.margin.top ]) .domain(Array.from(new Set(exprData.map(x => {return x.Sample})))) svg.append("g") .attr("transform", `translate(${svgSetting2.margin.left},0)`) .call(d3.axisLeft(y)); let extent = d3.extent(exprData, (d => d.Value)) var myColor = d3.scaleLinear() .range(["blue", "white", "red"]) .domain([extent[0], 0, extent[1]]) svg.selectAll() .data(exprData) .enter() .append("rect") .attr("x", function(d) {return x(d.Gene)}) .attr("y", function(d, i) {return y(d.Sample)}) .attr("width", x.bandwidth() ) .attr("height", y.bandwidth() ) .style("fill", function(d) { return myColor(d.Value)} ) return svg.node() }4c:T57d,function helper_upgma(distanceMatrix, threshold, input_cluster) { // Where in this function could we use the threshold variable to create disjoint clusters? let distMat = structuredClone(distanceMatrix) let clusters = structuredClone(input_cluster) while (clusters.length > 1) { // Find the minimum distance and corresponding clusters const { minDistance, clusterIndices } = findMinDistance(distMat); if (minDistance > threshold){ break } let arrayChildrenCluster1 = clusters[clusterIndices[0]].flat_children let arrayChildrenCluster2 = clusters[clusterIndices[1]].flat_children // Merge the two closest clusters into a new cluster const newCluster = new Cluster( 'Cluster' + clusters.length, clusters[clusterIndices[0]].size + clusters[clusterIndices[1]].size, arrayChildrenCluster1.concat(arrayChildrenCluster2) ); newCluster.addChild(clusters[clusterIndices[0]], minDistance/2); newCluster.addChild(clusters[clusterIndices[1]], minDistance/2); distMat = updateDistanceMatrix(distMat, clusterIndices, clusters) // Remove the merged clusters from the list clusters.splice(clusterIndices[0], 1); clusters.splice(clusterIndices[1] - 1, 1); // Add the new cluster to the list clusters.push(newCluster); } return clusters; }4d:T5b4,chart1 = { const svg = d3.select(DOM.svg(width, height)); const g = svg .attr('width', width - margin.left) .attr('height', height + margin.top + margin.bottom) .append('g') .attr('transform', 'translate(' + margin.left + ', 0)'); g.append('g') .attr('transform', 'translate(0,' + height + ')') .call(d3.axisBottom(x_scale)) .selectAll("text") .style("text-anchor", "end") .attr("dx", "-.8em") .attr("dy", ".15em") .attr("transform", "rotate(-65)"); let heightOfCell = height/(separateByGene(md_data).length + disjointed_clusters.length - 1) let current_height = height for(let i in disjointed_clusters){ console.log(current_height) var newYScale = d3 .scaleBand() .domain(disjointed_clusters[i].flat_children) .range([current_height, current_height - disjointed_clusters[i].flat_children.length * heightOfCell]) g.append('g').call(d3.axisLeft(newYScale)); svg .selectAll() .data(md_data.filter((d) => disjointed_clusters[i].flat_children.includes(d.y))) .enter() .append('rect') .attr('x', d => x_scale(d.x) + margin.left) .attr('y', d => newYScale(d.y)) .attr('width', x_scale.bandwidth() ) .attr('height', heightOfCell ) .attr('fill', d => color_scale(d.value)) current_height -= (heightOfCell + (heightOfCell*disjointed_clusters[i].flat_children.length)) } return svg.node(); }4e:T601,function getNodesAndEdges(edges, links) { const reactionNodes = [] const reactionEdges = [] edges.forEach((edge)=> { // the "edge" array contains reactions, a reaction is a node connected with the educts and products // a graph node is of the form: // {id: id, schemaClass: see reactom scheme (and reactionNode), position: tuple of x- and y- coords} reactionNodes.push({id: edge.id, schemaClass: "reactionNode", position: edge.position}) // an edge is of the follwing shape: {source: ID-source, target: ID-target, type: Type of edge} // TODO: edge.inputs.forEach(input => { reactionEdges.push({source: input.id, target: edge.id, type: 'Input'}) }) edge.outputs.forEach(output => { reactionEdges.push({source: edge.id, target: output.id, type: 'Output'}) }) edge.catalysts?.forEach(catalyst => { reactionEdges.push({source: catalyst.id, target: edge.id, type: 'Catalyst'}) }) } ) // besides the edges links also contains edges to be drawn in the node link diagram // TODO :: links.forEach(link => { reactionEdges.push({source: link.inputs[0].id, target: link.outputs[0].id, type: 'Link'}) }) return {nodes: [...reactionNodes,...dataOrig.nodes], edges: [...reactionEdges] }; }4f:Tfce,// based on example.... chart3 = { // Specify the dimensions of the chart. const width = 800; const height = 800; const radius = 5 // The force simulation mutates links and nodes, so create a copy // so that re-evaluating this cell produces the same result. const links = structuredClone(plotData.links); const nodes = structuredClone(plotData.nodes); // Create a simulation with several forces. const simulation = d3.forceSimulation(nodes).alphaDecay(0.0001) .force('boxing', boxingForce) .force("link", d3.forceLink(links).id(d => d.id).strength(1.5)) .force("charge", d3.forceManyBody().strength(()=>-15).distanceMax(75)) .force("center", d3.forceCenter(width / 2, height / 2)) .force('collision',d3.forceCollide().radius((d) => radius)) .on("tick", ticked); function blockNodeCoordinates( radius, node, svgSize ) { // This code is for keeping the nodes within the svg canvas. // The node.x and node.y variables are set to be within the bounds of the svg canvas +/- the radius of the node. // todo: bounding force if(node.x > svgSize.width - radius){ node.x = svgSize.width - radius } if(node.x < radius){ node.x = radius } if(node.y > svgSize.height - radius){ node.y = svgSize.height - radius } if(node.y < radius){ node.y = radius } return node; } function boxingForce() { nodes.forEach((node) => { node = blockNodeCoordinates(2*radius, node, {width: width, height: height}); }); } // Create the SVG container. const svg = d3.create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, width, height]) .attr("style", "width:auto; max-width:100%; background-color: #f0f0f0"); // Add a line for each link, and a circle for each node. // TODO: add lines const link = svg.append("g") .attr("stroke", "black") .selectAll() .data(links) .join("line") const node = svg.append("g") .attr("stroke", "#000") .attr("stroke-width", 1) .selectAll() .data(nodes) .join("circle") .attr("r", radius) .attr("fill", d => colorScaleNodes(d.schemaClass)) //TODO; // Set the position attributes of links and nodes each time the simulation ticks. function ticked() { // set the position of the links 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); } // add a title to the nodes (titles are the most basic mouseover element for svgs) //todo: node.append("title") .text(d => d.displayName) // BELOW YOU DO NOT NEED TO CHANGE OR ADD ANYTHING! Feel free however to check the code if you can understand what is happening! // Add a drag behavior. node.call(d3.drag() .on("start", dragstarted) .on("drag", dragged) .on("end", dragended)); // Reheat the simulation when drag starts, and fix the subject position. function dragstarted(event) { if (!event.active) simulation.alphaTarget(0.3).restart(); event.subject.fx = event.subject.x; event.subject.fy = event.subject.y; } // Update the subject (dragged node) position during drag. function dragged(event) { event.subject.fx = event.x; event.subject.fy = event.y; } // Restore the target alpha so the simulation cools after dragging ends. // Unfix the subject position now that it’s no longer being dragged. function dragended(event) { if (!event.active) simulation.alphaTarget(0); event.subject.fx = null; event.subject.fy = null; } // When this cell is re-run, stop the previous simulation. (This doesn’t // really matter since the target alpha is zero and the simulation will // stop naturally, but it’s a good practice.) invalidation.then(() => simulation.stop()); return svg.node(); }50:T51a,reactomeLayoutChart = { // Specify the dimensions of the chart. const width = 3500; const height = 1653; const radius = 10 // Create the SVG container. const svg = d3.create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, width, height]) .attr("style", "height: auto; width:auto; max-width:100%; background-color: #f0f0f0"); // Add a line for each link, and a circle for each node. const link = svg.append("g") .attr("stroke", "#555") .selectAll() .data(plotData.links) .join("line") .attr("x1", d=> plotData.nodes.find((node) => node.id == d.source)?.position.x) .attr("x2", d=> plotData.nodes.find((node) => node.id == d.target)?.position.x) .attr("y1", d=> plotData.nodes.find((node) => node.id == d.source)?.position.y) .attr("y2", d=> plotData.nodes.find((node) => node.id == d.target)?.position.y) const node = svg.append("g") .attr("stroke", "#000") .attr("stroke-width", 1) .selectAll() .data(plotData.nodes) .join("circle") .attr("r", radius) .attr("fill", d => colorScaleNodes(d.schemaClass)) .attr("cx", d=>d.position.x) .attr("cy", d=>d.position.y) node.append("title") .text(d => d.displayName) return svg.node(); }51:[{"id":"690d1545f234adc624e70ac9399b9fc30b91ff18ddb29af5ea339a5982d7d112dfab23d9d1eeeef2b23dc7b320b274df9033273ed96a2cf31af7fd5d6c21731c","href":"https://static.observableusercontent.com/files/690d1545f234adc624e70ac9399b9fc30b91ff18ddb29af5ea339a5982d7d112dfab23d9d1eeeef2b23dc7b320b274df9033273ed96a2cf31af7fd5d6c21731c","name":"GCF_000005845.2_ASM584v2_genomic.fna","type":"application/octet-stream","lastModified":1695854491729.821,"size":4699745},{"id":"9b25790963d2627976cb1dc3c9aaa3b42e3421ed87e73698fdfca91daa21a8d7c68ab694e3d291bc8947e8ba0fb6549bb515b747e7215c86870df0c31a4c2769","href":"https://static.observableusercontent.com/files/9b25790963d2627976cb1dc3c9aaa3b42e3421ed87e73698fdfca91daa21a8d7c68ab694e3d291bc8947e8ba0fb6549bb515b747e7215c86870df0c31a4c2769","name":"genomic.gff","type":"application/octet-stream","lastModified":1695854491729.821,"size":2651503},{"id":"eea2d209cc5c3d9fa279f37e5124bec588f88b1de504b2b89327a282a4b7f6ae7ab1767737b6b30fb125f860c62868ecd39be5c90b06a4cf77256902a7b61e03","href":"https://static.observableusercontent.com/files/eea2d209cc5c3d9fa279f37e5124bec588f88b1de504b2b89327a282a4b7f6ae7ab1767737b6b30fb125f860c62868ecd39be5c90b06a4cf77256902a7b61e03","name":"hm_cot.csv","type":"text/csv","lastModified":1695854491729.821,"size":3755},{"id":"fb3423f91270c648fade5563b88f5711d7f8a882818f4cd8a65386fdb501de2716ca45b1dc3e8d8307b7024d7f53aa7b5231ded73c2cd08ac89a6ab784bce870","href":"https://static.observableusercontent.com/files/fb3423f91270c648fade5563b88f5711d7f8a882818f4cd8a65386fdb501de2716ca45b1dc3e8d8307b7024d7f53aa7b5231ded73c2cd08ac89a6ab784bce870","name":"znormalized_counts-5.txt","type":"text/plain","lastModified":1695854491729.821,"size":24197},{"id":"cca9dc80c8dbf355359ca3658d4b0831f1df8c939443f410c296f5f1d76f21b7a5f85a8c3879b97f213019f1179c397b0e4bce4a5df2a4fa0aac7ee668deb930","href":"https://static.observableusercontent.com/files/cca9dc80c8dbf355359ca3658d4b0831f1df8c939443f410c296f5f1d76f21b7a5f85a8c3879b97f213019f1179c397b0e4bce4a5df2a4fa0aac7ee668deb930","name":"znormalized_counts_subset.txt","type":"text/plain","lastModified":1695854491729.821,"size":1486}] 29:{"id":"a0bdaed7e76f12bb","slug":null,"title":"Visualization Course Report","thumbnail":"a45308a5b53d499c02c3af15c3f634b0e5b90ef9d43eed59b7c8d0e12968bfe3","access_level":"public","create_time":"$D2023-09-27T22:41:31.729Z","update_time":"$D2023-09-27T22:54:55.866Z","view_time":null,"first_public_time":"$D2023-09-27T22:41:31.729Z","has_unpublished_edits":null,"fork":{"id":"f14fe47a6b287d36","slug":null,"title":"Visualization Course Report","owner":{"id":"579e4a3ecfd6445a","login":"jan-steiger-ws","name":"Jan Steiger's Workspace"}},"stars":0,"starred":false,"owner":{"type":"team","id":"579e4a3ecfd6445a","login":"jan-steiger-ws","name":"Jan Steiger's Workspace","avatar_url":"https://avatars-next.observableusercontent.com/e289c1348c2a50a979f82ce09fb0728794515051025dff88545f3b1b5ab1a036","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":495,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"6bc7c170bdf2fae1","login":"jan-steiger","name":"Jan Steiger","avatar_url":"https://avatars-next.observableusercontent.com/31f742fdf3b4c65d246d52e6470cd42345a094a64b96e91118280af1028973e0","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"6bc7c170bdf2fae1","login":"jan-steiger","name":"Jan Steiger","avatar_url":"https://avatars-next.observableusercontent.com/31f742fdf3b4c65d246d52e6470cd42345a094a64b96e91118280af1028973e0","tier":null,"role":"editor"},{"type":"team","id":"579e4a3ecfd6445a","login":"jan-steiger-ws","name":"Jan Steiger's Workspace","avatar_url":"https://avatars-next.observableusercontent.com/e289c1348c2a50a979f82ce09fb0728794515051025dff88545f3b1b5ab1a036","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":"Visualization Course Report","cells":[{"id":0,"value":"# Visualization Course Report\n### Jan Steiger","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":10,"value":"## Chapter 1 - Intro","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":426,"value":"Draw a Line with a negative slope, triforce and pseudo-bubblechart","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":428,"value":"//draw the line here\nlineSvg = {\n const svg = d3.create('svg')\n .attr('width', 100)\n .attr('height', 100)\n\n svg.append('line')\n .attr('x1', 0)\n .attr('x2', 100)\n .attr('y1', 0)\n .attr('y2', 100)\n .attr('stroke', 'black')\n\n return svg.node()\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":430,"value":"//Draw here\ntriforce = {\n const svg = d3.create('svg')\n .attr('width', 120)\n .attr('height', 100)\n\n const polygonNodes = [\n {x: 0, y: 100},\n {x: 60, y: 0},\n {x: 120, y:100}\n ]\n const polygonNodes2 = [\n {x: 31, y: 50},\n {x: 60, y: 100},\n {x: 89, y: 50}\n ]\n\n const line = d3.line()\n .x(d => d.x)\n .y(d => d.y)\n .curve(d3.curveLinearClosed);\n \n svg.append(\"path\")\n .attr(\"d\", line(polygonNodes))\n .attr(\"stroke\", \"gold\")\n .attr(\"stroke-width\", 2)\n .attr(\"fill\", \"yellow\");\n\n svg.append(\"path\")\n .attr(\"d\", line(polygonNodes2))\n .attr(\"stroke\", \"gold\")\n .attr(\"stroke-width\", 2)\n .attr(\"fill\", \"white\");\n\n return svg.node()\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":432,"value":"circleArray = [\n {r: 5, x: 15, y: 9, color: \"springGreen\"},\n {r: 12, x: 60, y: 16, color: \"lightSkyBlue\"},\n {r: 7, x: 30, y: 68, color: \"fuchsia\"},\n {r: 14, x: 15, y: 120, color: \"coral\"},\n {r: 15, x: 87, y: 100, color: \"orange\"},\n {r: 3, x: 13, y: 27, color: \"teal\"}\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":434,"value":"// add the bubbles here\nbubbles = {\n const svg = d3.create('svg')\n .attr('width', 200)\n .attr('height', 150)\n\n svg.selectAll('circle')\n .data(circleArray)\n .join('circle')\n .attr('fill', d => d.color)\n .attr('cx', d => d.x)\n .attr('cy', d => d.y)\n .attr('r', d => d.r) \n \n return svg.node()\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":103,"value":"## Chapter 2 - Genomics and Transcriptomics","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":109,"value":"### Task 1\nUse the genome from base 150 to 200 \n\nVisualize the bases as squares on an axis with the corresponding letter (A, T, C, G) in a box","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":112,"value":"parseFASTA = function(fastaAttachment){\n // Define a function that parses the GFF and returns a dictionary of important information\n const parsedFasta = fastaAttachment.text().then( fastaText => {\n const listFasta = []\n const fastaEntries = fastaText.split(\"\\n\")\n for (const entry of fastaEntries) {\n if (entry.startsWith('>')) {\n // In this case, we ignore all comments.\n continue;\n }\n \n // Continue with the data\n \n listFasta.push(entry)\n }\n return listFasta.join(\"\");\n })\n return parsedFasta\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":115,"value":"fasta_file = FileAttachment(\"GCF_000005845.2_ASM584v2_genomic.fna\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":118,"value":"sequence_long = parseFASTA(fasta_file)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":121,"value":"subsequence = {\n let temp = []\n for(let i = 150; i < 200; i++){\n temp.push({position: i, base: sequence_long[i]})\n }\n return temp\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":125,"value":"svgSetting = {\n return {width : 1100,\n height : 100,\n margin : {top: 30, right: 30, bottom: 30, left: 30}}\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":123,"value":"bases = {\n const svg = d3.create('svg')\n .attr('height', svgSetting.height)\n .attr('width', svgSetting.width)\n\n var x = d3.scaleLinear()\n .range([svgSetting.margin.left, svgSetting.width - svgSetting.margin.right])\n .domain([0, subsequence.length])\n \n svg.selectAll()\n .data(subsequence)\n .enter()\n .append(\"rect\")\n .attr(\"x\", function(d, i) { return x(i)})\n .attr(\"y\", svgSetting.margin.top)\n .attr(\"height\", svgSetting.height - svgSetting.margin.top - svgSetting.margin.bottom)\n .attr(\"width\", svgSetting.width / subsequence.length - 4)\n .style(\"fill\", \"white\")\n .attr(\"stroke\", \"black\")\n\n svg.selectAll()\n .data(subsequence)\n .enter().append(\"text\")\n .attr(\"x\", function(d, i) { return x(i) + 3})\n .attr(\"y\", svgSetting.margin.top + 25)\n .text(function(d) {return d.base})\n \n return svg.node()\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":128,"value":"### Task 2\nAdditionally, mark bases that correspond to a gene with a specific color. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":131,"value":"$49","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":136,"value":"gff_file = FileAttachment(\"genomic.gff\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":134,"value":"gff = parseGFF(gff_file)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":140,"value":"// specifiy wether a base at a specific position is in a gene or not\n// for example can be done with array 0/1\nisGene = {\n let temp = []\n let tempSwitch = 0\n for(let i = 0; i < 500; i++){\n if(Object.values(gff).map(innerObj => {return innerObj.start}).includes(i)){\n tempSwitch = 1\n }\n if(Object.values(gff).map(innerObj => {return innerObj.end}).includes(i)){\n tempSwitch = 0\n }\n temp.push(tempSwitch)\n }\n return temp\n}\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":142,"value":"$4a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":144,"value":"### Task 3 - Create Heatmap\nOne part of transcriptomic visualization is to analyze the expression level of different genes in different samples. One possible visualization technique used is a heatmap. Here we want to create a heatmap step-by-step.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":148,"value":"// load data\ndata = d3.csvParse(\n await FileAttachment(\"hm_cot.csv\").text(),\n d3.autoType\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":155,"value":"// format data to an array of objects, each object containing the gene name, the sample name and the value of one expression\nexprData = {\n let array = []\n for(let i in data){\n if(data[i].Gene !== undefined){\n array.push({Gene: data[i].Gene, Sample: 'A', Value: data[i].A})\n array.push({Gene: data[i].Gene, Sample: 'B', Value: data[i].B})\n array.push({Gene: data[i].Gene, Sample: 'C', Value: data[i].C})\n array.push({Gene: data[i].Gene, Sample: 'D', Value: data[i].D})\n array.push({Gene: data[i].Gene, Sample: 'E', Value: data[i].E})\n array.push({Gene: data[i].Gene, Sample: 'F', Value: data[i].F})\n }\n }\n return array\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":166,"value":"svgSetting2 = {\n return {width : 800,\n height : 450,\n margin : {top: 30, right: 30, bottom: 70, left: 30}}\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":169,"value":"$4b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":214,"value":"## Chapter 3 - Multidimensional Data","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":481,"value":"Create a clustered heatmap","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":225,"value":"input_counts = FileAttachment(\"znormalized_counts-5.txt\").text()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":228,"value":"subset_counts = FileAttachment(\"znormalized_counts_subset.txt\").text()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":232,"value":"znormalized_counts = d3.csvParse(input_counts)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":239,"value":"md_data = {\n let tempData = []\n for (let datum of znormalized_counts){\n for (let sample of Object.keys(datum)) {\n if (sample === \"Geneid\")\n continue\n tempData.push({y: datum.Geneid, x: sample, value: parseFloat(datum[sample])})\n }\n }\n return tempData\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":242,"value":"wide_data = {\n let temp = []\n for(let i in data){\n temp.push([data[i].x, data[i].y, data[i].value])\n }\n return temp\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":247,"value":"samples = Object.keys(znormalized_counts[0]).filter(d => \"Geneid\" !== d)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":249,"value":"x_scale = d3\n .scaleBand()\n .domain(samples)\n .range([0, width - margin.right])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":253,"value":"y_scale = d3\n .scaleBand()\n .domain(genes)\n .range([height, 0])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":251,"value":"genes = new Set(znormalized_counts.map(d => d.Geneid))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":255,"value":"margin = ({ top: 10, left: 150, right: 40, bottom: 50 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":257,"value":"height = 1000","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":265,"value":"color_scale = d3.scaleDiverging()\n .domain([extent[0],0 , extent[1]])\n .interpolator(d3.interpolateRdBu)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":259,"value":"extent = d3.extent(md_data.map(d=> d.value))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":263,"value":"chart = {\n const svg = d3.select(DOM.svg(width, height));\n const g = svg\n .attr('width', width - margin.left)\n .attr('height', height + margin.top + margin.bottom)\n .append('g')\n .attr('transform', 'translate(' + margin.left + ', 0)');\n\n g.append('g')\n .attr('transform', 'translate(0,' + height + ')')\n .call(d3.axisBottom(x_scale))\n .selectAll(\"text\")\n .style(\"text-anchor\", \"end\")\n .attr(\"dx\", \"-.8em\")\n .attr(\"dy\", \".15em\")\n .attr(\"transform\", \"rotate(-65)\");\n \n g.append('g').call(d3.axisLeft(y_scale));\n\n svg\n .selectAll()\n .data(md_data)\n .enter()\n .append('rect')\n .attr('x', d => x_scale(d.x) + margin.left)\n .attr('y', d => y_scale(d.y))\n .attr('width', x_scale.bandwidth() )\n .attr('height', y_scale.bandwidth() )\n .attr('fill', d => color_scale(d.value));\n\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":272,"value":"### Tasks: \nCluster the genes and include separations in the visualization","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":276,"value":"// Define the Cluster class\n class Cluster {\n constructor(label, size, members, data) {\n this.label = label;\n this.size = size;\n this.flat_children = members\n this.children = [];\n this.data_cluster = data\n this.distance_parent = 0\n }\n\n addChild(child, distance) {\n this.children.push(child);\n child.distance_parent = distance\n }\n }\n\n ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":279,"value":"function upgma(data, threshold) {\n // Initialize clusters with individual data points\n const clusters = data.map((item, index) => new Cluster(item[0], 1, [item[0]], item[1]));\n // Calculate the pairwise distance matrix\n const distanceMatrix = calculateDistanceMatrix(clusters);\n // Run UPGMA on the given distance matrix\n return helper_upgma(distanceMatrix, threshold, clusters)\n }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":281,"value":"$4c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":283,"value":"function updateDistanceMatrix(matrix, clusterIndices, clusters) {\n const [index1, index2] = clusterIndices;\n let clusterA = clusters[index1] \n let clusterB = clusters[index2] \n let last_row = []\n const newMatrix = [];\n let neededIndices = [...Array(matrix.length).keys()].filter(d => !clusterIndices.includes(d))\n for (let i = 0; i < neededIndices.length; i++) {\n newMatrix[i] = [];\n for (let j = 0; j < neededIndices.length; j++) {\n if (i === j) {\n newMatrix[i].push(0);\n } else {\n newMatrix[i].push(matrix[neededIndices[i]][neededIndices[j]]);\n }\n }\n let clustAtoI = matrix[neededIndices[i]][index1]\n let clustBtoI = matrix[neededIndices[i]][index2]\n let dist = (clusterA.size * clustAtoI + clusterB.size * clustBtoI) / (clusterA.size + clusterB.size)\n newMatrix[i].push(dist)\n last_row.push(dist)\n }\n last_row.push(0)\n newMatrix.push(last_row)\nreturn newMatrix \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":285,"value":" function findMinDistance(matrix) {\n let minDistance = Infinity;\n let clusterIndices = [-1, -1];\n for (let i = 0; i < matrix.length; i++) {\n for (let j = i + 1; j < matrix[i].length; j++) {\n if (matrix[i][j] < minDistance) {\n minDistance = matrix[i][j];\n clusterIndices = [i, j];\n }\n }\n }\n return { minDistance, clusterIndices };\n }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":289,"value":" function calculateDistanceMatrix(clusters) {\n const distanceMatrix = [];\n for (let i = 0; i < clusters.length; i++) {\n distanceMatrix[i] = [];\n for (let j = 0; j < clusters.length; j++) {\n if (i === j) {\n distanceMatrix[i][j] = 0;\n } else {\n // Replace this with your distance calculation logic (e.g., Euclidean distance)\n distanceMatrix[i][j] = euclideanDistance(clusters[i].data_cluster, clusters[j].data_cluster);\n }\n }\n }\n return distanceMatrix;\n }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":291,"value":"function spearmanCorrelationDistance(arr1, arr2) {\n if (arr1.length !== arr2.length) {\n throw new Error(\"Input arrays must have the same length\");\n }\n\n const n = arr1.length;\n\n // Create rank arrays for both input arrays\n const rank1 = rankArray(arr1);\n const rank2 = rankArray(arr2);\n\n // Calculate the differences between the ranks\n const rankDiffSquared = rank1.map((r1, i) => Math.pow(r1 - rank2[i], 2));\n\n // Calculate Spearman's rank correlation coefficient\n const rho = 1 - (\n (6 * rankDiffSquared.reduce((sum, diffSquared) => sum + diffSquared, 0)) /\n (n * (n * n - 1)\n ));\n\n // The correlation distance is defined as 1 - Spearman's rank correlation coefficient\n const correlationDistance =1 - Math.abs(rho);\n\n return correlationDistance;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":293,"value":"function euclideanDistance(arr1, arr2) {\n if (arr1.length !== arr2.length) {\n throw new Error(\"Both arrays must have the same length.\");\n }\n\n let sumOfSquares = 0;\n\n for (let i = 0; i < arr1.length; i++) {\n const diff = arr1[i] - arr2[i];\n sumOfSquares += diff * diff;\n }\n\n return Math.sqrt(sumOfSquares);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":295,"value":"function rankArray(arr) {\n // Create an array of indices and sort it based on the values in the input array\n const indices = [...arr.keys()];\n indices.sort((a, b) => arr[a] - arr[b]);\n\n // Create a rank array based on the sorted indices\n const rank = new Array(arr.length);\n for (let i = 0; i < indices.length; i++) {\n rank[indices[i]] = i + 1;\n }\n\n return rank;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":299,"value":"function separateByGene(data){\n const perGene = {};\n for (let datum of data) {\n if (Object.keys(perGene).includes(datum.y)){\n perGene[datum.y].push(datum.value)\n }\n else {\n perGene[datum.y] = [datum.value]\n }\n }\n return Object.entries(perGene)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":301,"value":"upgma_data = {\n return upgma(separateByGene(md_data))\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":303,"value":"disjointed_clusters = {\n return upgma(separateByGene(md_data), 20)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":305,"value":"$4d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":332,"value":"## Chapter 4 - Metabolic Networks","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":335,"value":"Use a node-link diagram to model a metabolic network","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":337,"value":"dataOrig = fetch(\"https://reactome.org/download/current/diagram/187037.json\").then((response) => response.json())","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":341,"value":"$4e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":343,"value":"plotData = {\n const {nodes, edges} = getNodesAndEdges(dataOrig.edges, dataOrig.links)\n return {nodes: nodes, links: edges}\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":347,"value":"schemaClasses = {\n let temp = []\n plotData.nodes.forEach(node => {\n if (!temp.includes(node.schemaClass)){\n temp.push(node.schemaClass)\n }\n })\n return temp\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":353,"value":"colorScaleNodes = d3.scaleOrdinal().domain(schemaClasses).range(d3.schemePastel2)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":356,"value":"### Force Layout Node-Link diagram\nWe then go ahead and draw the node link diagram using a force layout.\nThe nodes are represented by circles and the edges are represented by lines.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":358,"value":"Swatches(colorScaleNodes)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":367,"value":"$4f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":376,"value":"### Manually curated layout from Reactome","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":378,"value":"Swatches(colorScaleNodes)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":381,"value":"$50","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":360,"value":"import {Swatches} from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":363,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"}],"files":"$W51","stdlib":"1"}} 24:null