31:T54b,nbhd_layer = new deck.GeoJsonLayer({ id: 'nbhd_layer', data: geojson, opacity: opacity, stroked: false, filled: true, getFillColor: d => { var rgb_array = d3.color(d.properties.color) var rgb = [rgb_array.r, rgb_array.g, rgb_array.b] var inst_color if (select_cluster === 'none'){ inst_color = rgb } else { inst_color = [rgb[0], rgb[1], rgb[2], unselected_opacity_255] // check gene name if (d['properties'][cat_name] === select_cluster){ inst_color = rgb } } return inst_color }, updateTriggers: { getFillColor: [select_cluster], }, onClick: (info, event) => { var inst_cat_name = info.object.properties[cat_name] if (select_cluster !== inst_cat_name){ mutable select_cluster = inst_cat_name // mutable select_meta = cat_name d3.select('#cat_dropdown').select('select').node().value = inst_cat_name console.log('new cluster', select_cluster, inst_cat_name) } else { mutable select_cluster = 'none' // mutable select_meta = cat_name d3.select('#cat_dropdown').select('select').node().value = 'none' console.log('none cluster', select_cluster) } }, pickable: true });32:T913,zip_geojson_string = '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'33:Tde2,// version with a single alpha // zip_geojson_string = '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'34:[] 2f:{"title":"Cell Neighborhoods 0.3.1","cells":[{"id":0,"value":"# Cell Neighborhoods 0.3.1\nUsing pre-calculated GeoJSON, setting flipY option\n\nClicking is working\nWant to add compression","pinned":false,"hidden":false,"mode":"md"},{"id":70,"value":" dashboard = html`\n

\n\n

${viewof opacity}

Category ${viewof select_cat}

Alpha ${viewof select_alpha}

\n \n

${container}

\n \n

\n` \n\n //

\n //

${viewof alpha}

\n //

${viewof opacity}

\n //

\n \n //

${container}

\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":597,"value":"viewof select_alpha = select({'options':available_alphas, value: ini_alpha})","pinned":true,"hidden":false,"mode":"ojs"},{"id":626,"value":"viewof select_cat = select({'options':['none'].concat(available_cats), value: 'none'})","pinned":true,"hidden":false,"mode":"ojs"},{"id":602,"value":"import {select} from '@jashkenas/inputs'","pinned":true,"hidden":false,"mode":"ojs"},{"id":586,"value":"d3.select('#set_alpha').empty()","pinned":true,"hidden":false,"mode":"ojs"},{"id":64,"value":"viewof opacity = slider({ min: 0.01, max: 1, value: 0.75, step: 0.01, description: 'shape opacity'})","pinned":true,"hidden":false,"mode":"ojs"},{"id":560,"value":"inst_alpha_index = 0","pinned":true,"hidden":false,"mode":"ojs"},{"id":574,"value":"ini_alpha = 0","pinned":true,"hidden":false,"mode":"ojs"},{"id":572,"value":"// inst_alpha_value = available_alphas[alpha_index]","pinned":true,"hidden":false,"mode":"ojs"},{"id":520,"value":"// viewof alpha_index = slider({ min: 0, max: 10, value: 0, step: 1, description: 'alpha'})","pinned":true,"hidden":false,"mode":"ojs"},{"id":61,"value":"container = html `

`","pinned":true,"hidden":false,"mode":"ojs"},{"id":60,"value":"// mutable select_cluster = 'none'\nmutable select_cluster = select_cat","pinned":true,"hidden":false,"mode":"ojs"},{"id":265,"value":"unselected_opacity_255 = 20","pinned":true,"hidden":false,"mode":"ojs"},{"id":242,"value":"selected_deckgl_points = deckgl_points['features'].filter(x => x['properties'][cat_name] == select_cluster)","pinned":true,"hidden":false,"mode":"ojs"},{"id":289,"value":"// // passing in string of JSON object\n// geojson = JSON.parse(JSON.parse(geojson_string))\n\n// passing in JSON object \nini_geojson = JSON.parse(geojson_string)","pinned":true,"hidden":false,"mode":"ojs"},{"id":541,"value":"inst_alpha = 5","pinned":true,"hidden":false,"mode":"ojs"},{"id":546,"value":"available_alphas = Array.from(new Set(ini_geojson[\"features\"].map(x => x.properties.alpha))).sort((a, b) => a - b)","pinned":true,"hidden":false,"mode":"ojs"},{"id":639,"value":"available_cats = Array.from(new Set(ini_geojson.features.map(x => x.properties[cat_name]))) // .sort((a, b) => parseInt(a) - parseInt(b))","pinned":true,"hidden":false,"mode":"ojs"},{"id":537,"value":"alpha_features = ini_geojson[\"features\"].filter(x => x.properties.alpha == select_alpha)","pinned":true,"hidden":false,"mode":"ojs"},{"id":529,"value":"geojson = ({\n type: \"FeatureCollection\", \n features: alpha_features\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":438,"value":"transcript_radius = 1","pinned":true,"hidden":false,"mode":"ojs"},{"id":378,"value":"cell_layer = new deck.GeoJsonLayer({\n id: 'cell_layer', \n data: selected_deckgl_points,\n opacity: opacity,\n stroked: false,\n filled: true,\n getLineWidth: 0.1,\n\n getFillColor: f => {\n \n var rgb_array = d3.color(f.properties.color)\n var rgb = [rgb_array.r, rgb_array.g, rgb_array.b]\n return rgb\n },\n getRadius: transcript_radius, \n\n updateTriggers: {\n getFillColor: select_cluster,\n }, \n\n \n pickable: false\n });","pinned":true,"hidden":false,"mode":"ojs"},{"id":613,"value":"geojson","pinned":true,"hidden":false,"mode":"ojs"},{"id":291,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":42,"value":"cat_name = 'leiden'","pinned":true,"hidden":false,"mode":"ojs"},{"id":40,"value":"deckgl.setProps({layers: [nbhd_layer, cell_layer]});","pinned":true,"hidden":false,"mode":"ojs"},{"id":35,"value":"height = 850","pinned":true,"hidden":false,"mode":"ojs"},{"id":33,"value":"center_x = d3.mean(deckgl_points['features'].map(x => x['geometry']['coordinates'][0]))","pinned":true,"hidden":false,"mode":"ojs"},{"id":32,"value":"center_y = d3.mean(deckgl_points['features'].map(x => x['geometry']['coordinates'][1]))","pinned":true,"hidden":false,"mode":"ojs"},{"id":30,"value":"zoom = 3","pinned":true,"hidden":false,"mode":"ojs"},{"id":27,"value":"min_zoom = zoom - 2","pinned":true,"hidden":false,"mode":"ojs"},{"id":25,"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":655,"value":"flipY = false","pinned":true,"hidden":false,"mode":"ojs"},{"id":668,"value":"\nview = new deck.OrthographicView({id: 'ortho', flipY: flipY})","pinned":true,"hidden":false,"mode":"ojs"},{"id":24,"value":"deckgl = {\n \n container.innerHTML = '';\n \n \n var INITIAL_VIEW_STATE = INITIAL_VIEW_STATE_2D \n\n return new deck.DeckGL({\n container,\n views:[view],\n initialViewState:INITIAL_VIEW_STATE,\n // controller: true,\n controller: {doubleClickZoom: false},\n getTooltip: ({object}) => {\n return object && ` ${object['properties'][cat_name]}\n `}, \n \n });\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":19,"value":"// deck = require.alias({\n// // optional dependencies\n// h3: {},\n// s2Geometry: {}\n// })('deck.gl@8.3.7/dist.min.js')\n\n// using latest (8.8.11l) deck.gl version see https://observablehq.com/@vizgen/tile-heatmap-0-3-1\n\ndeck = require.alias({\n // optional dependencies\n h3: {}\n})('deck.gl@8.8.11/dist.min.js')","pinned":true,"hidden":false,"mode":"ojs"},{"id":13,"value":"import {slider} from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":75,"value":"d3 = require(\"d3@5\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":146,"value":"### Functions","pinned":false,"hidden":false,"mode":"md"},{"id":523,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":501,"value":"$33","pinned":true,"hidden":false,"mode":"ojs"},{"id":308,"value":"geojson_string = decode_zipped_string(zip_geojson_string)","pinned":true,"hidden":false,"mode":"ojs"},{"id":495,"value":"cell_geojson_string = '{\"type\": \"FeatureCollection\", \"features\": [{\"id\": \"0\", \"type\": \"Feature\", \"properties\": {\"color\": \"red\", \"index\": 0, \"leiden\": \"0\"}, \"geometry\": {\"type\": \"Point\", \"coordinates\": [54.340494179096545, 27.836938509379618]}}]}'","pinned":true,"hidden":false,"mode":"ojs"},{"id":373,"value":"deckgl_points = JSON.parse(cell_geojson_string)\n// deckgl_points = [] ","pinned":true,"hidden":false,"mode":"ojs"},{"id":463,"value":"pako = require('pako/dist/pako.min.js')","pinned":true,"hidden":false,"mode":"ojs"},{"id":461,"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 // console.log(strData); \n return strData\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":513,"value":"tmp = ({'1':'a', '2':'b'})","pinned":true,"hidden":false,"mode":"ojs"},{"id":516,"value":"Object.keys(tmp)","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}