2e:null 2f:["$","title",null,{"children":"McCGR: Mutational Context - Chaos Game Representation | Aaron Ge | 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:T96a, /** * CORRECTED FUNCTION * Preprocesses mutation data to generate CGR coordinates. * This version corrects the async logic to prevent reading response bodies twice. * @param {Array