2d:null 2e:["$","title",null,{"children":"Spatial vs. Expression Map | Kris Sankaran | Observable"}] 33:T401,md`These are the MibiToF data for one sample (#5). The goal of this vis is to see whether neighboring cells have similar expression values. The LHS is a map of the raw cells. The RHS is a U-Map projection from the quantile-transformed protein expression levels. For interaction, * Press \`shift\` and hover to select cells or points * Press \`ctrl\` and hover to clear cells or points You can only remove points using the panel that you used to add them. Not the cleanest interaction (brush would be better), but easy to hack together. It would also have been nice to let you switch into color the cells by u-map coordinate or specific antigen expression, but maybe later. Main takeaways * Neighboring cells can have relatively different U-Map projections, at least with the current transformation / channels * Immune cells at the boundary between tumor and immune have noticeably different expression (and lay elsewhere on the map) The code to prepare the data is [here](https://github.com/PratheepaJ/BANF_project). `34:T8c2,f = { function initializeCells(root) { const proj = d3g.geoIdentity().fitExtent([[0, 0], [scales.scatterX.range()[1], scales.scatterX.range()[1]]], polys); const path = d3g.geoPath().projection(proj); root.selectAll('path') .data(polys.features).enter() .append('path') .attrs({ d: path, class: 'cellPath', fill: (d) => { const f = d.properties.tumorYN == 1 ? scales.tumorFill(d.properties.tumorCluster) : scales.immuneFill(d.properties.immuneGroup); return f; }, "stroke-width": 0.1 }) .on("mouseover", cellOver); } function initializeScatter(root) { root.selectAll('circle') .data(channels).enter() .append('circle') .attrs({ cx: (d) => scales.scatterX(d.V1), cy: (d) => scales.scatterY(d.V2), r: 2, fill: (d) => { const f = d.tumorYN == 1 ? scales.tumorFill(d.tumorCluster) : scales.immuneFill(d.immuneGroup); return f; }, "stroke-width": 0.1, class: "scatterCircle" }) .on("mouseover", scatterOver); } function cellOver(data) { const curState = new Set([...state.cells, ...state.hm]); curState.add(data.properties.cellLabelInImage); updateHighlighted(curState); if (d3s.event.shiftKey) { state.cells.add(data.properties.cellLabelInImage); } else if (d3s.event.ctrlKey) { state.cells.delete(data.properties.cellLabelInImage); } } function scatterOver(data) { const curState = new Set([...state.cells, ...state.hm]); curState.add(data.cellLabelInImage); updateHighlighted(curState); if (d3s.event.shiftKey) { state.hm.add(data.cellLabelInImage); } else if (d3s.event.ctrlKey) { state.hm.delete(data.cellLabelInImage); } } function updateHighlighted(curState) { d3s.select('#scatter') .selectAll('.scatterCircle') .attrs({ "stroke-width": (d) => curState.has(d.cellLabelInImage) ? .5 : 0, "fill-opacity": (d) => curState.has(d.cellLabelInImage) ? 1 : 0.2 }); d3s.select('#cells') .selectAll('.cellPath') .attrs({ "stroke-width": (d) => curState.has(d.properties.cellLabelInImage) ? 1 : 0.1 }); } return { initializeCells: initializeCells, initializeScatter: initializeScatter, } }35:[{"id":"6addeaec547d19bb27a4423b1bee66d129b3033883d42d2661e332346914f84bc7a8c99845a26dea80c183f206bf9647e0af4fe2262d683a23bab66de066c747","href":"https://static.observableusercontent.com/files/6addeaec547d19bb27a4423b1bee66d129b3033883d42d2661e332346914f84bc7a8c99845a26dea80c183f206bf9647e0af4fe2262d683a23bab66de066c747","name":"polys.json","type":"application/json","lastModified":1590611250196.816,"size":6220040},{"id":"72e94c84b29415640b91b90030d41c7854c808f312a4ace48af0d8078d5eb7cd8592c8b3e436eebdcb1043460c45e0b240a67fcff7b581a40cf5389f01f4fd52","href":"https://static.observableusercontent.com/files/72e94c84b29415640b91b90030d41c7854c808f312a4ace48af0d8078d5eb7cd8592c8b3e436eebdcb1043460c45e0b240a67fcff7b581a40cf5389f01f4fd52","name":"channels.json","type":"application/json","lastModified":1590611246276.184,"size":603320}] 31:{"id":"e7b02089ad20274e","slug":"spatial-vs-expression-map","title":"Spatial vs. Expression Map","thumbnail":"5dd14b7e7188cd418099b740b7b9d97d821b512fcd20b0b4c686f785497a168d","access_level":"public","create_time":"$D2020-05-27T20:26:18.648Z","update_time":"$D2020-05-28T14:15:46.250Z","view_time":null,"first_public_time":"$D2020-05-27T21:12:45.043Z","fork":false,"stars":3,"starred":false,"owner":{"type":"team","id":"58c635fe0c6a930c","login":"krisrs1128","name":"Kris Sankaran","avatar_url":"https://avatars-next.observableusercontent.com/384a4d4ac6e6ad0ce3c5b1bc69c03d2c693a0b2859424bd8395dfef0e462967e","tier":"starter_2024"},"version":218,"publish_version":218,"role":null,"authored":false,"authors":[{"type":"individual","id":"544fdf34bf62b87c","login":"krisrs1128","name":"Kris Sankaran","avatar_url":"https://avatars-next.observableusercontent.com/384a4d4ac6e6ad0ce3c5b1bc69c03d2c693a0b2859424bd8395dfef0e462967e","tier":null}],"members":[{"type":"individual","id":"544fdf34bf62b87c","login":"krisrs1128","name":"Kris Sankaran","avatar_url":"https://avatars-next.observableusercontent.com/384a4d4ac6e6ad0ce3c5b1bc69c03d2c693a0b2859424bd8395dfef0e462967e","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Spatial vs. Expression Map","cells":[{"id":0,"value":"md`# Spatial vs. Expression Map`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":173,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":191,"value":"html`The tumor clusters (from the original rda object) are 4, 7, 10, 17.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":204,"value":"html`The immune clusters are 1, 2, 3, 4, 8, 10, 11, 12.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":62,"value":"chart = {\n\nconst width = 1000,\n height = 500;\n\nconst svg = d3s.select(DOM.svg(width, height));\nsvg.append(\"svg\")\n .attrs({\n id: \"svg\",\n width: width,\n height: height\n });\n\nsvg.selectAll(\"g\")\n .data([\"cells\", \"scatter\"]).enter()\n .append(\"g\")\n .attr(\"id\", (d) => d);\n\nsvg.select(\"#scatter\")\n .attrs({\n transform: `translate(${scales.scatterX.range()[1]}, 10)`\n });\n \nf.initializeCells(svg.select(\"#cells\"));\nf.initializeScatter(svg.select(\"#scatter\"));\nreturn svg.node()\n\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"polys = FileAttachment(\"polys.json\").json();","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"channels = FileAttachment(\"channels.json\").json();","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":74,"value":"tumorCols = ['#d9d9d9','#bc80bd','#ccebc5','#ffed6f'];","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":109,"value":"immuneCols = ['#8dd3c7','#ffffb3','#bebada','#fb8072','#80b1d3','#fdb462','#b3de69','#fccde5']","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":72,"value":"projDims = d3a.range(7).map((d) => 'V' + d);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":118,"value":"state = ({\"cells\": new Set([]), \"hm\": new Set([])});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":81,"value":"scales = ({\n tumorFill: d3sc.scaleOrdinal().domain([4, 7, 10, 17]).range(immuneCols),\n immuneFill: d3sc.scaleOrdinal().domain([1, 2, 3, 4, 8, 10, 11, 12]).range(tumorCols),\n scatterX: d3sc.scaleLinear().domain([-5.5, 3.5]).range([0, 400]),\n scatterY: d3sc.scaleLinear().domain([-7, 7]).range([0, 400]),\n hmFill: d3sc.scaleLinear().domain([-2, 0, 2]).range([\"white\", \"grey\", \"black\"])\n});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":89,"value":"d3a = require(\"d3-array\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"d3g = require(\"d3-geo\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":85,"value":"d3sc = require(\"d3-scale\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":56,"value":"d3s = require.alias({\n 'd3-selection': 'd3',\n})('d3', 'd3-selection-multi')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":150,"value":"html`\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 32:"$31:body"