2a:null 2b:["$","title",null,{"children":"1.0.0 3D Spatial Scatter Plot | dfhannum_vizgen | Observable"}] 30:T552,pointcloud_layer = new deck.PointCloudLayer({ id: 'pointcloud_layer', data: scatter_data_proc, getPosition: d => { return [d.x, d.y, scale_z * d.z] }, getColor: d => { var inst_color var unselected_color = [0, 0, 0, 1] var rgb = d3.color(cell_colors[d.cell_type]) if (select_cell === 'none'){ inst_color = [rgb.r, rgb.g, rgb.b, opacity_255(cell_opacity)] } else { inst_color = unselected_color if (d.cell_type === select_cell){ inst_color = [rgb.r, rgb.g, rgb.b, opacity_255(cell_opacity)] } } return inst_color }, getRadius: cell_size, pickable: true, pointSize: cell_size, sizeUnits:'meters', highlightColor: d => [50, 50, 50], radiusMinPixels: radius_min_pixels, updateTriggers: { getColor: [select_cell] }, onClick: (info, event) => { if (select_cell !== info.object.cell_type){ mutable select_cell = info.object.cell_type d3.select('#meta_dropdown').select('select').node().value = info.object.cell_type } else { mutable select_cell = 'none' d3.select('#meta_dropdown').select('select').node().value = 'none' } } }) 31:[] 2e:{"id":"b3aec6d2c9174a14","slug":"1-0-0-3d-spatial-scatter-plot","title":"1.0.0 3D Spatial Scatter Plot","thumbnail":"06634a3689fb1bc846d47326718de61ca284aa962c1a7b68d8e42a1c3fad80d0","access_level":"public","create_time":"$D2023-08-04T14:00:28.607Z","update_time":"$D2023-08-04T14:45:16.283Z","view_time":null,"first_public_time":"$D2023-08-04T14:00:28.607Z","has_unpublished_edits":null,"fork":{"id":"04f827f2a5d8d55f","slug":"2-3-2-deck-gl-image-polygon-scatter-3d","title":"2.3.2 Deck.gl Image Polygon Scatter - 3D","owner":{"id":"721a0982db697748","login":"cellvisulization","name":"dfhannum_vizgen"}},"stars":0,"starred":false,"owner":{"type":"team","id":"721a0982db697748","login":"cellvisulization","name":"dfhannum_vizgen","avatar_url":"https://avatars-next.observableusercontent.com/fa13fdc55c15b3a8e4527ade6e9cfa1ff0478c5562c52a87ae1be4cab72d9943","tier":"starter_2024"},"version":660,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"3035039bd1ea2ac0","login":"dfhannum","name":"Douglas Ford Hannum Jr.","avatar_url":"https://avatars-next.observableusercontent.com/f82fffc26375d4b0fd77b773280808097102b2dffeefd2cdbcdbd334ae6260fe","tier":null}],"members":[{"type":"team","id":"721a0982db697748","login":"cellvisulization","name":"dfhannum_vizgen","avatar_url":"https://avatars-next.observableusercontent.com/fa13fdc55c15b3a8e4527ade6e9cfa1ff0478c5562c52a87ae1be4cab72d9943","tier":"starter_2024","role":"editor"},{"type":"individual","id":"3035039bd1ea2ac0","login":"dfhannum","name":"Douglas Ford Hannum Jr.","avatar_url":"https://avatars-next.observableusercontent.com/f82fffc26375d4b0fd77b773280808097102b2dffeefd2cdbcdbd334ae6260fe","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"1.0.0 3D Spatial Scatter Plot","cells":[{"id":533,"value":"# 1.0.0 3D Spatial Scatter Plot\nThe idea here is that we do the spatial plot but add the 3D element and interactivity to it.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":517,"value":"height = 800","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":147,"value":"\ncontainer = {\n\n return html `

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

`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"dashboard = html`\n\n

\n\n

${viewof select_cell_dropdown}

${viewof cell_size}

\n\n

\n ${container}\n

\n\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":575,"value":"Object.keys(cell_colors).sort()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":535,"value":"viewof select_cell_dropdown = select({'options':['none'].concat(Object.keys(cell_colors).sort()), value: 'none'})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":539,"value":"mutable select_cell = select_cell_dropdown","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":179,"value":"scale_z = 1","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":377,"value":"cell_colors = ({\n 'INC': '#1f77b4',\n 'EXC': '#aec7e8',\n 'Epen': '#ff7f0e',\n 'Mural': '#ffbb78',\n 'OGC': '#2ca02c',\n 'OPC': '#98df8a',\n 'Endo': '#d62728',\n 'MGC': '#ff9896',\n 'ASC': '#9467bd'})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":637,"value":"rgb = d3.color(cell_colors['INC'])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":643,"value":"rgb.r","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":633,"value":"d3.color(cell_colors[1])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":291,"value":"ini_opacity = .5","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":297,"value":"import {slider, select} from '@jashkenas/inputs'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":626,"value":"viewof cell_size = slider({\n value: radius,\n min : 0,\n max : 10,\n step : .5,\n description: \"Cell Size\"\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":658,"value":"viewof cell_opacity = slider({\n value: 1,\n min : 0,\n max : 1,\n step : 1,\n description: \"Cell Opacity\"\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":357,"value":"// this way we can perform a filtering of the scattered data using the selected gene\nscatter_data_proc = scatter_data.filter(d => {\n if (select_cell === 'none'){\n return d \n } else {\n return d.cell_type === select_cell\n }\n })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":560,"value":"select_cell","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":650,"value":"scatter_data_proc","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":487,"value":"$30","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":496,"value":"opacity_255 = d3.scaleLinear().domain([0, 1]).range([0, 255])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":656,"value":"opacity_255(255)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":502,"value":"deckgl.setProps({layers: [pointcloud_layer]});","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":69,"value":"image_size = 10","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"radius = 1","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":44,"value":"radius_min_pixels = 0.5","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"center_x = 638.47","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"center_y = -521.105","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"deckgl = {\n \n container.innerHTML = '';\n \n var view = new deck.OrbitView({id: 'orbit'}) \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, layer}) => {\n if (object){\n \n return object && ` ${object.name}\\n${object.cell_type} `\n \n } }, \n \n });\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":125,"value":"min_zoom = -1.5","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":122,"value":"zoom = 0","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":134,"value":"d3 = require(\"d3@5\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":529,"value":"### Unzipping","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":528,"value":"pako = require('pako/dist/pako.min.js')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":526,"value":"// geojson_string = decode_zipped_string(zip_geojson_string)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":525,"value":"zip_polygon_data3d = 'eJxtjcEKwjAMhl8l5JxD282Lr1KKDBe0sKaydQcV331dDirbIIH/I+T//BulS4xnwCknLvcoNyTAa85jH6UrPNWb94bAEjQmEHj7lx2B0xzWJx6GS3k+tE54HrOsXa+KzYfgQOWOXC1BHXtSl9mArlL7hZ07pjQL/9xhAXupP1k='","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":524,"value":" polygon_data3d = JSON.parse(decode_zipped_string(zip_polygon_data3d))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":523,"value":"polygon_data3d","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":522,"value":"zip_scatter_data = 'eJyN0ruOFTEMBuBXWU29RHbiKy0VDS+AEEripFrQFhQsiHcnXCbnFEhMN5ZG+fTb//vvx+f6aRyvHw4AxhJTOYZR77N2ws5NtKC1UDkeH46v60cFSahreFnDK8n4Z/q2JhRJvL77eHr6+OXl+fe7b9+9OX48PtygCKwGjUcUJudpVbJ1K4ZEIownRO7JNsQuSe2ErCT4LwQgblHZ+6CVpbRuY4ohxByjs54Qoyf3EyIqyfMJoV5IBKAahdBJO3H2RuwVZo1QqH3A/epINiR0tzrnS4naCtWi2nQKjwqYgx3zACKYtxutDJk3BJoyboguJRpZfkXCxpShN1geDODSLQ/cq1vbTHSDGJPLCeVyBcKCecbqQJ2kagYa2USrdvQGsSG15Lcy2Oog/4Xs0olQiuXpYSvQqnUrPfLUNhTWOMd2cPXZbieCBOfm1oWuOI2q4BjMhUZMy04yslUebZbI2ymeCHceub9QwStVyFlRrZcpQTJLXSINYeFJrZeyy+2afF9IMCfanVs7/Tf04SdhrgOH'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":521,"value":" scatter_data = JSON.parse(decode_zipped_string(zip_scatter_data))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W31","stdlib":"1"}} 2f:"$2e:body"