2e:null 2f:["$","title",null,{"children":"McCGR: Mutational Context - Chaos Game Representation | Jeya Balaji Balasubramanian | Observable"}] 34:T1ce5,function plotMutationalContextCgr(data, { height = 2000, // height of SVG (in pixels). width = height * 2, // width of SVG (in pixels). markerSize = 1, dataCgrColumns = ["coords5Cgr", "coords3Cgr"], titles = ["5' - CGR", "3' - CGR"], setColor = false, colorColumn, colorCategories, colorScheme, // instead of z, pass an annotation accessor + scale + color scheme } = {}) { // Margins and dimensions of graph elements const numCgrs = 2; const fracTitle = 5/100; const fracMargin = 7.5/100; const fracPadding = 5/100; const heightTitle = height * fracTitle; const margin = ({ top: height * fracMargin, bottom: height * fracMargin, left: (width * fracMargin) / numCgrs, right: (width * fracMargin) / numCgrs, }); const padding = (width * fracPadding) / numCgrs; // Dimensions of each CGR plot const cgrHeight = height - heightTitle - margin.top - margin.bottom; const cgrWidth = (width - numCgrs * (margin.left + margin.right + padding)) / numCgrs; const cgrWindowWidth = margin.left + cgrWidth + margin.right + padding; // Other styling arguments const titleSize = heightTitle * 4/5; const cornerTextSize = margin.left * 1/2; const strokeScale = 1/500; const strokeWidth = cgrWindowWidth * strokeScale; const markerStrokeWidth = cgrWindowWidth * strokeScale * markerSize; const tickScale = 1/10; const maxZoom = 7 // Scales const x = dataCgrColumns.map(_ => d3.scaleLinear().range([0, cgrWidth])); const y = dataCgrColumns.map(_ => d3.scaleLinear().range([cgrHeight, 0])); const z = d3.scaleOrdinal().domain(colorCategories).range(colorScheme); // SVG canvas let svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]); svg.append("rect") .attr("fill", "#ffffff") .attr("x", 0) .attr("y", 0) .attr("width", width) .attr("height", height); // Containers for each CGR const gCgrs = svg.append("g") .selectAll("g") .data(dataCgrColumns) .join("g") .attr("transform", (_, i) => `translate(${i*cgrWindowWidth},0)`) .attr("id", (d, _) => d); // Title of each CGR gCgrs.each(function(_, i) { d3.select(this) .append("g") .attr("transform", `translate(${padding/2 + margin.left},0)`) .append("text") .attr("x", cgrWidth * 2/5) .attr("y", heightTitle * 2/3) .text(titles[i]) .style("font", `bold ${titleSize}px sans-serif`) }); // Write nucleotides in the corners of each CGR const nucleotides = { topLeft: "A", topRight: "C", bottomLeft: "G", bottomRight: "T", }; gCgrs.append("g") .style("font", `bold ${cornerTextSize}px sans-serif`) .attr("transform", `translate(${padding/2},${heightTitle})`) .call(writeTextCorner, margin.left * 1/3, margin.top * 2/3, nucleotides.topLeft) .call(writeTextCorner, margin.left + cgrWidth + margin.right * 1/3, margin.top * 2/3, nucleotides.topRight) .call(writeTextCorner, margin.left * 1/3, margin.top + cgrHeight + margin.bottom * 2/3, nucleotides.bottomLeft) .call(writeTextCorner, margin.left + cgrWidth + margin.right * 1/3, margin.top + cgrHeight + margin.bottom * 2/3, nucleotides.bottomRight); // Scatter plot // White background to listen for zoom/pan events gCgrs.append("rect") .attr("fill", "#ffffff") .attr("x", padding/2 + margin.left) .attr("y", heightTitle + margin.top) .attr("width", cgrWidth) .attr("height", cgrHeight); gCgrs.each(function(col, i) { // Clip path d3.select(this).append("defs") .append("clipPath") .attr("id", `clip${i}`) .append("rect") .attr("width", cgrWidth) .attr("height", cgrHeight); // Axes d3.select(this).append("g") .attr("id", "topAxis") .attr("transform", `translate(${(padding/2 + margin.left)},${heightTitle + margin.top})`); d3.select(this).append("g") .attr("id", "bottomAxis") .attr("transform", `translate(${(padding/2 + margin.left)},${heightTitle + margin.top + cgrHeight})`); d3.select(this).append("g") .attr("id", "leftAxis") .attr("transform", `translate(${(padding/2 + margin.left)},${heightTitle + margin.top})`); d3.select(this).append("g") .attr("id", "rightAxis") .attr("transform", `translate(${(padding/2 + margin.left + cgrWidth)},${heightTitle + margin.top})`); // Grid d3.select(this).append("g") .attr("id", "grid") .attr("stroke-width", strokeWidth) .attr("transform", `translate(${(padding/2 + margin.left)},${heightTitle + margin.top})`) .attr("clip-path", `url(#clip${i})`); // Chart points d3.select(this).append("g") .attr("id", "scatter") .attr("transform", `translate(${padding/2 + margin.left},${heightTitle + margin.top})`) .attr("clip-path", `url(#clip${i})`) .selectAll("circle") .data(data) .join("circle") .attr("cx", d => x[i](d[col][0])) .attr("cy", d => y[i](d[col][1])); }); const allCircles = gCgrs.selectAll("circle") .attr("r", markerStrokeWidth/2) .attr("fill", d => setColor ? z(d[colorColumn]) : "black"); let zoomedX = x.map(d => d.copy()); let zoomedY = y.map(d => d.copy()); // Zoom + pan behavior const zoom = d3.zoom() .scaleExtent([0.5, maxZoom]) .filter((event) => !event.shiftKey) .on("zoom", zoomed); function zoomed(event, cgrName) { const i = dataCgrColumns.indexOf(cgrName); const transform = event.transform; zoomedX[i] = transform.rescaleX(x[i]); zoomedY[i] = transform.rescaleY(y[i]); // Clearing brush by invoking a click d3.select(this).select("#scatter").dispatch("click"); // Update the scatter plot d3.select(this) .select("#scatter") .selectAll("circle") .attr("transform", transform) .attr("r", (markerStrokeWidth/2) / transform.k); // Update the axes d3.select(this) .select("#topAxis") .call(xAxisTop, zoomedX[i], transform.k, maxZoom, margin, strokeWidth, tickScale); d3.select(this) .select("#bottomAxis") .call(xAxisBottom, zoomedX[i], transform.k, maxZoom, margin, strokeWidth, tickScale); d3.select(this) .select("#leftAxis") .call(yAxisLeft, zoomedY[i], transform.k, maxZoom, margin, strokeWidth, tickScale); d3.select(this) .select("#rightAxis") .call(yAxisRight, zoomedY[i], transform.k, maxZoom, margin, strokeWidth, tickScale); // Update the grid d3.select(this) .select("#grid") .call(grid, zoomedX[i], zoomedY[i], transform.k, cgrWidth, cgrHeight); } gCgrs.call(zoom).call(zoom.transform, d3.zoomIdentity); // Brushing behavior svg.append("style") .text(`circle.hidden { fill: #000; fill-opacity: 0.1; r: ${(markerStrokeWidth/2) / 3}}; }`); gCgrs.select("#scatter") .call(brush, svg, allCircles, dataCgrColumns, zoomedX, zoomedY, padding, margin, heightTitle, cgrWidth, cgrHeight); svg.property("value", []); function reset() { gCgrs.transition() .duration(500) .call(zoom.transform, d3.zoomIdentity); } return Object.assign(svg.node(), { zoomReset: reset }); }35:T625,function brush(cgr, svg, allCircles, dataCgrColumns, x, y, padding, margin, heightTitle, cgrWidth, cgrHeight) { const brush = d3.brush() .extent([[0, 0], [cgrWidth, cgrHeight]]) .filter((event) => event.shiftKey) .keyModifiers(false) .on("start", brushstarted) .on("brush", brushed) .on("end", brushended); cgr.call(brush) .on("click", clearBrush); function clearBrush() { cgr.call(brush.move, null); } // Clear the brushing in the previously-active CGR, if any. let prevCgr; function brushstarted() { if (prevCgr !== this) { d3.select(prevCgr) .call(brush.move, null); prevCgr = this; } } // Highlight selected circles function brushed({selection}, cgrName) { const i = dataCgrColumns.indexOf(cgrName); let selected = []; if (selection) { const [[x0, y0], [x1, y1]] = selection; allCircles.classed( "hidden", d => x0 > x[i](d[cgrName][0]) || x1 < x[i](d[cgrName][0]) || y0 > y[i](d[cgrName][1]) || y1 < y[i](d[cgrName][1]) ); selected = data.filter( d => x0 < x[i](d[cgrName][0]) && x1 > x[i](d[cgrName][0]) && y0 < y[i](d[cgrName][1]) && y1 > y[i](d[cgrName][1]) ); } svg.property("value", selected).dispatch("input"); } // If the brush is empty, select all circles. function brushended({selection}) { if (selection) return; svg.property("value", []).dispatch("input"); allCircles.classed("hidden", false); } }36:T60a,async function preprocessIcgcDataForMcCgr(data) { const purines = ["A", "G"]; const complement_seq = { A: "T", C: "G", T: "A", G: "C" }; let cgrPromises = []; progress.value = 0; for (let [i, row] of data.entries()) { // if chr MT is present, relabel as M if (row["chromosome"] === "MT") { row["chromosome"] = "M"; } // annotating COSMIC SBS mutation type const mutationFromTo = row["mutation"].split(">"); if ((row["type"] === "single base substitution") && (purines.includes(mutationFromTo[0]))) { row["cosmicSbsType"] = `${complement_seq[mutationFromTo[0]]}>${complement_seq[mutationFromTo[1]]}`; } else { row["cosmicSbsType"] = row["mutation"]; } // get the 5'- and 3'-CGR coordinates of the mutation context bases in the reference genome if (row["type"].includes("insertion")) { cgrPromises.push( getCgrCoordPromisesFromReferenceGenome((row["chromosome"], row["start"] - 1, row["end"])) ); } else { cgrPromises.push( getCgrCoordPromisesFromReferenceGenome(row["chromosome"], row["start"] - 1, row["end"] + 1) ); } if (i % 50 === 0) { await Promise.all(cgrPromises); } progress.value = (i/data.length)*100; } await Promise.all(cgrPromises); progress.value = 100; for (let i = 0; i < data.length; i++) { const coords = await getCoordsFromCgrPromise(cgrPromises[i]) data[i]["coords5Cgr"] = coords[0]; data[i]["coords3Cgr"] = coords[1]; } return data; }37:[] 32:{"id":"c12c50010e5729fe","slug":"mutational-context-chaos-game-representation","title":"McCGR: Mutational Context - Chaos Game Representation","thumbnail":"ef664ae7bc87615028be1668aa3fa5834c96474e7ff5c89ef33c1fae5dd4537d","access_level":"public","create_time":"$D2022-04-24T01:33:50.366Z","update_time":"$D2022-05-16T11:04:23.990Z","view_time":null,"first_public_time":"$D2022-05-11T11:37:36.199Z","fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"7c99fef7c866716c","login":"jeyabbalas","name":"Jeya Balaji Balasubramanian","avatar_url":"https://avatars-next.observableusercontent.com/80f51d00c7e14ae878fca50bb97e3d82c91a9c13d88c71a3bd41f878c83c135e","tier":"starter_2024"},"version":1740,"publish_version":1740,"role":null,"authored":false,"authors":[{"type":"individual","id":"352a9430837886b4","login":"jeyabbalas","name":"Jeya Balaji Balasubramanian","avatar_url":"https://avatars-next.observableusercontent.com/80f51d00c7e14ae878fca50bb97e3d82c91a9c13d88c71a3bd41f878c83c135e","tier":null}],"members":[{"type":"individual","id":"352a9430837886b4","login":"jeyabbalas","name":"Jeya Balaji Balasubramanian","avatar_url":"https://avatars-next.observableusercontent.com/80f51d00c7e14ae878fca50bb97e3d82c91a9c13d88c71a3bd41f878c83c135e","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"McCGR: Mutational Context - Chaos Game Representation","cells":[{"id":0,"value":"# McCGR: Mutational Context - Chaos Game Representation","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1700,"value":"## Prepare ICGC Data","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1659,"value":"viewof icgcDonorId = Inputs.text({label: \"Enter an ICGC Donor ID: \", \n placeholder: \"ICGC Donor ID e.g., DO228479\", \n value: \"DO228479\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1662,"value":"data = downloadSomaticMutationsFromIcgc(icgcDonorId);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1665,"value":"Inputs.table(data)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1667,"value":"preprocessIcgcDataForMcCgr(data);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1670,"value":"progress = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1696,"value":"## McCGR","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":533,"value":"viewof markerSize = Inputs.range([0.1, 5], {value:1, step: 0.1, label: \"Marker size:\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":63,"value":"{\n const form = html``;\n form.reset.onclick = () => chart.zoomReset();\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1505,"value":"viewof colorCosmic = Inputs.toggle({label: \"Color code COSMIC mutation types\", value: false})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1495,"value":"{\n if (colorCosmic) {\n return Swatches(d3.scaleOrdinal(cosmicSbsCategories, cosmicSbsColorScheme));\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1734,"value":"chart = plotMutationalContextCgr(data, {\n markerSize: markerSize,\n setColor: colorCosmic, \n colorColumn: \"cosmicSbsType\", \n colorCategories: cosmicSbsCategories, \n colorScheme: cosmicSbsColorScheme\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1335,"value":"Inputs.table(chart.value)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":731,"value":"## Appendix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1730,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1261,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":506,"value":"xAxisTop = (g, xScale, k, maxZoom, margin, strokeWidth, tickScale) => g\n .style(\"font\", `${margin.top / 4}px sans-serif`)\n .attr(\"stroke-width\", strokeWidth)\n .call(d3.axisTop(xScale)\n .tickValues(\n d3.range(0.0, 1.0000000001, 1/2**Math.floor(k + 1))\n .filter(t => ((t >= xScale.domain()[0]) && (t <= xScale.domain()[1]))))\n .tickFormat(d3.format(`.${2+Math.floor(k/maxZoom * 2)}f`))\n .tickSize(margin.bottom * tickScale)\n .tickPadding(margin.bottom * tickScale)\n )\n .selectAll(\"text\")\n .style(\"text-anchor\", \"start\")\n .attr(\"transform\", `rotate(${-70*(k/maxZoom) - 15})`);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":515,"value":"xAxisBottom = (g, xScale, k, maxZoom, margin, strokeWidth, tickScale) => g\n .style(\"font\", `${margin.bottom / 4}px sans-serif`)\n .attr(\"stroke-width\", strokeWidth)\n .call(d3.axisBottom(xScale)\n .tickValues(\n d3.range(0.0, 1.0000000001, 1/2**Math.floor(k + 1))\n .filter(t => ((t >= xScale.domain()[0]) && (t <= xScale.domain()[1]))))\n .tickFormat(d3.format(`.${2+Math.floor(k/maxZoom * 2)}f`))\n .tickSize(margin.bottom * tickScale)\n .tickPadding(margin.bottom * tickScale)\n )\n .selectAll(\"text\")\n .style(\"text-anchor\", \"start\")\n .attr(\"transform\", `rotate(${70*(k/maxZoom) + 15})`);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":519,"value":"yAxisLeft = (g, yScale, k, maxZoom, margin, strokeWidth, tickScale) => g\n .style(\"font\", `${margin.left / 4}px sans-serif`)\n .attr(\"stroke-width\", strokeWidth)\n .call(d3.axisLeft(yScale)\n .tickValues(\n d3.range(0.0, 1.0000000001, 1/2**Math.floor(k + 1))\n .filter(t => ((t >= yScale.domain()[0]) && (t <= yScale.domain()[1]))))\n .tickFormat(d3.format(`.${2+Math.floor(k/maxZoom * 2)}f`))\n .tickSize(margin.left * tickScale)\n .tickPadding(margin.left * tickScale)\n );","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":525,"value":"yAxisRight = (g, yScale, k, maxZoom, margin, strokeWidth, tickScale) => g\n .style(\"font\", `${margin.right / 4}px sans-serif`)\n .attr(\"stroke-width\", strokeWidth)\n .call(d3.axisRight(yScale)\n .tickValues(\n d3.range(0.0, 1.0000000001, 1/2**Math.floor(k + 1))\n .filter(t => ((t >= yScale.domain()[0]) && (t <= yScale.domain()[1]))))\n .tickFormat(d3.format(`.${2+Math.floor(k/maxZoom * 2)}f`))\n .tickSize(margin.right * tickScale)\n .tickPadding(margin.right * tickScale)\n );","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":71,"value":"grid = (g, xScale, yScale, k, gridWidth, gridHeight) => g\n .attr(\"stroke-opacity\", 0.2)\n .call(g => g\n .selectAll(\".x\")\n .data(d3.range(0.0, 1.0000000001, 1/2**Math.floor(k + 1)))\n .join(\n enter => enter.append(\"line\")\n .attr(\"class\", \"x\")\n .attr(\"y2\", gridHeight),\n update => update,\n exit => exit.remove()\n )\n .attr(\"x1\", d => xScale(d))\n .attr(\"x2\", d => xScale(d))\n .attr(\"stroke\", (d,i) => i%2===0 ? \"#000000\" : \"#C0C0C0\"))\n .call(g => g\n .selectAll(\".y\")\n .data(d3.range(0.0, 1.0000000001, 1/2**Math.floor(k + 1)))\n .join(\n enter => enter.append(\"line\")\n .attr(\"class\", \"y\")\n .attr(\"x2\", gridWidth),\n update => update,\n exit => exit.remove()\n )\n .attr(\"y1\", d => yScale(d))\n .attr(\"y2\", d => yScale(d))\n .attr(\"stroke\", (d,i) => i%2===0 ? \"#000000\" : \"#C0C0C0\"));","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1020,"value":"writeTextCorner = (g, x, y, text) => g.append(\"text\")\n .attr(\"x\", x)\n .attr(\"y\", y)\n .text(text);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1499,"value":"cosmicSbsCategories = [\n \"C>A\", \"C>G\", \"C>T\", \n \"T>A\", \"T>C\", \"T>G\",\n ];","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1486,"value":"cosmicSbsColorScheme = [\n \"#53bbe9\", \"#000000\", \"#d43d32\", \n \"#ccc9ca\", \"#accc70\", \"#e6c7c6\", \n];","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"height = 2000","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1672,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1675,"value":"async function getCoordsFromCgrPromise(cgrPromise) {\n const message = await (await cgrPromise).arrayBuffer();\n const dv = new DataView(message);\n const msgLength = dv.byteLength;\n const coords5Cgr = [dv.getFloat64(0), dv.getFloat64(8)];\n const coords3Cgr = [dv.getFloat64(msgLength - 16), dv.getFloat64(msgLength - 8)];\n return [coords5Cgr, coords3Cgr];\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1677,"value":"function getCgrCoordPromisesFromReferenceGenome(chrName, pos5Prime, pos3Prime) {\n const coordsByteLength = 32; // 2 dimensions * 2 CGRs (5' and 3') * 64 bit floats (8 bytes) = 32 bytes\n const startByte = (pos5Prime - 1) * coordsByteLength;\n const endByte = pos3Prime * coordsByteLength - 1;\n \n const call = fetch(`https://storage.googleapis.com/storage/v1/b/chaos-game-representation-grch37/o/chr${chrName}%2Fforward_backward_cgr.bin?alt=media`, \n {headers: {\n \"Content-Type\": \"application/octet-stream\", \n \"Range\": `bytes=${startByte}-${endByte}`}});\n \n \n return call;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1492,"value":"import { Swatches } from \"@d3/color-legend\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1655,"value":"import { downloadSomaticMutationsFromIcgc } from \"@jeyabbalas/icgc-somatic-mutations-data\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W37","stdlib":"1","titling":"auto"}} 33:"$32:body"