31:T64f,v9 was work up until 6/23/23. There we have a functional version of viewing cells in 3d by extruding the wire frames of the cell boundaries, can toggle transcripts by layer and partition, and can change the opacity of the wireframe, among other features. v10 and onwards we want to add the following functionality: - Add an "all" & "none" button in the z-level input for transcripts - fix labels for the cells to include cell type - offer transcript partition by cell as an option, color by cell type - toggle whether we see the polygon layer - make transcripts clickable to view them one at a time, lower the opacity of all others. Make this into a dropdown menu so people can choose gene of interest - create a intro animation for the 3d image - shift polygons down half a layer Future versions, I think this should be the "general" viewing function and other capability should be other decks, if the goal is to view different aspects of the data. Potential future versions: *cell segmentation*: - here we will be able to view multiple segmentations, so first step would be adding in a second polygon layer - score cell segmentation overlaps and color appropriately; IOUs - toggle transcript colors based on position in different segmentations *multi-transcript selection*: - this would be the feature useful to looking at receptor-ligand expression - highlight multiple transcripts and reduce opacity, remove, or color lightgrey all other transcripts. - highlight cells with high interaction scores - have a selection menu of pre-selected gene pairs; either known receptor-ligands or other interesting pairs32:Ted3,{ const polygon_layer = new deck.PolygonLayer({ id: 'polygon_layer', // data: polygon_data, data: polygon_data.filter(item => zlayer.includes(item.z_level)), getFillColor: d => { var inst_color var rgb = d3.color(cell_colors[d.cell_type]) inst_color = [rgb.r, rgb.g, rgb.b, 255] return inst_color }, getLineColor: d => { var inst_color var rgb = d3.color(cell_colors[d.cell_type]) inst_color = [rgb.r, rgb.g, rgb.b, 255] return inst_color }, getLineWidth: d => poly_line_width, getPolygon: d => d.coordinates, stroked: true, filled: true, wireframe: false, pickable: true, // opacity: 0.1, // polygon_opacity, }); var opacity_255 = d3.scaleLinear().domain([0, 1]).range([0, 255]) const polygon_layer3d = new deck.PolygonLayer({ id: 'polygon_layer3d', data: polygon_data3d, getFillColor: d => { var inst_color var rgb = d3.color(cell_colors[d.cell_type]) inst_color = [rgb.r, rgb.g, rgb.b, opacity_255(polygon_opacity)] return inst_color }, getLineColor: d => { var inst_color var rgb = d3.color(cell_colors[d.cell_type]) inst_color = [rgb.r, rgb.g, rgb.b, opacity_255(polygon_opacity)] return inst_color }, getLineWidth: d => 100, getPolygon: d => d.coordinates, getElevation: d => scale_z, lineWidthMinPixels: 30, stroked: true, filled: false, // nick-working extruded : true, wireframe: true, pickable: true, updateTriggers: { getFillColor: polygon_opacity, getLineColor: polygon_opacity }, }); const scatter_layer = new deck.ScatterplotLayer({ id: 'scatter_layer', data: transcripts_paritioned === 0? scatter_data.filter(item => zlayer.includes(item.z)): filtered_scatter_data.filter(item => zlayer.includes(item.z)), getPosition: d => { return [d.x, d.y] }, getFillColor: d => { var inst_color var rgb = d3.color(cat_colors[d.name]) inst_color = [rgb.r, rgb.g, rgb.b, 255] return inst_color }, getRadius: radius, pickable: true, // autoHighlight: true, highlightColor: d => [50, 50, 50], radiusMinPixels: radius_min_pixels, updateTriggers: { // getFillColor: select_meta, // getPosition: map_type }, }) const pointcloud_layer = new deck.PointCloudLayer({ id: 'pointcloud_layer', data: transcripts_paritioned === 0? scatter_data.filter(item => zlayer.includes(item.z)): filtered_scatter_data.filter(item => zlayer.includes(item.z)), getPosition: d => { return [d.x, d.y, scale_z * d.z] }, getColor: d => { var inst_color var rgb = d3.color(cat_colors[d.name]) inst_color = [rgb.r, rgb.g, rgb.b, 255] return inst_color }, getRadius: radius, pickable: true, pointSize:2, sizeUnits:'meters', // autoHighlight: true, highlightColor: d => [50, 50, 50], radiusMinPixels: radius_min_pixels, updateTriggers: { getFillColor: [polygon_opacity] // getFillColor: select_meta, // getPosition: map_type }, }) const bitmap_layer = new deck.BitmapLayer({ id: 'bitmap_layer', bounds:image_bounds, image:image_proc }); // deckgl.setProps({layers: [bitmap_layer, polygon_layer, scatter_layer]}); if (view_type === '3D'){ deckgl.setProps({layers: [bitmap_layer, polygon_layer3d, pointcloud_layer]}); } else { deckgl.setProps({layers: [bitmap_layer, polygon_layer, scatter_layer]}); } }33:[] 2f:{"title":"v10 Deck.gl Image Polygon Scatter - 3D","cells":[{"id":0,"value":"md`# v10 Deck.gl Image Polygon Scatter - 3D`","pinned":false,"hidden":false,"mode":"ojs"},{"id":541,"value":"**Additions**:\n- change z-layer to a select menu with the default being All","pinned":false,"hidden":false,"mode":"md"},{"id":401,"value":"$31","pinned":false,"hidden":false,"mode":"md"},{"id":158,"value":"view_type","pinned":true,"hidden":false,"mode":"ojs"},{"id":522,"value":"zlayer","pinned":true,"hidden":false,"mode":"ojs"},{"id":147,"value":"container = html `

`","pinned":true,"hidden":false,"mode":"ojs"},{"id":7,"value":"\n\ndashboard = html`\n\n

${viewof polygon_opacity}

${viewof transcripts_paritioned}

${viewof zlayer}

\n\n

\n ${container}\n

\n\n` \n// \n//

${viewof select_meta}

","pinned":true,"hidden":false,"mode":"ojs"},{"id":140,"value":"ini_view_type = '3D'","pinned":true,"hidden":false,"mode":"ojs"},{"id":144,"value":"view_type","pinned":true,"hidden":false,"mode":"ojs"},{"id":179,"value":"scale_z = 15","pinned":true,"hidden":false,"mode":"ojs"},{"id":185,"value":"cat_colors = ({\n 'dog': 'blue', \n 'elephant': 'purple',\n 'tiger': 'orange'\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":377,"value":"cell_colors = ({\n 'neuron': 'blue', \n 'immune': 'purple',\n 'other': 'orange'\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":132,"value":"viewof view_type = {\n const element = html`\n

`;\n\n d3.select(element)\n .selectAll('div')\n .data(['2D', '3D'])\n .join('span')\n .style('min-width', '200px')\n .style('max-width', '200px') \n .style('margin-right', '10px') \n .text(d => d)\n .style('font-weight', '550px') \n .style(\"font-family\", \"sans-serif\")\n .style(\"font-size\", \"16\")\n .style(\"text-anchor\", \"end\")\n .style('font-weight', 'bold')\n .style('color', d => d === ini_view_type ? 'blue': '#808080')\n .on('click', function(d){\n d3.select(element).selectAll('span')\n .style('color', '#808080')\n d3.select(this)\n .style('color', 'blue') \n element.value = d.replace(', ', '')\n element.dispatchEvent(new CustomEvent(\"input\")); \n }) \n\n element.value = ini_view_type\n element.dispatchEvent(new CustomEvent(\"input\"))\n\n return element\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":10,"value":"height = 700","pinned":true,"hidden":false,"mode":"ojs"},{"id":21,"value":"5*15-5","pinned":true,"hidden":false,"mode":"ojs"},{"id":29,"value":"polygon_data = [\n {\n 'name': 'something',\n 'coordinates': [[0,1], [1,1], [2,2]],\n 'z': 10,\n 'cell_type' : 'neuron',\n 'z_level': 1\n },\n \n {\n 'name': 'something2',\n 'coordinates': [[4,4], [10,4], [10,10],[4,10]],\n 'z': 10,\n 'cell_type': 'immune',\n 'z_level': 2\n } \n]","pinned":true,"hidden":false,"mode":"ojs"},{"id":265,"value":"polygon_data3d = [\n {\n 'name': 'something', \n 'coordinates': [[0,1,30], [1,1,30], [2,2,30]],\n 'cell_type': 'neuron',\n 'z': 3\n },\n \n {\n 'name': 'something2',\n 'coordinates': [[4,4,15], [10,4,15], [10,10,15],[4,10,15]],\n 'cell_type': 'immune',\n 'z': 3\n } \n]\n\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":34,"value":"scatter_data = [{'name': 'dog', 'x': 0, 'y': 1, 'z': 1, 'partition': 0},\n {'name': 'elephant', 'x': 2, 'y': 2, 'z': 2, 'partition': 1},\n {'name': 'tiger', 'x': 4, 'y': 5, 'z': 3, 'partition': 1}]","pinned":true,"hidden":false,"mode":"ojs"},{"id":59,"value":"// image = FileAttachment(\"image_string.txt\").text()","pinned":true,"hidden":false,"mode":"ojs"},{"id":93,"value":"// image","pinned":true,"hidden":false,"mode":"ojs"},{"id":72,"value":"// blue square image\nimage = '\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAIAAAAC64paAAAAHUlEQVR4nGNkYPjPQC5gIlvnqOZRzaOaRzVTRTMAIJ4BJ6WiocQAAAAASUVORK5CYII=\"'","pinned":true,"hidden":false,"mode":"ojs"},{"id":105,"value":"image_proc = image.slice(1,-1)","pinned":true,"hidden":false,"mode":"ojs"},{"id":102,"value":"// image.slice(1,-1)","pinned":true,"hidden":false,"mode":"ojs"},{"id":195,"value":"poly_line_width = 3","pinned":true,"hidden":false,"mode":"ojs"},{"id":291,"value":"ini_opacity = 1","pinned":true,"hidden":false,"mode":"ojs"},{"id":297,"value":"import {slider, select} from '@jashkenas/inputs'","pinned":true,"hidden":false,"mode":"ojs"},{"id":289,"value":"viewof polygon_opacity = slider({\n value: ini_opacity,\n min : 0,\n max : 1,\n step : .1,\n description: \"Polygon Opacity\"\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":311,"value":"viewof transcripts_paritioned = Inputs.toggle({\n label : \"Partitioned Transcripts Only\",\n // value : false,\n values :[1,0]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":351,"value":"viewof zlayer = Inputs.select(\n new Map([['All',[0,1,2,3,4,5,6]],[\"0\",[0]],[\"1\",[1]],[\"2\",[2]],[\"3\",[3]],[\"4\",[4]],[\"5\",[5]],[\"6\",[6]],['None',[]]]),\n {\n value : 8,\n label : 'Transcripts Z-level'}\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":357,"value":"scatter_data.filter(item => zlayer.includes(item.z))","pinned":true,"hidden":false,"mode":"ojs"},{"id":316,"value":"scatter_data","pinned":true,"hidden":false,"mode":"ojs"},{"id":327,"value":"filtered_scatter_data = scatter_data.filter(item => item.partition === 1)","pinned":true,"hidden":false,"mode":"ojs"},{"id":13,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":4,"value":"deck = require.alias({\n // optional dependencies\n h3: {},\n s2Geometry: {}\n})('deck.gl@8.3.7/dist.min.js')","pinned":true,"hidden":false,"mode":"ojs"},{"id":68,"value":"// image_bounds = [[0, -image_size], [0, 0], [image_size, 0], [image_size, -image_size]]\n\n// [[left, bottom], [left, top], [right, top], [right, bottom]]\nimage_bounds = [[0, -image_size], [0, 0], [image_size, 0], [image_size, -image_size]]","pinned":true,"hidden":false,"mode":"ojs"},{"id":69,"value":"image_size = 10","pinned":true,"hidden":false,"mode":"ojs"},{"id":41,"value":"radius = 1","pinned":true,"hidden":false,"mode":"ojs"},{"id":44,"value":"radius_min_pixels = 0.5","pinned":true,"hidden":false,"mode":"ojs"},{"id":24,"value":"center_x = 0","pinned":true,"hidden":false,"mode":"ojs"},{"id":27,"value":"center_y = 0","pinned":true,"hidden":false,"mode":"ojs"},{"id":6,"value":"deckgl = {\n \n // // // reference for below https://observablehq.com/@tomvantilburg/deckgl-mapbox-and-3d-tiles\n // // // This is an Observable hack: clear previously generated content\n // container.innerHTML = '';\n \n if (view_type == '3D'){\n var view = new deck.OrbitView({id: 'ortho'}) \n var INITIAL_VIEW_STATE = INITIAL_VIEW_STATE_3D\n } else {\n var view = new deck.OrthographicView({id: 'ortho'}) \n var INITIAL_VIEW_STATE = INITIAL_VIEW_STATE_2D \n }\n \n return new deck.DeckGL({\n container,\n views:[view],\n initialViewState:INITIAL_VIEW_STATE,\n controller: true,\n getTooltip: ({object}) => {\n return object && ` ${object.name}\\n${object.cell_type}\n `},\n getTooltip= ({object, layer}){\n if (object){\n if (layer.id === '')\n }\n }\n \n });\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":18,"value":"INITIAL_VIEW_STATE_2D = ({\n target: [center_x, center_y, 0],\n zoom: zoom,\n minZoom:min_zoom, \n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":169,"value":"INITIAL_VIEW_STATE_3D = ({\n target: [center_x, center_y, 0],\n rotationX: 90,\n // rotationOrbit: -720,\n // minRotationX: -720,\n // minRotationOrbit: -720,\n zoom: zoom,\n minZoom:min_zoom\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":125,"value":"min_zoom = -1.5","pinned":true,"hidden":false,"mode":"ojs"},{"id":122,"value":"zoom = 0","pinned":true,"hidden":false,"mode":"ojs"},{"id":155,"value":"view_type","pinned":true,"hidden":false,"mode":"ojs"},{"id":134,"value":"d3 = require(\"d3@5\")","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}