31:Tb9b,{ const autoHighlight = true // have deck.gl animate function apply_map_morph(d){ var inst_x var inst_y if (map_type === 'Spatial'){ inst_x = d.x inst_y = - d.y } else { inst_x = umap_x_scale(d['umap-x']) inst_y = - umap_y_scale(d['umap-y']) } return [inst_x, inst_y] } var transitions = { getPosition: { duration:transitionDuration, easing: d3.easeCubic } } const scatterLayer = new deck.ScatterplotLayer({ id: 'scatterLayer', data: data, getPosition: apply_map_morph, getFillColor: d => { var inst_color = [0, 255, 0, 255] console.log(select_meta) if (select_meta === 'none'){ // show dim scatterplot inst_color = [50, 50, 50, 100] } else { // value or category based metadata if (all_genes.includes(select_meta)){ // color by value //////////////////////////////////////// if (d.name in gex_dict[select_meta]){ var inst_expression = gex_dict[select_meta][d.name] var inst_opacity = opacity_scale(inst_expression) inst_color = [255, 0, 0, inst_opacity] } else { inst_color = [50, 50, 50, 2] } } else { // color by category //////////////////////////////////////// if (select_cat === 'all'){ var rgb = d3.color(cat_colors[d[select_meta]]) inst_color = [rgb.r, rgb.g, rgb.b, 255 * cat_opacity] } else { inst_color = [50, 50, 50, 25] if (d[select_meta] === select_cat){ var rgb = d3.color(cat_colors[d[select_meta]]) inst_color = [rgb.r, rgb.g, rgb.b, 255 * cat_opacity] } } } } return inst_color }, getRadius: cell_radius, //cell_radius, radiusMinPixels: cell_min_radius, pickable: true, opacity: cell_opacity, highlightColor: d => [50, 50, 50], updateTriggers: { getFillColor: [select_meta, select_cat], getPosition: map_type }, transitions: transitions, onClick: (info, event) => { console.log(info.object[cat_name]) if (select_cat !== info.object[cat_name]){ mutable select_cat = info.object[cat_name] mutable select_meta = cat_name d3.select('#meta_dropdown').select('select').node().value = cat_name } else { mutable select_cat = 'all' mutable select_meta = cat_name d3.select('#meta_dropdown').select('select').node().value = cat_name } } }) deckgl.setProps({layers: [scatterLayer]}); }32:[] 2f:{"title":"Deck.gl Jupyter Spatial and UMAP: v0.3.3","cells":[{"id":0,"value":"md`# Deck.gl Jupyter Spatial and UMAP: v0.3.3\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"container = html `\n\n

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

${viewof map_type}

${viewof select_meta_dropdown}

${viewof cell_min_radius}

${viewof cell_opacity}

\n\n\n

${container}

\n\n` ","pinned":false,"hidden":false,"mode":"ojs"},{"id":1033,"value":"# Data","pinned":false,"hidden":false,"mode":"md"},{"id":1181,"value":"zip_obs_data = 'eJxNj9EKgzAMRX9F+jxh9nG/MoZkNjihtuLqVin9d5NY1Keb3NyeNEn1GFszdEE9qkSNw7qR0jskbfKt2l0tbvh7Up3ZNhCAmmdSDkYOyxsaRH5Iuha1OBh0HDC+58APbBktI0x1vDZr2XpSeWeh6nvBSrFjpDxXoMXpAy6oK72W0MGnNr/I6CC0nbd+/spx/DsivO0iZxwk8mY0KucNULhUFw=='","pinned":false,"hidden":false,"mode":"ojs"},{"id":1185,"value":"obs_data = JSON.parse(decode_zipped_string(zip_obs_data))","pinned":false,"hidden":false,"mode":"ojs"},{"id":20,"value":"// data = [\n// {\n// 'name': 'one',\n// 'x': 1, \n// 'y': 1, \n// 'leiden':'dog', \n// 'val': 1,\n// 'umap-x':1,\n// 'umap-y':1 \n// },\n// {\n// 'name': 'two',\n// 'x': 20, \n// 'y': 20, \n// 'val': 20,\n// 'leiden':'elephant', \n// 'umap-x':-20,\n// 'umap-y':-20 \n// } \n// ]\n\n\ndata = obs_data['data']","pinned":false,"hidden":false,"mode":"ojs"},{"id":787,"value":"// gex_dict = JSON.parse(decode_zipped_string(gex_zip_string))\n\ngex_dict = obs_data['gex_dict']","pinned":false,"hidden":false,"mode":"ojs"},{"id":637,"value":"// cat_colors = ({\n// 'dog': 'blue', \n// 'elephant': 'red'\n// })\n\ncat_colors = obs_data['cat_colors']","pinned":false,"hidden":false,"mode":"ojs"},{"id":979,"value":"# Parameters","pinned":false,"hidden":false,"mode":"md"},{"id":817,"value":"meta_data_cols = cell_metadata.concat(all_genes)","pinned":false,"hidden":false,"mode":"ojs"},{"id":834,"value":"all_genes = Object.keys(gex_dict).sort()","pinned":false,"hidden":false,"mode":"ojs"},{"id":831,"value":"cell_metadata = Object.keys(data[0]).filter(x => non_param_cols.includes(x) === false)","pinned":false,"hidden":false,"mode":"ojs"},{"id":495,"value":"ini_map_type = 'UMAP'","pinned":false,"hidden":false,"mode":"ojs"},{"id":925,"value":"mutable select_cat = 'all'","pinned":false,"hidden":false,"mode":"ojs"},{"id":659,"value":"select_meta_type = typeof data[0][select_meta]","pinned":false,"hidden":false,"mode":"ojs"},{"id":949,"value":"mutable select_meta = select_meta_dropdown","pinned":false,"hidden":false,"mode":"ojs"},{"id":932,"value":"cat_name = 'leiden'","pinned":false,"hidden":false,"mode":"ojs"},{"id":872,"value":"cell_radius = 3","pinned":false,"hidden":false,"mode":"ojs"},{"id":503,"value":"transitionDuration = 3000","pinned":false,"hidden":false,"mode":"ojs"},{"id":679,"value":"ini_cat = null","pinned":false,"hidden":false,"mode":"ojs"},{"id":124,"value":"non_param_cols = ['x', 'y', 'umap-x', 'umap-y', 'name']","pinned":false,"hidden":false,"mode":"ojs"},{"id":216,"value":"unselected_opacity_scale = 0.25","pinned":false,"hidden":false,"mode":"ojs"},{"id":202,"value":"meta_size_scale = 1.25","pinned":false,"hidden":false,"mode":"ojs"},{"id":48,"value":"default_opacity = 0.5","pinned":false,"hidden":false,"mode":"ojs"},{"id":14,"value":"height = 750","pinned":false,"hidden":false,"mode":"ojs"},{"id":538,"value":"width = 'auto'","pinned":false,"hidden":false,"mode":"ojs"},{"id":707,"value":"cat_opacity = 0.9","pinned":false,"hidden":false,"mode":"ojs"},{"id":511,"value":"zoom = 1","pinned":false,"hidden":false,"mode":"ojs"},{"id":514,"value":"minZoom = zoom - 1","pinned":false,"hidden":false,"mode":"ojs"},{"id":1138,"value":"# Unzip","pinned":false,"hidden":false,"mode":"md"},{"id":791,"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":false,"hidden":false,"mode":"ojs"},{"id":991,"value":"# Interactions","pinned":false,"hidden":false,"mode":"md"},{"id":1067,"value":"## Sliders","pinned":false,"hidden":false,"mode":"md"},{"id":751,"value":"viewof cell_opacity = slider({\n value: 1.00,\n min: 0.0,\n max: 1.0,\n precision: 2,\n description: \"cell opacity\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":749,"value":"viewof cell_min_radius = slider({\n value: 1.0,\n min: 0.1,\n max: 5.0,\n precision: 2,\n description: \"min cell size\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":995,"value":"## Dropdown Selection","pinned":false,"hidden":false,"mode":"md"},{"id":99,"value":"viewof select_meta_dropdown = select({'options':['none'].concat(meta_data_cols), value: ini_cat})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1121,"value":"## Select Map Type: Spatial/UMAP","pinned":false,"hidden":false,"mode":"md"},{"id":498,"value":"viewof map_type = {\n const element = html`\n

`;\n\n d3.select(element)\n .style('padding-right', '25px') \n .selectAll('div')\n .data(['Spatial', 'UMAP'])\n .join('span')\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 .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 === 'UMAP' ? 'blue': '#808080')\n\n\n element.value = ini_map_type\n element.dispatchEvent(new CustomEvent(\"input\"))\n\n return element\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1010,"value":"# Deck.gl","pinned":false,"hidden":false,"mode":"md"},{"id":18,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"initial_view_state = ({\n target: [ini_x, ini_y, 0],\n zoom: zoom,\n minZoom:minZoom\n})","pinned":false,"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 const view = new deck.OrthographicView({id: 'ortho'})\n \n return new deck.DeckGL({\n container,\n views:[view],\n controller: {doubleClickZoom: false},\n initialViewState:initial_view_state,\n // controller: true,\n getTooltip: ({object}) => {\n return object && \n `${object[cat_name]}` \n //+ \n //tooltip.map(x => x + ': ' + String(object[x]) ).join('\\n')\n }, \n \n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2,"value":"deck = require.alias({\n // optional dependencies\n h3: {}\n})('deck.gl@latest/dist.min.js')","pinned":false,"hidden":false,"mode":"ojs"},{"id":1021,"value":"# D3.js","pinned":false,"hidden":false,"mode":"md"},{"id":895,"value":"meta_max = {\n var meta_max\n if (select_meta in gex_dict){\n meta_max = d3.max(Object.values(gex_dict[select_meta]))\n } else {\n meta_max = 0\n }\n return meta_max\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":136,"value":"opacity_scale = d3.scaleLinear()\n .domain([0, meta_max])\n .range([0, 250])","pinned":false,"hidden":false,"mode":"ojs"},{"id":243,"value":"x_min = d3.min(data, d => d.x)","pinned":false,"hidden":false,"mode":"ojs"},{"id":245,"value":"x_max = d3.max(data, d => d.x)","pinned":false,"hidden":false,"mode":"ojs"},{"id":248,"value":"y_min = d3.min(data, d => d.y)","pinned":false,"hidden":false,"mode":"ojs"},{"id":249,"value":"y_max = d3.max(data, d => d.y)","pinned":false,"hidden":false,"mode":"ojs"},{"id":232,"value":"umap_x_min = d3.min(data, d => d['umap-x'])","pinned":false,"hidden":false,"mode":"ojs"},{"id":235,"value":"umap_x_max = d3.max(data, d => d['umap-x'])","pinned":false,"hidden":false,"mode":"ojs"},{"id":237,"value":"umap_y_min = d3.min(data, d => d['umap-y'])","pinned":false,"hidden":false,"mode":"ojs"},{"id":239,"value":"umap_y_max = d3.max(data, d => d['umap-y'])","pinned":false,"hidden":false,"mode":"ojs"},{"id":241,"value":"umap_x_scale = d3.scaleLinear()\n .domain([umap_x_min, umap_x_max])\n .range([x_min, x_max]);","pinned":false,"hidden":false,"mode":"ojs"},{"id":253,"value":"umap_y_scale = d3.scaleLinear()\n .domain([umap_y_min, umap_y_max])\n .range([y_min, y_max]);","pinned":false,"hidden":false,"mode":"ojs"},{"id":520,"value":"ini_x = d3.mean(data, d => +d.x) // 0","pinned":false,"hidden":false,"mode":"ojs"},{"id":522,"value":"ini_y = -d3.mean(data, d => +d.y) // 0","pinned":false,"hidden":false,"mode":"ojs"},{"id":1004,"value":"# Imports","pinned":false,"hidden":false,"mode":"md"},{"id":102,"value":"import {Select, Range} from '@observablehq/inputs'","pinned":false,"hidden":false,"mode":"ojs"},{"id":261,"value":"import {slider, select} from '@jashkenas/inputs'","pinned":false,"hidden":false,"mode":"ojs"},{"id":185,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":793,"value":"pako = require('pako/dist/pako.min.js')","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}