31:[] 2f:{"title":"Deck.gl Image Polygon Scatter - 3D","cells":[{"id":533,"value":"# Deck.gl Image Polygon Scatter - 3D\n* wrapped container in function to prevent weird dashboard overlap issue\n* switched to 3D only\n* rounded positions\n* zipped polygon and scatter data\n* switched to JPEG","pinned":false,"hidden":false,"mode":"md"},{"id":517,"value":"height = 800","pinned":true,"hidden":false,"mode":"ojs"},{"id":147,"value":"\ncontainer = {\n\n return html `

`\n}\n\n// container = html `

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

\n \n

${viewof polygon_opacity}

${viewof transcripts_paritioned}

${viewof zlayer}

\n\n

\n ${container}\n

\n\n`","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":10,"value":"// height = 800","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// ]","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":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":195,"value":"poly_line_width = 3","pinned":true,"hidden":false,"mode":"ojs"},{"id":291,"value":"ini_opacity = .5","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.checkbox([0,1,2,3,4,5,6],{\n label : \"Z-level\",\n value : [0,1,2,3,4,5,6]})","pinned":true,"hidden":false,"mode":"ojs"},{"id":357,"value":"scatter_data.filter(item => zlayer.includes(item.z))","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":484,"value":"bitmap_layer = new deck.BitmapLayer({\n id: 'bitmap_layer',\n bounds:image_bounds,\n image:image_proc\n }); ","pinned":true,"hidden":false,"mode":"ojs"},{"id":487,"value":"pointcloud_layer = new deck.PointCloudLayer({\n id: 'pointcloud_layer',\n data: transcripts_paritioned === 0? scatter_data.filter(item => zlayer.includes(item.z)): filtered_scatter_data.filter(item => zlayer.includes(item.z)),\n getPosition: d => {\n return [d.x, d.y, scale_z * d.z]\n },\n getColor: d => {\n var inst_color\n var rgb = d3.color(cat_colors[d.name])\n inst_color = [rgb.r, rgb.g, rgb.b, 255] \n return inst_color\n },\n \n getRadius: radius, \n pickable: true,\n pointSize:2,\n sizeUnits:'meters', \n // autoHighlight: true,\n highlightColor: d => [50, 50, 50], \n radiusMinPixels: radius_min_pixels,\n updateTriggers: {\n getFillColor: [polygon_opacity]\n // getFillColor: select_meta,\n // getPosition: map_type\n }, \n }) ","pinned":true,"hidden":false,"mode":"ojs"},{"id":490,"value":"// scatter_layer = new deck.ScatterplotLayer({\n// id: 'scatter_layer',\n// data: transcripts_paritioned === 0? scatter_data.filter(item => zlayer.includes(item.z)): filtered_scatter_data.filter(item => zlayer.includes(item.z)),\n// getPosition: d => {\n\n// return [d.x, d.y]\n// },\n// getFillColor: d => {\n// var inst_color\n// var rgb = d3.color(cat_colors[d.name])\n// inst_color = [rgb.r, rgb.g, rgb.b, 255] \n// return inst_color\n// },\n// getRadius: radius, \n// pickable: true,\n// // autoHighlight: true,\n// highlightColor: d => [50, 50, 50], \n// radiusMinPixels: radius_min_pixels,\n// updateTriggers: {\n// // getFillColor: select_meta,\n// // getPosition: map_type\n// }, \n// })","pinned":true,"hidden":false,"mode":"ojs"},{"id":496,"value":"opacity_255 = d3.scaleLinear().domain([0, 1]).range([0, 255])","pinned":true,"hidden":false,"mode":"ojs"},{"id":493,"value":"polygon_layer3d = new deck.PolygonLayer({\n id: 'polygon_layer3d',\n data: polygon_data3d,\n getFillColor: d => {\n var inst_color\n var rgb = d3.color(cell_colors[d.cell_type])\n inst_color = [rgb.r, rgb.g, rgb.b, opacity_255(polygon_opacity)]\n return inst_color\n },\n getLineColor: d => {\n var inst_color\n var rgb = d3.color(cell_colors[d.cell_type])\n inst_color = [rgb.r, rgb.g, rgb.b, opacity_255(polygon_opacity)] \n return inst_color\n },\n getLineWidth: d => 100,\n getPolygon: d => d.coordinates,\n getElevation: d => scale_z,\n lineWidthMinPixels: 30,\n stroked: true,\n filled: false, // nick-working\n extruded : true,\n wireframe: true,\n pickable: true,\n updateTriggers: {\n getFillColor: polygon_opacity,\n getLineColor: polygon_opacity\n }, \n }); ","pinned":true,"hidden":false,"mode":"ojs"},{"id":499,"value":"// polygon_layer = new deck.PolygonLayer({\n// id: 'polygon_layer',\n// // data: polygon_data,\n// data: polygon_data.filter(item => zlayer.includes(item.z_level)),\n// getFillColor: d => {\n// var inst_color\n// var rgb = d3.color(cell_colors[d.cell_type])\n// inst_color = [rgb.r, rgb.g, rgb.b, 255] \n// return inst_color\n// },\n// getLineColor: d => {\n// var inst_color\n// var rgb = d3.color(cell_colors[d.cell_type])\n// inst_color = [rgb.r, rgb.g, rgb.b, 255] \n// return inst_color\n// },\n// getLineWidth: d => poly_line_width,\n// getPolygon: d => d.coordinates,\n// stroked: true,\n// filled: true, \n// wireframe: false,\n// pickable: true,\n// // opacity: 0.1, // polygon_opacity,\n\n// }); ","pinned":true,"hidden":false,"mode":"ojs"},{"id":502,"value":"deckgl.setProps({layers: [bitmap_layer, polygon_layer3d, pointcloud_layer]});","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 container.innerHTML = '';\n \n var view = new deck.OrbitView({id: 'ortho'}) \n var INITIAL_VIEW_STATE = INITIAL_VIEW_STATE_3D \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}
${object.cell_type}\n `}, \n \n });\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":134,"value":"d3 = require(\"d3@5\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":529,"value":"### Unzipping","pinned":false,"hidden":false,"mode":"md"},{"id":528,"value":"pako = require('pako/dist/pako.min.js')","pinned":true,"hidden":false,"mode":"ojs"},{"id":527,"value":"function decode_zipped_string(b64Data){\n // Get some base64 encoded binary data from the server. Imagine we got this:\n \n // Decode base64 (convert ascii to binary)\n var strData = atob(b64Data);\n \n // Convert binary string to character-number array\n var charData = strData.split('').map(function(x){return x.charCodeAt(0);});\n \n // Turn number array into byte-array\n var binData = new Uint8Array(charData);\n \n // Pako magic\n var data = pako.inflate(binData);\n \n // // Convert gunzipped byteArray back to ascii string:\n // var strData = String.fromCharCode.apply(null, new Uint16Array(data));\n\n // https://stackoverflow.com/questions/8936984/uint8array-to-string-in-javascript\n var strData = new TextDecoder().decode(data);\n \n // Output to console\n \n return strData\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":526,"value":"// geojson_string = decode_zipped_string(zip_geojson_string)","pinned":true,"hidden":false,"mode":"ojs"},{"id":525,"value":"zip_polygon_data3d = 'eJxtjcEKwjAMhl8l5JxD282Lr1KKDBe0sKaydQcV331dDirbIIH/I+T//BulS4xnwCknLvcoNyTAa85jH6UrPNWb94bAEjQmEHj7lx2B0xzWJx6GS3k+tE54HrOsXa+KzYfgQOWOXC1BHXtSl9mArlL7hZ07pjQL/9xhAXupP1k='","pinned":true,"hidden":false,"mode":"ojs"},{"id":524,"value":" polygon_data3d = JSON.parse(decode_zipped_string(zip_polygon_data3d))","pinned":true,"hidden":false,"mode":"ojs"},{"id":523,"value":"polygon_data3d","pinned":true,"hidden":false,"mode":"ojs"},{"id":522,"value":"zip_scatter_data = 'eJyLrlbKS8xNVbJSUErJT1fSUVCqALINgHQlkDYE0lVQuiCxqCSzJDM/DyRfq6OA0Jiak1qQkZhXAtNtBNVtBNVthKbbEEV3SWZ6ahFMqwlUqylUqzGG1lgAgEsvhQ=='","pinned":true,"hidden":false,"mode":"ojs"},{"id":521,"value":" scatter_data = JSON.parse(decode_zipped_string(zip_scatter_data))","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}