2c:null 2d:["$","title",null,{"children":"Plots | yolohuang | Observable"}] 32:T20dd,chart = { // 配置参数集中管理 const config = { margin: {left: 60, right: 10, top: 50, bottom: 50}, width: 600, height: 400, x_cutoff1: 0.8, x_cutoff2: -0.8, y_cutoff: -Math.log10(0.05), baseDash: 5, // 基础虚线长度 baseRadius: 3, // 基础圆点半径 baseLineWidth: 1 // 基础线宽 }; const { margin, width, height, x_cutoff1, x_cutoff2, y_cutoff } = config; // 创建容器 const div = d3.create("div").style("position", "relative"); // 添加控制元素 div.append("button") .text("Reset") .style("position", "absolute") .style("top", margin.top/2 + "px") .on("click", () => { graph.transition().duration(500).call(zoom.transform, d3.zoomIdentity) point.selectAll("text").attr("display", "none") point.selectAll("circle").attr("stroke","transparent") }); // const select = div.append("select") // .style("position", "absolute").style("top", "0px"); // ["gdp", "corruption"].forEach((val, i) => // select.append("option").attr("value", val).text(i ? "Corruption" : "Wealth") // ); // 创建SVG和缩放组 const graph = div.append("svg").attr("width", width).attr("height", height); const zoomGroup = graph.append("g"); // 定义比例尺 const xScale = d3.scaleLinear() .domain(d3.extent(cleanedData, d => d.logFC)) .range([margin.left, width - margin.right]); const yScale = d3.scaleLinear() .domain(d3.extent(cleanedData, d => d.neglog10pval)) .range([height - margin.bottom, margin.top]); // 绘制圆点，Wrap each point in a group and click the group，因为既有label又有点 // group per datum so circle and label are together const point = zoomGroup.selectAll("g.point") .data(cleanedData) .join("g") .attr("class", "point") .attr("transform", d => `translate(${xScale(d.logFC)},${yScale(d.neglog10pval)})`) .style("cursor","pointer") .on("click", function(event, d){ event.stopPropagation(); const g = d3.select(this); const selected = g.classed("selected"); g.classed("selected", !selected); g.select("circle") .attr("stroke", !selected ? "black" : "transparent") .attr("stroke-width", !selected ? 1 : 0); g.select("text").attr("display", !selected ? null : "none"); }); point.append("circle") .attr("r", config.baseRadius) .attr("stroke", "transparent") .attr("stroke-width", 0.1) .attr("fill", d => d.logFC > x_cutoff1 && d.neglog10pval > y_cutoff ? "red" : d.logFC < x_cutoff2 && d.neglog10pval > y_cutoff ? "blue" : "grey"); // .attr("fill", d => { // if (d.logFC > x_cutoff1 && d.neglog10pval > y_cutoff) return "red"; // if (d.logFC < x_cutoff2 && d.neglog10pval > y_cutoff) return "blue"; // return "grey"; // }); point.append("text") .attr("y", d => -config.baseRadius) .attr("text-anchor","middle") .attr("font-size", 10) .attr("display","none") .text(d => d.geneName); // 创建所有参考线（使用数据结构存储线信息） const lines = [ // 垂直线1 {elem: zoomGroup.append("line"), x: x_cutoff1, isVertical: true}, // 垂直线2 {elem: zoomGroup.append("line"), x: x_cutoff2, isVertical: true}, // 水平线 {elem: zoomGroup.append("line"), y: y_cutoff, isVertical: false} ]; // 初始化线条样式和位置 lines.forEach(line => { const elem = line.elem; elem.style("stroke", "gray") .style("stroke-width", config.baseLineWidth) .style("stroke-dasharray", `${config.baseDash},${config.baseDash}`); if (line.isVertical) { elem.attr("x1", xScale(line.x)).attr("x2", xScale(line.x)) .attr("y1", margin.top).attr("y2", height - margin.bottom); } else { elem.attr("x1", margin.left).attr("x2", width - margin.right) .attr("y1", yScale(line.y)).attr("y2", yScale(line.y)); } }); // 添加标题和轴（简化写法） graph.append("text") .text("Volcano Plot (Zoom with mouse wheel, pan by dragging)") .attr("x", margin.left+100).attr("y", margin.top/2) .attr("font-family", "tahoma").attr("font-size", 14); // 创建轴 const xAxis = graph.append("g") .attr("transform", `translate(0, ${height - 2 * margin.bottom / 3})`) .call(d3.axisBottom(xScale)); xAxis.append("text") .text("log2(Fold Change)") .attr("fill", "grey").attr("y", 30) .attr("x", (width - margin.right) / 2).attr("text-anchor", "middle"); const yAxis = graph.append("g") .attr("transform", `translate(${margin.left}, 0)`) .call(d3.axisLeft(yScale)); yAxis.append("text") .text("-log10(P Value)") .attr("fill", "grey") .attr("transform", `rotate(-90) translate(-${height/2}, -${margin.left - 10})`) .attr("text-anchor", "middle"); // 网格生成函数 const grid = (g, x, y) => g.attr("stroke", "currentColor").attr("stroke-opacity", 0.1) .call(g => g.selectAll(".x") .data(x.ticks(12)) .join("line") .attr("class", "x") .attr("x1", d => 0.5 + x(d)) .attr("x2", d => 0.5 + x(d)) .attr("y1", margin.top) .attr("y2", height - margin.bottom)) .call(g => g.selectAll(".y") .data(y.ticks(12 * height / width)) .join("line") .attr("class", "y") .attr("y1", d => 0.5 + y(d)) .attr("y2", d => 0.5 + y(d)) .attr("x1", margin.left) .attr("x2", width - margin.right)); const gGrid = graph.append("g").call(grid, xScale, yScale); // make overlays click-through gGrid.style("pointer-events","none"); xAxis.style("pointer-events","none"); yAxis.style("pointer-events","none"); // 缩放行为处理 const zoom = d3.zoom() .extent([[0, 0], [width, height]]) .scaleExtent([0.5, 10]) .on("zoom", zoomed); graph.call(zoom); // 优化的缩放处理函数 function zoomed(event) { const {transform} = event; zoomGroup.attr("transform", transform); // 缩放后的比例尺 const zx = transform.rescaleX(xScale); const zy = transform.rescaleY(yScale); // 更新轴和网格 xAxis.call(d3.axisBottom(zx)); yAxis.call(d3.axisLeft(zy)); gGrid.call(grid, zx, zy); // 调整圆点大小 point.selectAll("circle") .attr("r", config.baseRadius / transform.k) .attr("stroke-width", function () { const selected = d3.select(this.parentNode).classed("selected"); // parent return (selected ? 1 : 0) / transform.k; }); // .attr("stroke-width", d => { // // 检查是否为选中状态，分别应用不同的缩放逻辑 // const baseWidth = d3.select(this).classed("selected") ? 1 : 0; // return baseWidth / transform.k; // 关键：用基础宽度除以缩放倍数 // }); point.selectAll("text").attr("font-size", 13/transform.k) // 计算视口范围（数据坐标） const view = { x1: zx.invert(0), x2: zx.invert(width), y1: zy.invert(0), y2: zy.invert(height) }; // 更新所有线条（统一处理，减少重复代码） lines.forEach(line => { const elem = line.elem; const scale = transform.k; // 1. 更新可见性和长度 if (line.isVertical) { const visible = line.x >= view.x1 && line.x <= view.x2; elem.style("display", visible ? "block" : "none"); if (visible) { elem.attr("y1", Math.max(margin.top, yScale(Math.min(view.y2, yScale.domain()[1])))) .attr("y2", Math.min(height - margin.bottom, yScale(Math.max(view.y1, yScale.domain()[0])))); } } else { const visible = line.y >= view.y1 && line.y <= view.y2; elem.style("display", visible ? "block" : "none"); if (visible) { elem.attr("x1", Math.max(margin.left, xScale(Math.max(view.x1, xScale.domain()[0])))) .attr("x2", Math.min(width - margin.right, xScale(Math.min(view.x2, xScale.domain()[1])))); } } // 2. 更新虚线样式（统一计算） const dash = config.baseDash * scale; elem.style("stroke-dasharray", `${dash},${dash}`) .style("stroke-width", config.baseLineWidth / scale); }); } return div.node(); } // fix bug of line and point // add tooltips33:T1ab7,{ const width = 1000; const height = 1000; const outerRadius = form.radius*Math.min(width,height); const innerRadius = form.aspect*outerRadius; const pad = 0.01; const gaps_perc = form.gaps; const gaps = d3.scaleBand().range([0,2*Math.PI*gaps_perc]).domain(data.map(d => d.group)); const x = d3.scaleBand() .range([0, 2 * Math.PI*(1-gaps_perc)]) // .align(0) .domain(data.map(d => d.group2)); const y = d3.scaleLinear() .range([innerRadius, outerRadius]) .domain([0, 4]); // Domain of Y is from 0 to the max seen in the data const color = d3.scaleOrdinal(d3.schemeTableau10); //Create a color scale // var color = d3.scaleOrdinal() // .domain([1,3.5,6]) // .range(["#2c7bb6", "#ffffbf", "#d7191c"]) const svg = d3.create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [-width / 2, -height / 2, width, height]); // Circle ticks // svg.append("g") // .selectAll("g") // .data(y.ticks(5)) // .join("g") // .attr("fill", "none") // .call(g => g.append("circle") // .attr("stroke", "#333333") // .attr("stroke-opacity", 1) // .attr("stroke-dasharray", "5,5") // .attr("r", y)); // Projected bar svg.append("g") .selectAll("path") .data(data) .join("path") .attr("fill","white") .attr("fill-opacity", 1) .attr("d", d3.arc() .innerRadius(innerRadius) .outerRadius(d => y(d.bar1)) .startAngle(d => x(d.group2) + gaps(d.group)) .endAngle(d => x(d.group2) + x.bandwidth() + gaps(d.group)) .padAngle(pad) .padRadius(innerRadius)); svg.append("g") .selectAll("path") .data(data) .join("path") .attr("fill",d => color(d.group1)) .attr("fill-opacity", 0.2 * (form.lablesInsideBars ? 1 : 2)) .attr("d", d3.arc() .innerRadius(innerRadius) .outerRadius(d => y(d.bar1)) .startAngle(d => x(d.group2) + gaps(d.group)) .endAngle(d => x(d.group2) + x.bandwidth() + gaps(d.group)) .padAngle(pad) .padRadius(innerRadius)); // Current bar svg.append("g") .selectAll("path") .data(data) .join("path") .attr("fill", d => color(d.group1)) .attr("fill-opacity", 0.2 * (form.lablesInsideBars ? 1 : 2)) // .attr("stroke","black") // .attr("stroke-width", "2") .attr("d", d3.arc() .innerRadius(innerRadius) .outerRadius(d => y(d.bar2)) .startAngle(d => x(d.group2) + gaps(d.group)) .endAngle(d => x(d.group2) + x.bandwidth() + gaps(d.group)) .padAngle(pad) .padRadius(innerRadius)) // group2 Labels svg.append("g") .selectAll("g") .data(data) .enter() .append("g") .attr("text-anchor", d => (x(d.group2) + x.bandwidth() / 2 + gaps(d.group) + Math.PI) % (2 * Math.PI) < Math.PI ? "end" : "start" ) .attr("transform", d => "rotate(" + ((x(d.group2) + x.bandwidth() / 2 + gaps(d.group)) * 180 / Math.PI - 90) + ")" + "translate(" + ((form.lablesInsideBars ? innerRadius : outerRadius) + 5) + ",0)") .append("text") .text(d => d.group2) .attr("transform", d => (x(d.group2) + x.bandwidth() / 2 + gaps(d.group) + Math.PI) % (2 * Math.PI) < Math.PI ? "rotate(180)" : "rotate(0)") .style("font-size", `${form.categoryTextSize}px`) .style("font-family","serif") .attr("dominant-baseline", "central"); ////////////////////////////////////////////////////////////// ///////////////////// Data & Scales ///////////////////////// ////////////////////////////////////////////////////////////// //Create an arc function var arc = d3.arc() .innerRadius(0) .outerRadius(innerRadius-5); //Turn the pie chart 90 degrees counter clockwise, so it starts at the left var pie = d3.pie() .startAngle(Math.PI/180) .endAngle(Math.PI/180 + 2*Math.PI) .value(function(d) { return d.value; }) .padAngle(0.1) .sort(null); ////////////////////////////////////////////////////////////// //////////////////// Create Donut Chart ////////////////////// ////////////////////////////////////////////////////////////// //Create the donut slices and also the invisible arcs for the text svg.selectAll(".donutArcs") .data(pie(labels(data.map(d => d.group1)))) .enter().append("path") .attr("class", "donutArcs") .attr("d", arc) .style("fill","white") .style("fill-opacity", 0.1) .each(function(d,i) { //Search pattern for everything between the start and the first capital L var firstArcSection = /(^.+?)L/; //Grab everything up to the first Line statement var newArc = firstArcSection.exec( d3.select(this).attr("d") )[1]; //console.log("newArc",newArc) //Replace all the comma's so that IE can handle it newArc = newArc.replace(/,/g , " "); //If the end angle lies beyond a quarter of a circle (90 degrees or pi/2) //flip the end and start position if (d.endAngle > Math.PI/90) { var startLoc = /M(.*?)A/, //Everything between the first capital M and first capital A middleLoc = /A(.*?)0 0 1/, //Everything between the first capital A and 0 0 1 endLoc = /0 0 1 (.*?)$/; //Everything between the first 0 0 1 and the end of the string (denoted by $) //Flip the direction of the arc by switching the start en end point (and sweep flag) //of those elements that are below the horizontal line var newStart = endLoc.exec( newArc )[1]; var newEnd = startLoc.exec( newArc )[1]; var middleSec = middleLoc.exec( newArc )[1]; //Build up the new arc notation, set the sweep-flag to 0 newArc = "M" + newStart + "A" + middleSec + "0 0 0 " + newEnd; }//if //Create a new invisible arc that the text can flow along svg.append("path") .attr("class", "hiddenDonutArcs") .attr("id", "donutArc"+i) .attr("d", newArc) .style("fill", "none"); }); //Append the label names on the outside svg.selectAll(".donutText") .data(pie(labels(data.map(d => d.group1)))) .enter().append("text") .style("font-family","serif") // .style("font-style","oblique") // .style("letter-spacing", "6px") .style("font-size",`${form.topicTextSize}px`) .style("fill-opacity",0.5) .attr("class", "donutText") //Move the labels below the arcs for those slices with an end angle greater than 90 degrees // .attr("dy", function(d,i) { return (d.endAngle > Math.PI/90 ? 18 : -11); }) .append("textPath") .attr("startOffset","50%") .style("text-anchor","middle") .attr("xlink:href",function(d,i){return "#donutArc"+i;}) .text(function(d){return d.data.name;}); return svg.node(); }34:[{"id":"c1e0f448793c9ef2e0d276851201687f0ed348fc1df3903544db0a8b01eadf5e0801d58a43dc4845c2d924b81482db74d7d425706f13254b6e8d8ffaae11be24","href":"https://static.observableusercontent.com/files/c1e0f448793c9ef2e0d276851201687f0ed348fc1df3903544db0a8b01eadf5e0801d58a43dc4845c2d924b81482db74d7d425706f13254b6e8d8ffaae11be24","name":"Liver_KO_WT.csv","type":"text/csv","lastModified":1761288237672.629,"size":3469306},{"id":"c38d63fba075ff93e2f209bd1bd55e9a0cb9d5a592f289f0d72226c8e6de096d3f16827d0d384b0e58349a549db018d1f2d1a366a27f93b4285ae88e954cca43","href":"https://static.observableusercontent.com/files/c38d63fba075ff93e2f209bd1bd55e9a0cb9d5a592f289f0d72226c8e6de096d3f16827d0d384b0e58349a549db018d1f2d1a366a27f93b4285ae88e954cca43","name":"Liver_ND_WT.csv","type":"text/csv","lastModified":1761617495594.616,"size":3472264},{"id":"b59157d87349208bf00c6a310fb21b5f70e003477b51441d5247a5b8bdbff4daf4b67655d7cd9408e04b1b8377e6d4988f410b4a7dc35f9559677987a0d60dab","href":"https://static.observableusercontent.com/files/b59157d87349208bf00c6a310fb21b5f70e003477b51441d5247a5b8bdbff4daf4b67655d7cd9408e04b1b8377e6d4988f410b4a7dc35f9559677987a0d60dab","name":"KO_Tumor_Liver.csv","type":"text/csv","lastModified":1761617496548.198,"size":3478855},{"id":"3aabdd0b4c88716968d29d1ea2ae14bc984f0304b9c3881b8f79e16b82d1263fc6533784d3ae215dc38ed59eea8327611b9c0d8bce4eee58ffba44c5a72de98d","href":"https://static.observableusercontent.com/files/3aabdd0b4c88716968d29d1ea2ae14bc984f0304b9c3881b8f79e16b82d1263fc6533784d3ae215dc38ed59eea8327611b9c0d8bce4eee58ffba44c5a72de98d","name":"WT_Tumor_Liver.csv","type":"text/csv","lastModified":1761617495725.668,"size":3475732},{"id":"2f1285da84b12b3b1612e06c209b31341d53c737bc301a57b59931a7eb64c7cfcf0aecd26d6719a1937f4a5d5aac1b184e972d7399a65c17aec47a98aa3737dc","href":"https://static.observableusercontent.com/files/2f1285da84b12b3b1612e06c209b31341d53c737bc301a57b59931a7eb64c7cfcf0aecd26d6719a1937f4a5d5aac1b184e972d7399a65c17aec47a98aa3737dc","name":"Tumor_KO_WT.csv","type":"text/csv","lastModified":1761617495594.193,"size":3475080},{"id":"23d7596afcf5065e11120a442f96864533aac16c33be952bd2496f44a1ff2aaa43d8f07fa462accf869b3c64cd44cf453e54d0faa6b644fd294b8e229f77a4e9","href":"https://static.observableusercontent.com/files/23d7596afcf5065e11120a442f96864533aac16c33be952bd2496f44a1ff2aaa43d8f07fa462accf869b3c64cd44cf453e54d0faa6b644fd294b8e229f77a4e9","name":"hta-test.csv","type":"text/csv","lastModified":1744342336713.332,"size":1839},{"id":"eba77c21657021b999c4ee1fba74341589f6048b2aa4245e56b0d3f85f7d284001e9a5c403731540212a07fe1bff8cb4d2e53e551886e0c82240a3b3b3e94348","href":"https://static.observableusercontent.com/files/eba77c21657021b999c4ee1fba74341589f6048b2aa4245e56b0d3f85f7d284001e9a5c403731540212a07fe1bff8cb4d2e53e551886e0c82240a3b3b3e94348","name":"Liver_ND_WT_go.csv","type":"text/csv","lastModified":1761723472074.483,"size":1903292},{"id":"da198d11c109c550e50a179a2ce26e7fa60d9d1872565016989b3371589f9243e15556701159a8c060c4146b79f38d38d22b00dec31dac0eda6953c73dbf5295","href":"https://static.observableusercontent.com/files/da198d11c109c550e50a179a2ce26e7fa60d9d1872565016989b3371589f9243e15556701159a8c060c4146b79f38d38d22b00dec31dac0eda6953c73dbf5295","name":"WT_Tumor_Liver_gseakg.csv","type":"text/csv","lastModified":1761723465153.803,"size":7586},{"id":"1e6f44c7b9846376563dab360462da08b649a18afa9f315fe796a5d8dc325c61a33e5be2169ab6757629a4ab4366d5b0978e91796efaac6fc74faf8487927220","href":"https://static.observableusercontent.com/files/1e6f44c7b9846376563dab360462da08b649a18afa9f315fe796a5d8dc325c61a33e5be2169ab6757629a4ab4366d5b0978e91796efaac6fc74faf8487927220","name":"Liver_ND_WT_gseakg.csv","type":"text/csv","lastModified":1761723465316.402,"size":18175},{"id":"4c37d3a8ba949d8eb78ccd43572a568303af755ce66fd107084f59ac6b710b311cdde34f74d060d76ef4397f1d862fa807bfc322b9b12c4b0fef837def361f37","href":"https://static.observableusercontent.com/files/4c37d3a8ba949d8eb78ccd43572a568303af755ce66fd107084f59ac6b710b311cdde34f74d060d76ef4397f1d862fa807bfc322b9b12c4b0fef837def361f37","name":"KO_Tumor_Liver_go.csv","type":"text/csv","lastModified":1761723472052.288,"size":2171218},{"id":"f4c639696c599c37119ce7ab2ec3bdb170cba90f037f03d0814c0d6809236a02ed6a6ac0a80eb81df7f8a4ec269b886430efe5c085421a1903ce3f09980c3c52","href":"https://static.observableusercontent.com/files/f4c639696c599c37119ce7ab2ec3bdb170cba90f037f03d0814c0d6809236a02ed6a6ac0a80eb81df7f8a4ec269b886430efe5c085421a1903ce3f09980c3c52","name":"Tumor_KO_WT_gseakg.csv","type":"text/csv","lastModified":1761723465140.016,"size":66},{"id":"355e4888a598b09829d83ae3cd70e575f04a242951abd2b3dc4d5426c879eab26ca6a8f3442fb8d9aa4c9cf48b73af32b9b928edea6742139be2fc52eac2bc2b","href":"https://static.observableusercontent.com/files/355e4888a598b09829d83ae3cd70e575f04a242951abd2b3dc4d5426c879eab26ca6a8f3442fb8d9aa4c9cf48b73af32b9b928edea6742139be2fc52eac2bc2b","name":"Tumor_KO_WT_kg.csv","type":"text/csv","lastModified":1761723465416.245,"size":58633},{"id":"2cef2333c9e0a06c07222abc4d5f5ad00c5cebd77eaa4387ff116eb43ef319b2600e358de9eb60eaf49eda11a01b67d385412caa81d918b84f9f7f8bd164ee56","href":"https://static.observableusercontent.com/files/2cef2333c9e0a06c07222abc4d5f5ad00c5cebd77eaa4387ff116eb43ef319b2600e358de9eb60eaf49eda11a01b67d385412caa81d918b84f9f7f8bd164ee56","name":"Liver_ND_WT_kg.csv","type":"text/csv","lastModified":1761723466216.396,"size":101544},{"id":"677a4008fde5c6d5aaf1b967122a3bd6e5920554f81b4a010722f925d1943b0d4d0fd63dab5b171f2592813a133bd77d08d3fee52ca4882737acb842bf45f0cf","href":"https://static.observableusercontent.com/files/677a4008fde5c6d5aaf1b967122a3bd6e5920554f81b4a010722f925d1943b0d4d0fd63dab5b171f2592813a133bd77d08d3fee52ca4882737acb842bf45f0cf","name":"Liver_KO_WT_go.csv","type":"text/csv","lastModified":1761723470110.491,"size":1041588},{"id":"531fdf8362f915d483fb61efb6aafadf4d08978cb7d8dfd0083c19cfd3a7e3fa603c059f537458ac8302e4d91d03b9abd5420c7281007915653d16c2a5ca827f","href":"https://static.observableusercontent.com/files/531fdf8362f915d483fb61efb6aafadf4d08978cb7d8dfd0083c19cfd3a7e3fa603c059f537458ac8302e4d91d03b9abd5420c7281007915653d16c2a5ca827f","name":"WT_Tumor_Liver_kg.csv","type":"text/csv","lastModified":1761723466241.545,"size":113773},{"id":"b88a430a0de41a67a70a62e455e82ccd7c0616c992467da2df66adb36999bb5b84bdd0623176575120286b52f58fec533f3204be853d69788d260c15239684d0","href":"https://static.observableusercontent.com/files/b88a430a0de41a67a70a62e455e82ccd7c0616c992467da2df66adb36999bb5b84bdd0623176575120286b52f58fec533f3204be853d69788d260c15239684d0","name":"WT_Tumor_Liver_go.csv","type":"text/csv","lastModified":1761723472528.791,"size":2222997},{"id":"e7f6188a2ac1350498c745f62056570a5f38a44a8bec2e6a00d3ac395208cabfb4114b30d0ad7d89c1ea41eb384da1c712ae91e3ec45d0d2856f3546438c761b","href":"https://static.observableusercontent.com/files/e7f6188a2ac1350498c745f62056570a5f38a44a8bec2e6a00d3ac395208cabfb4114b30d0ad7d89c1ea41eb384da1c712ae91e3ec45d0d2856f3546438c761b","name":"Liver_KO_WT_kg.csv","type":"text/csv","lastModified":1761723465732.572,"size":64947},{"id":"209120ee3e59acedb91c9207a87bcdca2efa0e67e49d1ee992e94d670a10860a267dc42ea639acd39b35afec49f853badd8f2f78e4640a35e9c79df0dfd3249b","href":"https://static.observableusercontent.com/files/209120ee3e59acedb91c9207a87bcdca2efa0e67e49d1ee992e94d670a10860a267dc42ea639acd39b35afec49f853badd8f2f78e4640a35e9c79df0dfd3249b","name":"Liver_KO_WT_gseakg.csv","type":"text/csv","lastModified":1761723465137.89,"size":839},{"id":"69cee82cee2e6d31dee14bdcbf6098bb0384422b4afc433e2f235c3c384554eba788e1662026a5d7dca1b106641d88d9efe8e7d3284bea221dd819cacbad9825","href":"https://static.observableusercontent.com/files/69cee82cee2e6d31dee14bdcbf6098bb0384422b4afc433e2f235c3c384554eba788e1662026a5d7dca1b106641d88d9efe8e7d3284bea221dd819cacbad9825","name":"KO_Tumor_Liver_kg.csv","type":"text/csv","lastModified":1761723466243.517,"size":113833},{"id":"5944c88a79c75d9b6d8b9b9c5c6373f249d18fa8fc40ea70e6d9fdf4c543218d2d846560d916a7bcef583391a9bb9b4194240f76f6827126a7fa2b220359707d","href":"https://static.observableusercontent.com/files/5944c88a79c75d9b6d8b9b9c5c6373f249d18fa8fc40ea70e6d9fdf4c543218d2d846560d916a7bcef583391a9bb9b4194240f76f6827126a7fa2b220359707d","name":"Tumor_KO_WT_go.csv","type":"text/csv","lastModified":1761723470117.34,"size":1002125},{"id":"1d76a58eda8f005310cb69a2910c205587becf65897d63514a249603e7641197412fba958a83ba8922ea9fe849e2bea5454cb011755ab90d5da76b99507845cc","href":"https://static.observableusercontent.com/files/1d76a58eda8f005310cb69a2910c205587becf65897d63514a249603e7641197412fba958a83ba8922ea9fe849e2bea5454cb011755ab90d5da76b99507845cc","name":"KO_Tumor_Liver_gseakg.csv","type":"text/csv","lastModified":1761723465131.82,"size":15714}] 30:{"id":"db5da493a35745f2","slug":null,"title":"Plots","thumbnail":"e78503b6ab78840c8c12bb3a3eb7ae647b4ee4fe4e383addb47a477a96bae6a2","access_level":"public","create_time":"$D2025-04-11T03:32:16.713Z","update_time":"$D2025-10-29T08:03:20.684Z","view_time":null,"first_public_time":"$D2025-10-28T01:43:24.670Z","has_unpublished_edits":null,"fork":{"id":"b02a07d4f2b570bc","slug":null,"title":"Circular Chart","owner":{"id":"1559c4b1a1f8ce26","login":"1299651405","name":""}},"stars":0,"starred":false,"owner":{"type":"team","id":"ef33ac51fa87db83","login":"yolohuang","name":"yolohuang","avatar_url":"https://avatars-next.observableusercontent.com/bc37bcce01fa261be56522cdf6e89db94cf9ecbc61e4c70bc8474b617b0cad0e","tier":"starter_2024","bio":""},"version":1155,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"150237755228ec26","login":"yolo-huang","name":"yolo huang","avatar_url":"https://avatars-next.observableusercontent.com/d6cd7afa8f19462d88adc2eb5a01caff4141f88dc48de93316163fb697049fdb","tier":null,"bio":""}],"members":[{"type":"team","id":"ef33ac51fa87db83","login":"yolohuang","name":"yolohuang","avatar_url":"https://avatars-next.observableusercontent.com/bc37bcce01fa261be56522cdf6e89db94cf9ecbc61e4c70bc8474b617b0cad0e","tier":"starter_2024","role":"editor"},{"type":"individual","id":"150237755228ec26","login":"yolo-huang","name":"yolo huang","avatar_url":"https://avatars-next.observableusercontent.com/d6cd7afa8f19462d88adc2eb5a01caff4141f88dc48de93316163fb697049fdb","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Plots","cells":[{"id":719,"value":"# Plots","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1086,"value":"// Observable cell: a dropdown listing your attached CSV files\nviewof file = Inputs.select(\n [\n FileAttachment(\"Liver_KO_WT.csv\"),\n FileAttachment(\"KO_Tumor_Liver.csv\"),\n FileAttachment(\"Liver_ND_WT.csv\"),\n FileAttachment(\"Tumor_KO_WT.csv\"),\n FileAttachment(\"WT_Tumor_Liver.csv\")\n ],\n { label: \"Dataset\", format: f => f.name }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1088,"value":"// Load the selected file\ndata1 = file.csv({ typed: true })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1093,"value":"data2 = data1","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"data2","database":"$undefined"},{"id":1054,"value":"data3 = Plot.plot({\n marks: [\n Plot.auto(data1, {x: \"logFC\"})\n ]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"data3","database":"$undefined"},{"id":937,"value":"[Math.max(...cleanedData.map(d => d.logFC)), Math.min(...cleanedData.map(d => d.logFC)),d3.extent(cleanedData, d => d.logFC)]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":971,"value":"// 清洗数据：转换为数值 + 过滤不合理范围\ncleanedData = data1.map(d => ({\n geneName: d.genes,\n geneType: d.gene_type,\n chromosome: d.chromosome,\n aveExpr: +d.AveExpr,\n logFC: +d.logFC, // 强制转换为数值\n neglog10pval: -Math.log10(+d[\"P.Value\"]),\n adjPVal: -Math.log10(+d[\"adj.P.Val\"])\n})).filter(d => \n !isNaN(d.logFC) && !isNaN(d.neglog10pval) \n);\n\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":900,"value":"## scatter plot","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1022,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":910,"value":"function scatterplot(container, data=[], options = {}){\n \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1143,"value":"# Enrichment","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1146,"value":"viewof file_enrich = Inputs.select(\n [\n FileAttachment(\"Liver_KO_WT_gseakg.csv\"),\n FileAttachment(\"KO_Tumor_Liver_gseakg.csv\"),\n FileAttachment(\"WT_Tumor_Liver_gseakg.csv\"),\n FileAttachment(\"Tumor_KO_WT_gseakg.csv\"),\n FileAttachment(\"Liver_KO_WT_gseakg.csv\"),\n FileAttachment(\"Liver_ND_WT_kg.csv\"),\n FileAttachment(\"KO_Tumor_Liver_kg.csv\"),\n FileAttachment(\"WT_Tumor_Liver_kg.csv\"),\n FileAttachment(\"Tumor_KO_WT_kg.csv\"),\n FileAttachment(\"Liver_KO_WT_kg.csv\"),\n FileAttachment(\"Liver_ND_WT_go.csv\"),\n FileAttachment(\"KO_Tumor_Liver_go.csv\"),\n FileAttachment(\"WT_Tumor_Liver_go.csv\"),\n FileAttachment(\"Tumor_KO_WT_go.csv\"),\n FileAttachment(\"Liver_KO_WT_go.csv\"),\n FileAttachment(\"Liver_ND_WT.csv\"),\n FileAttachment(\"KO_Tumor_Liver.csv\"),\n FileAttachment(\"WT_Tumor_Liver.csv\"),\n FileAttachment(\"Tumor_KO_WT.csv\"),\n FileAttachment(\"Liver_KO_WT.csv\")\n ],\n { label: \"Dataset\", format: f => f.name }\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1151,"value":"data4 = file_enrich.csv({ typed: true })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1150,"value":"data5 = data4","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"data5","database":"$undefined"},{"id":0,"value":"# Circular Chart\n\nInput data as a CSV with columns \"Category\" and \"Series\". \"Topic\", \"SubTopic\" and \"Series2\" are optional.\n\nThe csv should be uploaded using the file attachments, and selected in the table cell below.\n\nThe chart can be downloaded using the three dot menu on the top left of its cell","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":76,"value":"data = await FileAttachment(\"hta-test.csv\").csv({typed: \"auto\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"data","database":"$undefined"},{"id":153,"value":"viewof form = Inputs.form({\n radius: Inputs.range([0.1,0.5], {label: \"Radius\", step: 0.01}),\n aspect: Inputs.range([0.1, 0.9], {label: \"Inner radius\", step: 0.01}),\n lablesInsideBars: Inputs.toggle({label: \"Labels inside bars\"}),\n categoryTextSize: Inputs.range([8,20], {label: \"Category text size\", step: 1}),\n topicTextSize: Inputs.range([8,20], {label: \"Topic text size\", step: 1}),\n gaps: Inputs.range([0,1], {label: \"Topic Gaps\"})\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":322,"value":"out = Object.keys(data.map(d => d.group ).reduce((acc, cur) => (acc[cur] = acc[cur] + 1/data.length || 1/data.length, acc), {}))\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":407,"value":"\nfunction labels(data) {\n let inp = Object.entries(data.reduce((acc, cur) => (acc[cur] = acc[cur] + 1/data.length || 1/data.length, acc), []));\n let out = [];\n for (let i = 0; i < inp.length; i++) {\n let tmp = {};\n tmp['name'] = inp[i][0];\n tmp['value'] = inp[i][1];\n out.push(tmp)\n }\n return out\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":296,"value":"// style = html`\n// \n// \n\n// \n// `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1"}} 31:"$30:body"